Simple Is Best

6. 레이아웃 방법 - 2. display : inline-block 본문

HTML & CSS

6. 레이아웃 방법 - 2. display : inline-block

데이터미널 2021. 7. 2. 15:54

이전 포스팅에서는 레이아웃을 위해서 float : left를 사용하였다. 

본 포스팅에서는 modern-web에 더욱 적합한 display : inline-block; 에 대해서 알아보겠다. 

 

 

display : inline-block 

▶ inline (글자 특성) + block (박스 특성) 을 동시에 갖는다. 

1. inline-block 을 설정하게 되면 left 영역 오른쪽에 right 영역이 글자처럼 착 달라붙는다.

2. inline-block 은 글자특성을 가지기 때문에 space bar 혹은 enter에 매우 민감

 

 

HTML 

<html> 
<head>
    <meta charset="utf-8">
    <title>document</title>
    <link rel='stylesheet' href='CSS/layout2.css'>
</head>
<body>
    <div class='container'>
        <div class='header'></div>
        <div class='left'></div><div class='right'></div>
        <div class='footer'></div>
    </div>
</body>
</html>

 

▶ display: inline-block 은 공백에 민감하기 때문에 태그가 띄워지고 width가 부모 태그보다 넘어가면 다음 칸으로 넘어간다. 

 

▶ 따라서, left 와 right를 띄우고 싶다면? 주석을 편법으로 활용

        <div class='left'></div><!--
     --><div class='right'></div>

 

 

CSS

.container {
    width : 800px; 
}

.header {
    width : 100% ;
    height : 50px; 
    background-color: aqua; 
}

.left {
    width : 20%; 
    height:500px;
    background-color: brown;
    display: inline-block;
}

.right {
    width : 80%; 
    height : 500px;
    background-color: chartreuse;
    display: inline-block;
    vertical-align: top;
}

.footer {
    width: 100%;
    height : 50px; 
    background-color: blue;
}

▶  vertical-align: top(사실 아무거나) ; 을 쓰는 이유

vertical-align : baseline (기본값, 글자 등의 수직 정렬 기준점): 만약 쓰지 않는다면 right 영역에 글을 쓰자 마자 left 영역의 아래에 기준점을 둬서 정렬된다. 

 

display : inline-block; 
1. 띄우고자 하는 블록을 지정 
2. 공백, space bar 등에 유의, 텍스트에 매우 민감 => 태그를 바로 옆에 붙인다. (주석을 편법으로 활용하여 띄움)
3. vertical-align : top; 
저작자표시

'HTML & CSS' 카테고리의 다른 글

7. Navigation Bar (CSS Selector)  (0) 2021.07.05
실습 1. 블로그 목록 만들기(레이아웃 방법 , margin 상우하좌)  (0) 2021.07.04
5. 레이아웃 방법 - 1. float  (0) 2021.07.02
4. div 태그  (0) 2021.07.02
3. CSS 파일에서 스타일링  (0) 2021.07.02
'HTML & CSS' Related Articles more