소스
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 | <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <link href="css/grid.css" rel="stylesheet" /> <style> </style> </head> <body> <div class="container_12"> <div class="grid_1">1</div> <div class="grid_1">2</div> <div class="grid_1">3</div> <div class="grid_1">4</div> <div class="grid_1">5</div> <div class="grid_1">6</div> <div class="grid_1">7</div> <div class="grid_1">8</div> <div class="grid_1">9</div> <div class="grid_1">10</div> <div class="grid_1">11</div> <div class="grid_1">12</div> <!--<div class="grid_1">13</div>--> <div class="grid_2">1</div> <div class="grid_2">2</div> <div class="grid_2">3</div> <div class="grid_2">4</div> <div class="grid_2">5</div> <div class="grid_2">6</div> <div class="grid_3">1</div> <div class="grid_3">2</div> <div class="grid_3">3</div> <div class="grid_3">4</div> <div class="grid_12">1</div> </div> </body> </html> | cs |
결과
결과창은 grid_12 부분의 공간을 보여주는것이다
위의 소스에서 주석처리한부분을 풀어보면 12다음에 13은 아래로 한칸 내려가서 표현된다.
* 해당 파일은 <link href="css/grid.css" rel="stylesheet" /> 가 필요하다. grid.css를 다운받아야 한다.
css.zip
공간할당은 아래와 같다.
위에서부터 grid_1,grid_2,,,grid_12 순서이다.
'* Programming > HTML&CSS' 카테고리의 다른 글
| [HTML/CSS] 기본적인 웹 화면 만들기 (0) | 2016.09.27 |
|---|---|
| [HTML/CSS] 그리드(grid)를 이용한 반응형 웹 (0) | 2016.09.27 |
| [HTML/CSS] 반응형 웹 (모바일 환경&태블릿 환경&PC 환경) (0) | 2016.09.27 |
| [HTML/CSS] 위치 변경하기 (1) | 2016.09.26 |
| [HTML/CSS] 제휴 사이트 연결하기 (0) | 2016.09.26 |