블록 레벨 vs 인라인 레벨
블록 레벨은 각 요소들을 세로로 배열합니다. 블록 레벨의 요소들은 한 줄에 하나만 위치하며 다른 요소들은 자동으로 줄바꿈되어 세로로 나란히 배열됩니다. 반면, 인라인 레벨은 각 요소들을 가로로 배열합니다. 인라인 레벨의 요소들은 한 줄에 여러개가 위치하여 가로로 나란히 배열됩니다.
배치 형태 지정하기 - display
화면에 배치되는 모습을 지정하기 위해서는 display를 사용해야합니다. display 속성의 값들은 아래의 표를 참조해주세요.
| display 값 | 설명 |
| block | 요소들을 세로로 배열 (블록 레벨) |
| inline | 요소들을 가로로 배열 (인라인 레벨) |
| inline-block | 요소들을 가로로 배열 (블록 레벨이지만 인라인 레벨처럼 배열) |
| none | 요소들을 숨김 처리 |
| table | 요소들을 표로 표현 (table) |
| tale-row | 표의 행을 표현 (tr) |
| table-cell | 표의 열을 표현 (td) |
(실습 1) block / inline / inline-block
요소들을 세로로 배열하기 위해서는 block을 가로로 배열하기 위해서는 inline 또는 inline-block을 사용해야합니다. block의 경우 하나의 요소가 해당 라인 전체 영역을 차지합니다. 반면, inline의 경우 실제로 화면에 표시되는 영역만큼만 차지합니다. 따라서, display 속성에 block 값을 설정할 경우 블록 레벨이 적용되어 요소들이 세로로 배열되며 영역의 빈공간이더라도 모두 출력됩니다. 반면, display 속성에 inline 값을 설정할 경우 인라인 레벨이 적용되어 요소들이 가로로 배열되며 실제로 텍스트 등이 존재하는 영역만큼만 출력되며 빈공간은 출력되지 않습니다.
inline과 inline-block은 모두 가로로 요소들을 출력하지만 inline은 인라인 레벨, inline-block은 블록 레벨이라는 차이가 있습니다. inline-block은 블록 레벨이지만 인라인 레벨처럼 (가로로) 출력하도록 해줍니다. 또, inline-block은 블록 레벨이기 때문에 영역의 빈공간 역시 모두 출력됩니다.
<head>
<style>
div{
display:block;
/*display:inline;*/
/*display:inline-block*/
}
.A{
background-color : blue;
color : white;
width : 100px;
height : 100px;
text-align : center;
}
.B{
background-color : orange;
color : white;
width : 100px;
height : 100px;
text-align : center;
}
.C{
background-color : gray;
color : white;
width : 100px;
height : 100px;
text-align : center;
}
</style>
</head>
<body>
<div class="A">A</div>
<div class="B">B</div>
<div class="C">C</div>
</body>
'
(실습 2) none
display 속성의 값을 none으로 지정할 경우 요소들이 모두 숨김처리가 되어 보이지 않습니다.
<head>
<style>
div{
display:none;
}
.A{
background-color : blue;
color : white;
width : 100px;
height : 100px;
text-align : center;
}
.B{
background-color : orange;
color : white;
width : 100px;
height : 100px;
text-align : center;
}
.C{
background-color : gray;
color : white;
width : 100px;
height : 100px;
text-align : center;
}
</style>
</head>
<body>
<div class="A">A</div>
<div class="B">B</div>
<div class="C">C</div>
</body>
(실습 3) table / table-row / table-cell
display 속성을 사용해 표를 만들기 위해서는 table, table-row, table-cell 3가지 값을 적절히 사용해야합니다. 가장 먼저 display 속성이 table인 블록을 만들어야합니다. table은 표의 시작과 끝을 알려주는 값입니다. 다음으로 표의 행을 알려주어야합니다. 표의 행 블록은 tale-row를 사용해 구현합니다. 표의 행 블록을 구현한 후에는 행 블록 내부에 표의 열을 위한 열 블록을 만들어야합니다. 열 블록의 경우 table-cell을 사용해 구현합니다. 정리하자면 display 속성의 table 값은 html의 <table> 태그를 table-row는 <tr> 태그를 table-cell은 <td> 태그를 의미합니다.
<head>
<style>
div{
border : 1px solid;
}
.table{
display : table;
}
.table-row{
display : table-row;
}
.table-cell{
display : table-cell;
width : 30px;
}
</style>
</head>
<body>
<div class="table">
<div class="table-row">
<div class="table-cell">A</div>
<div class="table-cell">B</div>
<div class="table-cell">C</div>
</div>
</div>
<div class="table">
<div class="table-row">
<div class="table-cell">D</div>
<div class="table-cell">E</div>
<div class="table-cell">F</div>
</div>
</div>
</body>
'Programming > HTML5 & CSS3' 카테고리의 다른 글
| [CSS] 미디어쿼리 사용하는 법 (0) | 2021.02.04 |
|---|---|
| [CSS] 배치 형태 - position (0) | 2021.01.31 |
| [CSS] 다단 만드는 법 (0) | 2021.01.29 |
| [CSS] 글자 스타일 (0) | 2021.01.28 |
| [CSS] 속성 선택자, 가상 클래스 선택자 (0) | 2021.01.27 |
