14-2 가변 그리드 레이아웃
고정 그리드와 가변 그리드
웹 사이트의 레이아웃을 정할 때 자주 사용하는 기준이 그리드 시스템(grid system)이다.
그리드 시스템이란 화면을 몇 개의 칼럼(column)으로 나누어 요소들을 배치하는 것으로 필요할 때마다 칼럼들을 묶어 배치할 수 있다.
화면 너비를 몇 픽셀로 하는가에 따라 960 그리드 시스템이나 1200 그리드 시스템,
또는 화면을 몇 개의 칼럼으로 나누는가에 따라 12칼럼 그리드, 16칼럼 그리드, 24칼럼 그리드 등으로 나타낼 수 있다.
반면, 어떤 기기에서도 동일한 레이아웃을 가지면서 기기의 특성에 맞게 웹 문서가 표현되려면 문서 안의 각 요소의 너비를 픽셀과 같은 고정 값이 아니라 백분율과 같은 가변 값으로 지정하면 된다. 이렇게 사이트의 레이아웃을 백분율로 지정하는 것을 가변 그리드 레이아웃(fluid grid layout)또는 줄여서 가변 레이아웃(fluid layout)이라고 한다.
14/fixed-layout.html과 14/fluid-grid.html 비교하기
가변 그리드 레이아웃 만들기
- 전체를 감싸는 요소 확인하기
- 각 요소의 너비 값 계산하기 - (요소의 너비 / 콘텐츠 전체를 감싸는 요소의 너비)*100