반응형 웹 디자인 - 그리드 뷰

그리드 뷰는 무엇인가요？

많은 웹 페이지는 그리드 뷰(grid-view)를 기반으로 하고 있으며, 이는 페이지가 여러 열로 나뉘는 것을 의미합니다：

웹 페이지를 설계할 때, 그리드 뷰를 사용하는 것이 매우 도움이 됩니다. 이렇게 하면 페이지에 요소를 배치하는 것이 더 쉬워집니다。

응답형 그리드 뷰는 일반적으로 12열로 구성되며, 전체 너비가 100%이며, 브라우저 창 크기를 조정할 때 축소하고 확장됩니다。

응답형 그리드 뷰를 만들기

응답형 그리드 뷰를 만들기 시작해 보겠습니다。

먼저, 모든 HTML 요소의 box-sizing 속성이 설정되었습니다: border-box이렇게 하면 요소의 총 너비와 높이에 내비디지트(패딩)와 경계선이 포함됩니다。

CSS에 다음 코드를 추가하세요：

* {
  box-sizing: border-box;
}

우리의 CSS Box Sizing box-sizing 속성에 대해 더 많은 내용을 읽기 위해 이 장에서 확인하세요。

이 예제는 간단한 반응형 웹 페이지를 보여주며, 두 열을 포함하고 있습니다：

25%
75%

실례

.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;
}

직접 시도해 보세요

브라우저 창의 너비를 매우 작게 조정할 때, 예제 웹 페이지는 최적이지 않습니다. 다음 장에서 이 문제를 해결하는 방법을 배울 것입니다.