[Responsive web] 그리드 레이아웃이란?

 

 

오늘은 그리드 레이아웃에 대해 알아보자

 

 

 

[ 그리드 레이아웃 ]

반응형 웹 디자인을 사용한 사이트는 화면 너비에 따라 웹 문서의 요소를 재배치해야 한다.

재배치하려면 기준이 되는 레이아웃이 필요한데 이때 그리드 레이아웃(grid layout)을 사용한다.

 

그리드레이아웃이란 웹 사이트를 여러 개의 칼럼(column)으로 나눈 후 메뉴나 본문, 이미지 등의 웹 요소를 화면에 맞게 배치하는 것을 말한다. 그리드 레이아웃을 사용하면 화면을 규칙적으로 배열하므로 레이아웃을 일관성 있게 유지할 수 있다.

 

그리드 레이웃의 특징을 알아보자 

 

 

시각적으로 안정된 디자인을 만들 수 있다.

 

그리드 레이아웃을 사용한 웹 사이트 디자인은 사용자에게 안정감을 준다. 이미 책이나 신문 등 여러 시각매체에서는 대부분 그리드 레이아웃을 사용하고 있다. 그러므로 우리의 눈은 한 화면을 여러 개의 칼럼으로 구성해서 밑으로 늘어뜨리는 그리드 레이아웃에 익숙하다.

 

 

업데이트가 편한 웹 디자인을 구성할 수 있다.

 

그리드 레이아웃을 이용하면 실제 내용을 넣지 않은 상태에서도 사이트 레이아웃을 미리 만들어 볼 수 있다.

사이트나 콘텐츠 영역의 너비, 각 요소의 위치 등 사이트 구조를 먼저 만들어 놓고 나중에 내용을 채워 넣을 수 있다.

 

 

요소를 자유롭게 배치할 수 있다.

 

우리가 잘 알고 있는 <div>나  <p> 같은 블록 레벨 요소는 그리드 레이아웃을 사용하지 않는다면 한 줄에 하나의 요소만 배치할 수 있다. 따라서 그리드 레이아웃을 사용하지 않는 웹사이트에서는 원하는 내용을 찾기가 불편하다. 

 

하지만 그리드 레이아웃을 사용하면 한 줄에 여러 요소를 배치할 수도 있고, 중요한 내용은 좀 더 넓은 공간에 두어 사용자에게 잘 보이게 할 수 있다. 

 

 

그리드 레이아웃을 만드는 방법

 

반응형 웹 디자인에 적합한 그리드 레이아웃을 만드는 방법은 여러 가지가 있다. 기존에 알고 있던 가변 그리드를 CSS의 float 속성으로 사용할 수도 있고, 플렉시블 박스 레이아웃이나 CSS 그리드 레이아웃으로 적용할 수도 있다. 

 

플렉시블 박스 레이아웃

https://despiteallthat.tistory.com/68

[Responsive web] 플렉시블 박스 레이아웃이란?

 

CSS 그리드 레이아웃

https://despiteallthat.tistory.com/69

[Responsive web] CSS 그리드 레이아웃이란?