728x90
728x90
  1. 코드를 좌우로 정렬해준다
<html>
    <head>
        <meta charset = "utf-8">
        <title>Document</title>
        <link href = "css/main.css" rel = "stylesheet">
    </head>
    <body class="backgroundimagesea">
        <div class= "container">
            <div class="header"> </div>
            <div class="left-menu"></div><div class="right"></div>
            <div class="footer"></div>
        </div>
    </body>
</html>
  1. css에서 Inline block 설정을 해준다
.left-menu {
    width:20%;
    height:400px;
    background-color: rgba(12, 50, 242, 0.5);
    display: inline-block;

    
}

.right {
    width:80%;
    height:400px;
    background-color: rgba(40, 112, 242, 0.5);
    display: inline-block;
}

.footer {
    width: 100%;
    height: 50px;
    background-color: rgba(12, 112, 242, 0.7);

}

위의 코드는 박스를 만들어 왼쪽으로 정렬시키는 코드다.

display 속성만 inline-block 으로 조정하면 가로로 배치가 가능하다.

inline-block은 “내 폭과 높이만큼 자리차지하게 해주세요” 라는 뜻이다.

간편하지만 태그 사이에 스페이스바 공백이 있다면 그대로 보여준다

→ 가로로 정렬하려면 태그 사이의 공백도 제거해줘야 함

  • 공백제거하는 방법
  1. 주석처리 기호 사용하기
  2. 부모의 폰트사이즈를 0으로 만들기

정상적으로 된다

 

💡 부모 태그로부터 inherit되는 속성은 중요도가 가장 낮다

 

<html>
    <head>
        <meta charset = "utf-8">
        <title>Document</title>
        <link href = "css/main.css" rel = "stylesheet">
    </head>
    <body class="backgroundimagesea">
        <div class= "container">
            <div class="header"> </div>
            <div class="left-menu"></div><div class="right"></div>
            <div class="footer">
                <P>찬란한 미래를 위하여 </P.>
            </div>
           
        </div>
    </body>
</html>

이렇게 글자를 쓰면 이상하게 나온다. 해결책은 Vertical-allign을 사용해야 한다.

중앙 정렬을 하는 역할.

inline을 사용하면 Baseline을 따르게 되기 때문이다.

  1. 코드를 좌우로 정렬해준다
<html>
    <head>
        <meta charset = "utf-8">
        <title>Document</title>
        <link href = "css/main.css" rel = "stylesheet">
    </head>
    <body class="backgroundimagesea">
        <div class= "container">
            <div class="header"> </div>
            <div class="left-menu"></div><div class="right"></div>
            <div class="footer"></div>
        </div>
    </body>
</html>
  1. css에서 Inline block 설정을 해준다
.left-menu {
    width:20%;
    height:400px;
    background-color: rgba(12, 50, 242, 0.5);
    display: inline-block;

    
}

.right {
    width:80%;
    height:400px;
    background-color: rgba(40, 112, 242, 0.5);
    display: inline-block;
}

.footer {
    width: 100%;
    height: 50px;
    background-color: rgba(12, 112, 242, 0.7);

}

위의 코드는 박스를 만들어 왼쪽으로 정렬시키는 코드다.

display 속성만 inline-block 으로 조정하면 가로로 배치가 가능하다.

inline-block은 “내 폭과 높이만큼 자리차지하게 해주세요” 라는 뜻이다.

간편하지만 태그 사이에 스페이스바 공백이 있다면 그대로 보여준다

→ 가로로 정렬하려면 태그 사이의 공백도 제거해줘야 함

  • 공백제거하는 방법
  1. 주석처리 기호 사용하기
  2. 부모의 폰트사이즈를 0으로 만들기

정상적으로 된다

<aside> 💡 부모 태그로부터 inherit되는 속성은 중요도가 가장 낮다

</aside>

<html>
    <head>
        <meta charset = "utf-8">
        <title>Document</title>
        <link href = "css/main.css" rel = "stylesheet">
    </head>
    <body class="backgroundimagesea">
        <div class= "container">
            <div class="header"> </div>
            <div class="left-menu"></div><div class="right"></div>
            <div class="footer">
                <P>찬란한 미래를 위하여 </P.>
            </div>
           
        </div>
    </body>
</html>


이렇게 글자를 쓰면 이상하게 나온다. 해결책은 Vertical-allign을 사용해야 한다.

중앙 정렬을 하는 역할.

inline을 사용하면 Baseline을 따르게 되기 때문이다.

300x250
저작자표시

'2023 공부한것들' 카테고리의 다른 글

[TIL] 20230626  (0) 2023.06.27
202306026 오후 회고록  (0) 2023.06.27
[02-5] 자바스크립트의 특징  (0) 2023.06.27
20230626 오전 회고록  (0) 2023.06.26
[코딩애플 html/css] 5강 : div를 이용한 네모네모 디자인  (0) 2023.06.26

+ Recent posts

티스토리툴바