반응형 웹 - 가변 그리드 레이아웃

반응형 웹 - 가변 그리드 레이아웃

고정 그리드와 가변 그리드

• 웹 사이트의 레이아웃을 정할 때 자주 사용하는 기준이 '그리드 시스템(grid system)'입니다. 반드시 그리드 시스템을 따를 필요는 없지만 사이트 전체의 디자인이나 일관성을 유지하는데는 그리드 시스템이 편리합니다.
• 그리스 시스템이란 화면을 몇 개의 칼럼(column)으로 나누어 요소들을 배치하는 것으로 필요할 때마다 칼럼들을 묶어 배치할 수 있습니다. 그리드 시스템을 사용하면 화면을 단순하게 만들면서도 규칙적으로 배열하기 때문에 레이아웃을 일관성 있게 유지할 수 있다는 장점이 있어 대부분의 사이트들에서 사용됩니다.
• 그리드 시스템에서는 화면 너비를 몇 픽셀로 하는가에 따라 960픽셀로 고정하는 '960 그리드 시스템'이나 1200픽셀로 고정하는 '1200 그리드 시스템'으로 나누기도 하고 화면을 몇개의 칼럼으로 나누는가에 따라 12칼럼 그리드로도 나누는데 주로 960픽셀의 12칼럼 그리드를 사용합니다.
• 그리드 시스템은 화면 너비를 특정 값으로 고정해 놓고 그 안에 표시할 요소들의 너비 값을 지정하면 너비가 항상 일정하게 표시되기 때문에 원하는 레이아웃을 쉽게 만들 수 있습니다.
• PC용 사이트만 만들다면 편리한 반면 어떤 기기에서도 동일한 레이아웃을 가지면서 기기의 특성에 맞게 웹 문서가 표현되려면 문서 안의 각 요소의 너비를 픽셀과 같은 고정 값이 아니라 백분율과 같은 가변 값으로 지정하면 됩니다. 이렇게 사이트의 레이아웃을 백분율로 지정하는 것을 '가변 그리드 레이아웃(fluid grid layout) 또는 줄여서 '가변 레이아웃(fluid layout)'이라고 합니다.
• '가변(fluid)'이란 '너비 값이 정해져 있지 않다'라는 뜻으로 브라우저 너비 값이 바뀔 때마다 웹 요소의 너비 값도 함께 바뀐다는 뜻입니다. 가변 그리드 레이아웃을 사용할 경우, 너비 값이 줄어들면 실제 콘텐츠를 확인하기 불편하므로 가능하면 간결한 디자인을 사용하는 것이 좋습니다.

가변 그리드 레이아웃 만들기

• 가변 그리드 레이아웃을 만들기 위해 특별한 디자인 방법이 필요한 것은 아닙니다. 픽셀을 이용한 레이아웃을 만들어 놓았다면 간단한 계산법으로 만들 수 있습니다. 다시 말해 고정 그리드 레이아웃을 만들고 가변 그리드 레이아웃으로 바꿀 수 있다는 것입니다.
• 고정 그리드 레이아웃의 경우 브라우저 창의 너비가 줄어들면 문서 내용이 가려지면서 스크롤바가 생기게 됩니다.

 

고정 그리드 레이아웃을 가변 그리드 레이아웃으로 바꾸기

1. 전체를 감사는 요소 확인하기

• 가변 그리드는 웹 콘텐츠 전체를 감싸는 요소의 너비를 기준으로 각 요소의 너비를 계산합니다. 레이아웃 전체를 감싸는 요소가 #wrap 라고 할 때 화면 양옆에 여백을 두기 위해 너비를 96%로 지정합니다. 모니터 화면에 가득차게 표시하고 싶다면 100%로 지정해도 됩니다.

 

예)
        #wrap {
            width : 96%;
            margin : 0 auto;
        }

 

2. 각 요소의 너비 값 계산하기

• 기준이 되는 요소를 찾았다면 그 요소의 너비 값으로 각 요소의 너비 값을 계산합니다.
• 요소의 너비 값을 %로 지정할 때 소수점 이하 숫자가 많다면 이하 3~4자리까지 표시하는 것이 좋습니다. 그리고 요소들의 너비와 함께 패딩과 마진도 백분율 값으로 조절하는 것이 자연스럽습니다.
• 각 요소에 사용한 패딩과 마진 값도 #wrap 너비 값으로 나눈 후 100을 곱해 계산합니다.
• 가변 그리드 레이아웃은 너비가 줄거나 늘어나면 높이 값이 계속 바뀌므로 높이 값을 백분율로 바꾸지 않습니다.
• 고정 그리드 레이아웃을 가변 그리드 레이아웃으로 변경하면 스크롤바없이 한 눈에 웹 문서를 볼 수 있습니다.

 

(요소의 너비 / 콘텐츠 전체를 감싸는 요소의 너비) * 100

 

요 소	고정 그리드	가변 그리드
header	960px	100%
.content	600px	62.5%
padding	15px	1.5625%
.right-side	300px	31.25%
padding	15px	1.5625%
footer	960px	100%

 

 

참고 : HTML5 + CSS3 웹 표준의 정석