2018 3월 22, 목요일 / Published in 웹디자인

웹 그리드 시스템

그리드 시스템은 페이지를 구성하는 정보를 의미있고 논리적으로 일관성있게 구성하는 것을 중요시하는 그래픽 디자이너에게 도움을 주는 정밀한 프레임워크(구조, 체제)입니다.
그리드 시스템의 초기 버전은 중세 시대(대략 476년 ~ 1453년 사이)에서부터 존재했지만, 대부분의 그래픽 디자이너들은 타이포그래피 브로슈어(프린트 디자인 결과물) 제작 과정에서 영감을 얻어 페이지 레이아웃에 대한 정밀하고 일관된 시스템을 구축하기 시작했습니다.
이후 그리드에 대한 철저한 분석을 담은 스위스의 그래픽 디자이너 요제프 뮐러 브로크가 저술된 책 Grid Systems의 발표로 그리드 시스템에 관한 지식이 전 세계적으로 전파되는데 있어 큰 기여를 이룹니다.

그리드 시스템을 사용하는 목적

“정보에 질서와 구조를 부여한다” – baseline, units, columns, gutters, margins

그리드 레이아웃으로 웹사이트를 만들 경우, 우선 웹사이트를 일정 수의 격자(grid)로 나누고 그 각각의 격자 속에 필요한 디자인 요소들을 적절하게 배치하는 방법으로 디자인을 하게 됩니다.

웹에서 그리드를 구현하는 방법

테이블(table) 방식
CSS float 속성을 사용하는 방식
Flexbox 방식
CSS Grid 방식

테이블(table) 방식

HTML의 <table> 태그를 사용하여 가로 세로 테이블을 만들고 그 테이블의 행과 열 속에 디자인 요소들을 배치하는 방법으로, 웹 초창기부터 시작해서 소위 ‘웹표준’이라 일컫는 방식이 일반화 되기 전까지 주로 사용되어 왔던 방법이다.

CSS float 속성을 사용하는 방식

.sidebox {
    width: 33%;
    float: right;
}

각각의 요소에 width 값을 준 다음 float 속성을 사용하여 왼쪽과 오른쪽으로 배치하는 방법입니다.

그런 다음, 마지막에서 소위 “clearfix”라고 하는 것을 적용하는데, 이는 float 속성만 갖는 부모 요소가 영역을 차지하지 못하는 문제를 해결하기 위한 잘 알려진 핵(hack)입니다. Clearfix 와 관련한 더 자세한 내용은 링크( float을 clear하는 4가지 방법 ) 를 참조하면 됩니다.

Flexbox 방식

‘CSS Flexible Box Layout ‘이며 이름 그대로 유연한(flex) 박스 모델을 위한 CSS 스펙입니다. Flexbox는 여러 요소들을 플렉스 컨테이너(flex container)로 감싸는 방식으로 구현합니다. 이 플렉스 컨테이너 속에 들어간 요소(자식 박스)들은 가로 세로 아주 유연하게 배치될 수 있는 것이 Flexbox의 장점입니다.

.wrap, .features {
    display: flex;
}
.content {
    flex: 2;
}
.sidebar {
    flex: 1;
}

.wrap과 .features 클래스를 flex 컨테이너로 만들었습니다. 어떤 요소가 flex 컨테이너가 되면, 그 속의 자식 요소들은 ‘flex 아이템(item)’이 되어 flex box 모델의 적용을 받습니다. flexbox 모델의 기본 값은 각각의 자식 요소들이 동일한 크기의 영역을 차지하는 것이기 때문에 여기서 .content와 .sidebar는 flex 속성값을 각각 2와 1로 주어 .content 가 .sidebar 보다 2배 크기의 영역을 차지하게끔 선언하고 있습니다.

CSS Grid 방식

/*  GRID OF FOUR  */
.span_4_of_4 {
  width: 100%;
}
.span_3_of_4 {
  width: 74.6%;
}
.span_2_of_4 {
  width: 49.2%;
}
.span_1_of_4 {
  width: 23.8%;
}

/*  GO FULL WIDTH BELOW 480 PIXELS */
@media only screen and (max-width: 480px) {
  .col {  margin: 1% 0 1% 0%; }
  .span_1_of_4, .span_2_of_4, .span_3_of_4, .span_4_of_4 { width: 100%; }
}

‘그리드 레이아웃’만을 위한 CSS 모듈입니다. 앞서 table 방식의 레이아웃과 비슷하다 말할 수도 있지만, 그 구성 방법이나 유연성에 있어서는 차원이 다르다. 또한 Flexbox 처럼 미디어 쿼리와 함께 사용하면 반응형 웹 구성도 쉽게 처리할 수 있습니다.

CSS 그리드 레이아웃을 위한 계산을 도와주는 다음 사이트를 이용하면 편리하게 각 단의 값을 구할 수 있습니다.

( Grid Generator )

장바구니