[HTML5 & CSS3] 가변 그리드 레이아웃

▶ 가변 그리드 레이아웃

사이트의 모든 요소들을 상대적 크기로 지정해 브라우저의 크기에 따라 탄력적으로 보여주는 방법이다. 가변 그리고 레이아웃에서는 CSS를 하나만 정의하면 된다.

​

​

​

*고정 그리드와 가변 그리드

웹 사이트의 레이아웃을 정할 때 자주 사용하는 기준이 '그리드 시스템' 이다. 반드시 그리드 시스템을 따를 필요는 없지만 사이트 전체의 디자인이나 일관성을 유지하는데는 그리드 시스템이 편리하다.

그리드 시스템이란 화면을 몇 개의 칼럼으로 나누어 요소들을 배치하는 것으로 필요할 때마다 칼럼들을 묶어 배치할 수 있다. 그리드 시스템을 사용하면 화면을 단순하게 만들면서도 규칙적으로 배열하기 때문에 레이아웃을 일관성 있게 유지할 수 있다는 장점이 있어 대부분의 사이트들에서 사용된다.

그리드 시스템은 화면 너비를 특정 값으로 고정해 놓고 그 안에 표시할 요소들의 너비 값을 지정하면 너비가 항상 일정하게 표시되기 때문에 원하는 레이아웃을 쉽게 만들 수 있다.

반면, 어떤 기기에서도 동일한 레이아웃을 가지면서 기기의 특성에 맞게 웹 문서가 표현되려면 문서 안의 각 요소의 너비를 픽셀과 같은 고정 값이 아니라 백분율과 같은 가변 값으로 지정하면 된다. 이렇게 사이트의 레이아웃을 백분율로 지정하는 것을 '가변 그리드 레이아웃' 또는 줄여서 '가변 레이아웃'이라고 한다.

'가변'이란 '너비 값이 정해져 있지 않다'라는 뜻으로 브라우저 너비 값이 바뀔 때마다 웹 요소의 너비 값도 함께 바뀐다는 뜻이다. 가변 그리드 레이아웃을 사용할 경우, 너비 값이 줄어들면 실제 콘텐츠를 확인하기 불편하므로 가능하면 간결한 디자인을 사용하는 것이 좋다.

​

​

​

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

너비가 줄어들면 스크롤바가 생기는 고정 그리드 레이아웃

<style>
   #wrapper { ①
      width:96%;
      margin:0 auto;
   }
   header { /* 헤더 */ ②
      width:100%;
      height:120px;
   }
   .content { /* 본문 */ ③
      float:left;
      width:62.5%;
      height:400px;
      padding:1.5625%;
      background-color:#ffd800;
   }
   .right-side { /* 사이드 바 */ ④
      float:right;
      width:31.25%;
      height:400px;
      padding:1.5625%;
      background-color:#00ff90;
   }
   footer { /* 푸터 */ ⑤
      clear:both;
      width:100%;
      height:120px;
      background-color:#c3590a;
   }
</style>

 

​

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

가변 그리드는 웹 콘텐츠 전체를 감싸는 요소의 너비를 기준으로 각 요소의 너비를 계산한다. 위에서 살펴본 예제는 #wrapper 요소가 전체를 감싸고 있다. 만약 이런 요소가 없다면 <div id="wrapper">나 <div id="container"> 처럼 직접 추가한다. id 이름은 무엇이든 상관 없다.

​

<div id="wrapper"> .... </div>

#wrapper { width:96%; /* 가변 그리드 */ margin:0 auto; }

 

​

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

기준이 되는 요소를 찾았다면 그 요소의 너비 값으로 각 요소의 너비 값을 계산한다.

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

​