중간의 공백 칸은 각 2%씩 이며(11칸), 양 끝의 공백 칸은 각 1%씩(1% * 2칸 = 2%)이다.
따라서 24% 가 공백이 되겠고, 총 100% - 24% = 76% 가 칸의 공간이 된다.
초록칸은 총 12칸이다. 76% / 12 = (각 초록칸의 크기 : 6.3%)
1칸과 공백 x -> 6.3%
2칸과 공백 2% -> 14.6%
3칸과 공백 4% -> 22.9% ......이렇게 해석하면 된다.
이전 시간에 고정형 그리드는 px 단위를 썼지만 화면 창을 줄이면 컨텐츠들이 움직이지 않았다. (어떠한 액션도 없었다.)
그러나 이번에는 % 단위를 써서 가변형 그리드를 만드는 것이다. 이것은 화면 창을 줄이면 컨텐츠들이 비율을 유지하며 크기가 줄어든다.
<body>
<div class="container_12">
<div class="row">
<div class="grid_12 header">
<div class="gnb">
<ul>
<li><a href="#none">GNB1</a></li>
<li><a href="#none">GNB2</a></li>
<li><a href="#none">GNB3</a></li>
<li><a href="#none">GNB4</a></li>
<li><a href="#none">GNB5</a></li>
</ul>
</div>
<div class="logo">
<div>LOGO</div>
</div>
</div>
</div>
<div class="row section1">
<div class="grid_6">section1</div>
<div class="grid_6">section1</div>
</div>
<div class="row section2">
<div class="grid_4">section2</div>
<div class="grid_4">section2</div>
<div class="grid_4">section2</div>
</div>
<div class="row section3">
<div class="grid_3">section3</div>
<div class="grid_3">section3</div>
<div class="grid_3">section3</div>
<div class="grid_3">section3</div>
</div>
<div class="row">
<div class="grid_12 footer">
<div>office information</div>
</div>
</div>
</div>
</body>
클래스 명에다가 여러 클래스 명을 선언할 수 있다. 띄어쓰기로 구분되어진다.
<style>
* { margin:0; padding:0; }
li { list-style:none; }
a { text-decoration:none; color:#444444; }
.container_12 { }
.row { overflow:hidden; width:100%; }
.grid_1, .grid_2, .grid_3, .grid_4, .grid_5, .grid_6,
.grid_7, .grid_8, .grid_9, .grid_10, .grid_11, .grid_12 { float:left; margin-left:2%; }
.grid_1:first-child, .grid_2:first-child, .grid_3:first-child, .grid_4:first-child, .grid_5:first-child, .grid_6:first-child,
.grid_7:first-child, .grid_8:first-child, .grid_9:first-child, .grid_10:first-child, .grid_11:first-child, .grid_12:first-child { margin-left:1%; }
.grid_1 { width:6.3%; }
.grid_2 { width:14.6%; }
.grid_3 { width:22.9%; }
.grid_4 { width:31.2%; }
.grid_5 { width:39.5%; }
.grid_6 { width:47.8%; }
.grid_7 { width:56.1%; }
.grid_8 { width:64.4%; }
.grid_9 { width:72.7%; }
.grid_10 { width:81%; }
.grid_11 { width:89.3%; }
.grid_12 { width:100%; }
.header { margin:0; }
.header > .gnb { width:60%; margin:0 auto; border-bottom:1px solid #cccccc; }
.header > .gnb > ul { overflow:hidden; padding:10px; }
.header > .gnb > ul > li { float:left; width:20%;
font-size:1.5em; text-align:center;
border-right:1px dashed #cccccc; border-left:1px dashed #cccccc; box-sizing:border-box; }
.header > .logo div { margin:30px auto; width:300px; height:100px; line-height:100px; border:1px solid #cccccc; text-align:center; }
.section1, .section2, .section3 { margin:5px 0; }
.grid_6 { height:200px; background-color:#cccccc; }
.grid_4, .grid_3 { height:100px; background-color:#cccccc; }
.footer { height:100px; border-top:1px solid #cccccc; }
.footer div { text-align:center; height:100px; line-height:100px; }
</style>
'🧚🏻♂️ HTML , CSS' 카테고리의 다른 글
| CSS - transition 속성 (0) | 2021.09.28 |
|---|---|
| CSS - grid 속성 (0) | 2021.09.27 |
| CSS - overflow hidden, flow , gradient 속성 (0) | 2021.09.21 |
| CSS - 수직 가운데 정렬, position 속성 (0) | 2021.09.21 |
| CSS - magin과 padding, box-sizing, background-image (0) | 2021.09.20 |