반응형 웹사이트 만들기 (기본 구성 요소 1 - 가변 그리드)

고정 그리드와 가변 그리드의 차이 

'그리드(Grid)'란 '격자', '바둑판' 이라고 할 수 있는데요. 화면을 바둑판처럼 여러 개의 기본 요소로 나눈 후 몇 개씩 합쳐 내용을 배치하는 것을 그리드 시스템이라고 합니다. 이때 화면을 나누는 기본 요소를 칼럼(Column)이라고 부릅니다.

그리드 시스템에서는 화면 너비를 몇 px로 하는가에 따라 '960 그리드 시스템'이나 '1200 그리드 시스템'으로 나누기도 하고, 화면을 몇 개의 칼럼으로 나누는가에 따라 '12 칼럼 그리드', '16 칼럼 그리드'로 나누기도 합니다. 보통 960px의 12 칼럼 그리드를 사용합니다.

앞에서 설명했듯이 그리드 시스템은 화면 너비를 고정해 놓고 그 너비 안에서 칼럼을 12개나 16개로 나누어 요소들을 배치하는 방법입니다. 이렇게 화면 너비를 특정 값으로 고정해 놓으면 그 안에 표시할 요소들의 너빗값을 지정할 수 있고 너비가 항상 일정하게 표시되기 때문에 원하는 레이아웃을 만들기도 쉽습니다. 데스크톱용 사이트만 제작한다면 이 방법이 편리합니다. 하지만 여러 종류의 기기를 이용해서 접속하는 사이트라면, 브라우저 창의 너비가 작은 기기에서 접속했을 때는 사이트 일부가 가려져서 스크롤 막대를 사용해 화면을 옮기면서 봐야 합니다.

이렇게 너빗값이 고정된 그리드(fixed grid)의 한계를 해결한 것이 바로 가변 그리드(fluid grid)입니다. 화면 너비를 특정 값으로 고정해 놓지 않고 브라우저 창의 너비에 따라 콘텐츠 너비가 달라지게 하는 방법이지요.

화면 너비에 따라 콘텐츠 너비가 넓어지고 좁아짐

가변 그리드 반응형 웹 만들기

가변 그리드는 웹 콘텐츠 모두를 깜싸고 있는 요소의 너비를 기준으로 각 요소의 너비를 계산하는 방법입니다. 예를 들어, 콘텐츠 전체를 감싸고 있는 요소를 #container 라고 한다면 #container 안에 있는 각 요소의 너비를 #container의 너빗값으로 나눈 후 100을 곱하면 됩니다.

( 요소의 너비 / 콘텐츠를 모두 감싸는 요소의 너비 ) x 100

고정 그리드를 가변 그리드로 바꾸기

1. 아래 fixed.html 문서를 참고하면 그림과 같이 1개의 칼럼과 3개의 칼럼, 6개의 칼럼으로 묶어 구성한 화면이 보일 것입니다. 각 컬럼의 너빗값을 px로 고정했기 때문에 브라우저 창 너비를 줄이더라도 요소들의 크기는 그대로여서 일부가 화면에 보이지 않고, 스클로 막대를 움직여야 볼 수 있습니다.

2. fixed.html 문서의 소스를 보면 콘텐츠 전체를 #container라는 요소가 감싸고 있고 그 너빗값이 960px 입니다. 그리고 #container 안에 .content1과 .content2, .content3의 크기도 각각 px크기로 지정되어 있습니다.

fixed.html

<style type="text/css"> html { margin: 0; } article { float: left; } #container { width: 960px; margin: 0 auto; } .content1 { width: 960px; height: 200px;     border: 1px solid black; } .content2 { width: 300px; height: 200px; border: 1px solid black;    margin: 8px; } .content3 { width: 150px; height: 200px; border: 1px solid black;   margin: 3px; } </style> <div id="container"> <div class="content1"></div> <section> <article class="content2"></article> <article class="content2"></article> <article class="content2"></article> </section> <section> <article class="content3"></article> <article class="content3"></article> <article class="content3"></article> <article class="content3"></article> <article class="content3"></article> <article class="content3"></article> </section> </div>

 

3. 데스크톱뿐만 아니라 태블릿이나 스마트폰으로 접속할 것을 고려한다면, 브라우저 화면 너비가 변하더라도 스크롤 막대 없이 한 화면안에 내용이 들어오도록 해야 합니다. 그러려면 가변 그리드에서 너비를 계산하는 공식을 적용하면 됩니다.

1. #container 960px 을 100%로 바꿉니다.

2. .content1은 너비가 960px 이므로 그대로 100%을 사용합니다.

3. .content2는 너비가 300px 이므로 (300/960)*100=31.25% 이며, 마진은 (8/960)*100=0.83% 가 됩니다.

4. .content3의 너비는 150px 이므로 (150/960)*100=15.62% 이며, 마진은 (3/960)*100=0.31% 가 됩니다.

fixed.html

<style type="text/css"> html { margin: 0; } article { float: left; } #container { width: 100%; margin: 0 auto; } .content1 { width: 100%; height: 200px;     border: 1px solid black; } .content2 { width: 31.25%; height: 200px; border: 1px solid black; margin: 0.83%; } .content3 { width: 15.62%; height: 200px; border: 1px solid black; margin: 0.31%; } </style> <div id="container"> <div class="content1"></div> <section> <article class="content2"></article> <article class="content2"></article> <article class="content2"></article> </section> <section> <article class="content3"></article> <article class="content3"></article> <article class="content3"></article> <article class="content3"></article> <article class="content3"></article> <article class="content3"></article> </section> </div>

4. 너빗값을 %로 지정한 후 브라우저에서 확인해 보면, 창의 너비에 따라 화면 요소의 너비도 같이 변하기 때문에 웹 콘텐츠가 모두 화면에 나타납니다.