격자보기는 무엇인가?
많은 웹 페이지는 페이지의 컬럼들로 분할되는 것을 의미 그리드보기에 근거 :
웹 페이지를 설계 할 때 그리드 뷰를 사용하는 것은 유용하다. 그것은 쉽게 페이지의 요소를 배치 할 수있다.
반응 형 그리드 뷰는 종종 12 열이, 100 %의 전체 폭을 가지고 있으며, 사용자가 브라우저 창 크기를 조정으로 수축과 확장됩니다.
반응 형 그리드보기 만들기
반응 형 그리드 뷰 구축을 시작하자.
우선 HTML 요소를 가지고 있는지 확인 box-sizing 로 설정 속성 border-box . 이 패딩과 보더가 요소의 전체 폭과 높이에 포함되어 있는지 확인합니다.
당신의 CSS에 다음 코드를 추가합니다 :
* {
box-sizing: border-box;
}
에 대한 자세한 읽기 box-sizing 우리의 재산 CSS3 상자 크기 조정 장.
다음 예제에서는 두 개의 열이있는 간단한 반응 형 웹 페이지를 보여줍니다
웹 페이지는 두 개의 열이 포함 된 경우 위의 예는 괜찮습니다.
그러나, 우리는 웹 페이지를 더 제어 할, 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%;} »그것을 자신을 시도 이 모든 열은 왼쪽에 떠있는, 그리고 15 픽셀의 여백이 있어야합니다 :
CSS :
[class*="col-"] {
float: left;
padding: 15px;
border: 1px solid red;
} 각 행은 래핑해야 <div> . 행 내부 열 수는 항상 12까지 추가해야합니다 :
HTML :
<div class="row">
<div class="col-3">...</div>
<div class="col-9">...</div>
</div>행 내의 열은 모두 왼쪽으로 플로팅되고, 따라서 페이지의 흐름을 인출하고, 다른 요소 열이 존재하지 않는 경우로 배치된다. 이를 방지하기 위해, 우리는 흐름을 지 웁니다 스타일을 추가합니다 :
CSS :
.row::after {
content: "";
clear: both;
display: block;
}우리는 또한 잘 보이게하기 위해 약간의 스타일과 색상을 추가하려면 :
예
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;
} »그것을 자신을 시도 당신이 매우 작은 폭으로 브라우저 창 크기를 조정할 때의 예에서 웹 페이지가 잘 보이지 않는 것을 알 수 있습니다. 다음 장에서는 해당 문제를 해결하는 방법을 배우게됩니다.