반응형 웹 디자인 - 그리드 보기
그리드 뷰란 무엇입니까?
많은 웹 페이지는 그리드 보기를 기반으로 합니다. 즉, 페이지가 열로 나뉩니다.
그리드 보기를 사용하면 웹 페이지를 디자인할 때 매우 유용합니다. 페이지에 요소를 더 쉽게 배치할 수 있습니다.
반응형 그리드 보기에는 종종 12개의 열이 있고 총 너비는 100%이며 브라우저 창의 크기를 조정하면 축소 및 확장됩니다.
반응형 그리드 뷰 구축
반응형 그리드 보기 구축을 시작해 보겠습니다.
먼저 모든 HTML 요소의 box-sizing속성이 로 설정되어
있는지 확인합니다 border-box. 이렇게 하면 요소의 전체 너비와 높이에 패딩과 테두리가 포함됩니다.
CSS에 다음 코드를 추가합니다.
* {
box-sizing: border-box;
}
CSS 상자 크기 조정 장 box-sizing에서 속성에 대해 자세히 알아보십시오 .
다음 예는 두 개의 열이 있는 간단한 반응형 웹 페이지를 보여줍니다.
예시
.menu {
width: 25%;
float: left;
}
.main {
width: 75%;
float: left;
}
위의 예는 웹 페이지에 두 개의 열만 있으면 문제가 없습니다.
그러나 웹 페이지를 더 잘 제어하기 위해 12개의 열이 있는 반응형 그리드 보기를 사용하려고 합니다.
먼저 하나의 열에 대한 백분율을 계산해야 합니다: 100% / 12개 열 = 8.33%.
그런 다음 12개 열 각각에 대해 하나의 클래스를 만들고 class="col-"섹션이 확장되어야 하는 열 수를 정의하는 숫자를 만듭니다.
CSS:
.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%;}
이 모든 열은 왼쪽으로 떠 있어야 하고 패딩은 15px이어야 합니다.
CSS:
[class*="col-"] {
float: left;
padding: 15px;
border: 1px solid red;
}
각 행은 <div>. 행 안의 열 수는 항상 12개까지 더해야 합니다.
HTML:
<div class="row">
<div class="col-3">...</div> <!-- 25% -->
<div class="col-9">...</div> <!-- 75% -->
</div>
행 내부의 열은 모두 왼쪽으로 떠 있으므로 페이지의 흐름에서 제외되고 다른 요소는 열이 존재하지 않는 것처럼 배치됩니다. 이를 방지하기 위해 흐름을 지우는 스타일을 추가합니다.
CSS:
.row::after {
content: "";
clear: both;
display: table;
}
또한 더 보기 좋게 만들기 위해 몇 가지 스타일과 색상을 추가하고 싶습니다.
예시
html {
font-family: "Lucida Sans", sans-serif;
}
.header {
background-color: #9933cc;
color: #ffffff;
padding: 15px;
}
.menu ul {
list-style-type: none;
margin: 0;
padding: 0;
}
.menu li {
padding: 8px;
margin-bottom: 7px;
background-color :#33b5e5;
color: #ffffff;
box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
}
.menu li:hover {
background-color: #0099cc;
}
브라우저 창의 크기를 매우 작은 너비로 조정하면 예제의 웹 페이지가 제대로 표시되지 않습니다. 다음 장에서는 이를 수정하는 방법을 배우게 됩니다.