1. Grid System 요소
(Container, Column, Gutter)
Container : 몇 개의 Column을 사용하는 Grid System 인지 정하는 것이다.
Column : 실제 정보가 들어가는 부분이다.
Gutter : Column의 양쪽에 들어가며 Column과 Column 간격에 을 주기 위함이다.
2. 960 Grid System
(12 Column Grid)
한줄당 총 960px을 사용하며,
그림과 같이 Gutter는 Column의 양쪽에 위치하며 폭은 10px이다.
Column의 폭은 Class name grid_1은 60px grid_2는 140px grid_12는 940px이다.
(16 Column Grid)
한줄당 총 960px을 사용하며,
그림과 같이 Gutter는 Column의 양쪽에 위치하며 폭은 10px이다.
Column의 폭은 Class name grid_1은 40px grid_2는 100px grid_16는 940px이다.
3. 960 Grid System 실습
(12 Column Grid 사용)
1. https://960.gs/에서 960 Grid System 코딩 파일(960.css)을 다운 받아 사용한다.
2. 960.css를 링크 걸기
1 | <link rel="stylesheet" type="text/css" href="960.css"> |
3. Class="container_12" 만들기(12 Column Grid 적용)
1 2 3 4 | <body> <div class="container_12"> </div> </body> | cs |
4-1. 원하는 layout 만들기
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 | <body> <div class="container_12"> <div class="grid_6"> layout1-1 </div> <div class="grid_6"> layout1-2 </div> <div class="grid_4"> layout2 </div> <div class="grid_4"> layout3 </div> <div class="grid_4"> layout4 </div> <div class="grid_12"> layout5 </div> </div> </body> | cs |
4-2. layout 잘보이기 위해 박스 만들기
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 | <style type="text/css"> .container_12{ padding-top: 10px; height: 810px; outline: dashed thin black; text-align: center; font-size: 20px; line-height: 100px; } .grid_12{ height: 200px; outline: dashed thin green; } .grid_6{ height: 200px; outline: dashed thin red; } .grid_4{ height: 400px; outline: dashed thin blue; } </style> Colored by Color Scripter | cs |
[완성본]
이 외에도 padding 값을 이용해 grid로 채우지 않고 쓰는 prefix와 suffix,
자유롭게 배치할수 있는 push과 pull 등 여러 Class이 있다.
'CSS > CSS 기초' 카테고리의 다른 글
| transform & transition (0) | 2018.05.01 |
|---|---|
| display : inline & block (0) | 2018.04.30 |
| :link :visited :hover :active 속성 (0) | 2018.03.29 |
