반응형을 위한 그리드. 보통 12개의 칼럼으로 나뉘며, 칼럼중 1개만 차지할때, 2개를 차지할때 이런 식으로 넓이를 지정해 주면 된다. 각각의 col들은 모두 float: left; 되어야 한다.
.col-1 {width: 8.33%;}
.col-2 {width: 16.66%;}
.col-3 {width: 25%;}
.col-4 {width: 33.33%;}
.col-5 {width: 41.66%;}
.col-6 {width: 50%;}
.col-7 {width: 58.33%;}
.col-8 {width: 66.66%;}
.col-9 {width: 75%;}
.col-10 {width: 83.33%;}
.col-11 {width: 91.66%;}
.col-12 {width: 100%;}
[class*="col-"] {
float: left;
}
각각 칼럼은 하나의 row (가로 줄) 안에 위치한다. 그리고, 그 row에는 clear:both를 적용시켜 그 row의 height값을 지킬 수 있다.
<div class="row">
<div class="col-3">...</div> <!-- 25% -->
<div class="col-9">...</div> <!-- 75% -->
</div>
.row::after {
content: "";
clear: both;
display: table;
}
728x90
'퍼블리싱 > HTML | CSS | Javascript' 카테고리의 다른 글
select박스로 페이지 이동하기 (링크걸기) (0) | 2017.04.07 |
---|---|
마우스우클릭방지 / 선택방지 / 드래그방지 (0) | 2017.04.05 |
CSS - flexbox (0) | 2017.04.05 |
글자 아이콘, fontawsome (0) | 2017.04.04 |
background animate (0) | 2017.04.04 |