CSS (12) 그리드 레이아웃

 

1. 그리드 레이아웃이란?

 

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

이때 재배치 기준이 되는 레이아웃이 필요한데 이때 그리드 레이아웃을 사용한다.

그리드 레이아웃이란 웹 사이트를 여러 개의 칼럼으로 나눈 후 메뉴나 본문 이미지의 웹 요소를 화면에 맞게 배치하는 것을 말한다. 

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

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

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

 

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

 

CSS의 float 속성을 사용할수도 있고, 플렉서블 박스, CSS 그리드 레이아웃으로 적용할 수도 있다.

 

2.1 플렉서블 박스 레이아웃 

 

그리드 레이아웃을 기본으로하고, 각 박스를 원하는 위치에 따라 재배치 하는 것을 말한다.

여유 공간이 생길 경우 너비나 높이를 적절하게 늘이거나 줄일 수도 있다.

플렉스 박스는 수평이나 수직 방향 중 한쪽을 주축으로 정하고 배치한다. 

 

2.2 CSS 그리드 레이아웃

 

수평과 수직 어느 방향이든 배치할 수 있다. (아직 뭔진 잘...)

 

3. 플렉스 박스 레이아웃 알아보기 

 

플렉스 컨테이너(부모박스): 플렉스 박스 레이아웃을 적용할 대상을 묶는 요소

플렉스 항목 (자식박스) : 플렉스 박스 레이아웃을 적용할 대상을 의미함

주축(main axis) : 플렉스 항목을 배치하는 기본 방향

교차축(cross axis) : 주축과 교차하는 방향을 말하며, 기본적으로 위에서 아래로 배치한다. 

                                 플렉스 항목의 배치가 시작되는 위치를 교차축 시작점, 끝나는 위치를 교차축 끝점이라한다.