[#3] 반응형 웹에 어울리는 그리드 레이아웃 디자인

03-1 그리드 시스템

웹 사이트를 구성할 때 콘텐츠를 유연하게 배치하기 위한 시스템

'960px의 12칼럼 그리드 시스템'이란 화면 너비를 960px로 하고 12개의 칼럼으로 나눈 그리드 시스템

[ 특징 ]

시각적으로 안정된 디자인

단순한 웹 디자인

내용을 원하는 대로 배치

 

03-2 그리드 레이아웃을 만드는 방법 4가지

방법1. 가변 그리드 레이아웃

사이트의 레이아웃을 백분율로 지정하는 것, 웹 요소 배치가 그대로 유지되기 때문에 단순한 레이아웃의 사이트에 적합

방법2. CSS의 float 속성을 사용한 그리드 레이아웃

float 속성은 특정 요소를 화면의 왼쪽이나 오른쪽으로 띄우고 다른 내용은 그 옆으로 흘러가도록 만드는 속성

방법3. 플렉스 박스를 사용한 그리드 레이아웃

그리드 레이아웃을 기본으로 해 각 그리드(박스)를 원하는 위치에 배치하는 것

방법 4. CSS 그리드 레이아웃

수평이나 수직, 한가지 방향을 기준으로 웹 요소를 배치하는 플렉스 박스 레이아웃과 다르게 수평과 수직 모두를 이용해서 2차원으로 배치할 수 있음