반응형 웹과 미디어 쿼리 4 - 그리드 레이아웃에 대하여

이제 얼마 남지 않았으니 조금 더 힘을 내보기로 하자. 솔직히 지금 공부가 많이 하기 싫은 마음이 들지만 참고 해보는 중이다.

 

웹 사이트의 레이아웃을 정할 때 사이트 전체 디자인이나 일관성을 유지하려면 그리드 레이아웃을 사용해야 한다. 여기서는 그리드 레이아웃의 특징을 알아보고, 그리드 레이아웃을 만드는 방법으로 플렉서블 박스 레이아웃과 CSS 그리드 레이아웃을 간단히 살펴보겠다.

---

 

 

 

그리드 레이아웃이란

반응형 웹 디자인을 사용한 사이트는 화면 너비에 따라 웹 문서의 요소를 재배치해야 한다. 재배치하려면 기준이 되는 레이아웃이 필요한데 이때 그리드 레이아웃을 사용한다.

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

 

그리드 레이아웃의 3가지 특성은 다음과 같다.

 

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

그리드 레이아웃을 사용한 웹 사이트 디자인은 사용자에게 안정감을 준다. 우리의 눈은 한 화면을 여러 개의 칼럼으로 구성해서 밑으로 떨어뜨리는 그리드 레이아웃에 익숙하다.

 

 

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

그리드 레이아웃을 사용하면 실제 내용을 넣지 않은 상태에서도 사이트 레이아웃을 미리 만들어 볼 수 있다. 사이트나 콘텐츠 영역의 너비, 각 요소의 위치 등 사이트 구조를 먼저 만들어 놓고 나중에 채워 넣을 수 있다. 이렇게 사이트를 만들면 나중에 내용을 업데이트하기도 쉽다.

 

 

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

우리가 잘 알고 있는 <div>나 <p> 같은 블록 레벨 요소는 한 줄에 하나의 요소만 배치할 수 있다. 따라서 그리드 레이아웃을 사용하지 않는 웹 사이트에서는 원하는 내용을 찾기가 매우 불편할 것이다. 하지만 그리드 레이아웃을 사용하면 한 줄에 여러 요소를 배치할 수 있고, 중요한 내용은 좀더 넓은 공간에 두어 사용자에게 잘 보이게 할 수 있다.

 

 

 

 

 

 

 

 

 

이렇게 웹사이트를 12개의 칸으로 나누어서 보면 어디서부터 시작하고 끝나는지 쉽게 파악할 수 있다.

---

 

 

 

 

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

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

 

 

플렉서블 박스 레이아웃

 

플렉스 박스는 수평 방향이나 수직 방향 중에서 한쪽을 주축으로 정하고 박스를 배치한다. 예를 들어 위의 그림처럼 추축을 수평으로 정하면 박스를 왼쪽에서부터 오른쪽으로 순서대로 배치하는데, 화면 너비를 넘어가면 수직으로 이동해서 다시 순서대로 배치한다.

---

 

 

 

CSS 그리드 레이아웃

플렉스 박스를 사용할 때는 '주축'이라는 개념이 있어서 수평이나 수직 중 하나를 기준으로 해서 요소를 배치한다. 하지만 CSS 그리드 레이아웃은 수평과 수직 어느 방향이든 배치할 수 있다. 

 

---

 

 

 

학습을 마치고

이 단원은 양이 많지 않지만 한 단원이 끝나니 여기서 끝을 맺기로 했다. 다음에 공부할 단원은 플렉스 박스 레이아웃이다. 그리드 레이아웃보다 더 많이 사용된다고 한다.

반응형 웹을 공부할 때 레이아웃도 알아야 하는줄은 몰랐는데 화면을 배치하고 웹페이지를 제작하려면 기본적인 디자인은 다룰줄 알아야 할 것 같다.

 

나중에 디자인 관련 공부도 시간나면 꼭 해볼 것이다.