[기본 개념] 6 | (6.2) 그리드, 플렉스 박스 레이아웃

[기본 개념] 6 | (6.2) 그리드, 플렉스 박스 레이아웃

1 반응형 웹

2 미디어 쿼리

3> 그리드 레이아웃

4> 플렉스 박스 레이아웃

5 CSS 그리드 레이아웃 사용

3 그리드 레이아웃

그리드 레이아웃

 

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

 

그리드 레이아웃을 3가지 특징

 

1 시각적으로 안정된 디자인

 책이나 신문 등 여러 시각 매체에서는 한 화면을 여러 개의 칼럼으로 구성하여 밑으로 늘어뜨리는 그리드 레이아웃을 사용한다. 

 

2 업데이트가 편한 웹 디자인 구성

 사이트 구조를 미리 먼저 만들어 놓고 나중에 내용을 채워 넣을 수 있다. 따라서 내용을 업데이트하기도 쉽다.

 

3 요소를 자유롭게 배치

 한 줄에 여러 블록 레벨 요소를 배치할 수도 있고, 중요한 내용은 좀 더 넓은 공간에 두어 사용자에게 잘 보이게 할 수 있다.

 

플렉서블 박스 레이아웃

 

 그리드 레이아웃을 기본으로  하고, 박스를 원하는 위치에 따라 배치하는 것이다. 플렉스 박스는 수평 방향이나 수직 방향 중 한쪽을 주축으로 정하고 배치한다.

 

 

CSS 그리드 레이아웃

 

 수평 방향과 수직 방향 어느 방향이든 배치할 수 있다. 레고 블럭처럼 끼워 맞추듯 요소를 배치한다.

 

4 플렉스 박스 레이아웃

 플렉스 박스 레이아웃은 그리드 레이아웃을 기본으로 등장한 개념이다.

 

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

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

주축(main axis) 플렉스 컨테이너 안에서 플렉스 항목을 수평방향으로 배치 (기본 방향)

교차축(cross axis) 플렉스 컨테이너 안에서 플렉스 항목을 수직방향으로 배치

 

플렉스 박스 항목을 배치하는 속성

 

종류	설명
justify-content	주축 방향의 정렬방법
align-items	교차축 방향의 정렬방법
align-self	교차축에 있는 개별 항목의 정렬방법
align-content	교차축에서 여러 줄로 표시된 항목의 정렬방법

 

플렉스 컨테이너를 지정하는 display 속성

 

 배치할 웹 요소가 있다면 그 요소를 감싸는 부모요소를 만들고, 그 부모요소를 플렉스 컨테이너로 만들어야 할 때 display 속성을 이용하면 된다.

 

종류	설명
flex	컨테이너 안의 플렉스 항목을 블록 레벨 요소로 배치
inline-flex	컨테이너 안의 플렉스 항목을 인라인 레벨 요소로 배치

 

플렉스 방향을 지정하는 flex-direction 속성

 

 플렉스 컨테이너 안에서 플렉스 항목을 배치하는 주축과 방향을 지정할 때 flex-direction 속성을 사용한다.

 

종류	설명
row	주축을 가로로 지정하고 왼쪽에서 오른쪽 배치 (기본값)
row-reverse	주축을 가로로 지정하고 오른쪽에서 왼쪽 배치
column	주축을 세로로 지정하고 위쪽에서 아래쪽 배치
column-reverse	주축을 세로로 지정하고 아래쪽에서 위쪽 배치

 

플렉스 항목의 줄을 바꾸는 flex-wrap 속성

 

 플렉스 컨테이너 너비보다 많은 플렉스 항목이 있을 경우 줄을 바꿀지 여부를 지정할 때 flex-wrap 속성을 사용한다. 

 

종류	설명
nowrap	플렉스 항목을 한 줄에 표시 (기본값)
wrap	플렉스 항목을 여러 줄에 표시
wrap-reverse	플렉스 항목을 여러 줄에 표시, 시작점과 끝점이 바뀜

 

배치 방향과 줄 바꿈을 한꺼번에 지정하는 flex-flow 속성

 

 flex-direction 속성과 flex-wrap 속성을 한꺼번에 지정하여 플렉스 항목의 배치 방향을 지정하거나 줄을 바꾼다. 기본값은 row nowrap 이다.

 

주축 정렬 방법을 지정하는 justify-content 속성

 

 justify-content 속성은 주축을 기준으로 플렉스 항목 간의 정렬 방법을 지정한다.

 

종류	설명
flex-start	주축의 시작점에 맞춰 배치
flex-end	주축의 끝점에 맞춰 배치
center	주축의 중앙에 맞춰 배치
space-between	첫 번째 항목과 끝 항목을 주축의 시작점과 끝점에 배치, 나머지는 그 사이에 같은 간격으로 배치
space-around	모든 항목을 주축에 같은 간격으로 배치

 

교차축 정렬 방법을 지정하는 align-items 속성

 

 align-items 속성은 교차축을 기준으로 플렉스 항목 간의 정렬 방법을 지정한다.

 

종류	설명
flex-start	교차축의 시작점에 맞춰 배치
flex-end	교차축의 끝점에 맞춰 배치
center	교차축의 중앙에 맞춰 배치
baseline	교차축의 문자 기준선에 맞춰 배치
stretch	플렉스 항목을 늘려 교차축에 가득 차게 배치

 

특정 항목만 정렬 방법을 지정하는 align-self 속성

 

 교차축을 기준으로 플렉스 항목의 정렬 방법을 결정할 때 특정 항목만 지정하고 싶다면 align-self 속성을 사용한다. 

 

 align-item 속성은 플렉스 컨테이너를 지정하는 선택자에서 사용하지만 align-self 속성은 플렉스 항목 선택자에서 사용한다.

 

(ex. 플렉스 박스에서 특정 항목만 정렬 방법 지정하기)

 

...
<style>
  .container {
    ...
    display : flex;			// 플렉스 컨테이너 지정
    align-items : center;		// 교차축의 중앙에 배치
  }
  #box1 { align-self : flex-start; }	// 교차축의 시작점에 배치
  #box3 { aling-self : stretch; }	// 교차축에 가득 차게 늘림
...
<div class="container">
  <div class="box" id="box1"><p>1</p></div>
  <div class="box"><p>2</p></div>
  <div class="box" id="box3"><p>3</p></div>
  <div class="box"><p>4</p></div>
</div>
...

 

여러 줄일 때 교차축 정렬 방법을 지정하는 align-content 속성

 

 주축에서 줄 바꿈이 생겨서 플렉스 항목을 여러 줄로 표시할 때 align-content 속성을 사용하여 간격을 지정할 수 있다.

 

종류	설명
flex-start	교차축의 시작점에 맞춰 배치
flex-end	교차축의 끝점에 맞춰 배치
center	교차축의 중앙에 맞춰 배치
space-between	첫 번째 항목과 끝 항목을 교차축의 시작점과 끝점에 배치, 나머지는 그 사이에 같은 간격으로 배치
space-around	모든 항목을 교차축에 같은 간격으로 배치
stretch	플렉스 항목을 늘려 교차축에 가득 차게 배치

 

 

 

 

 

 

 

출처 | Do it! HTML+CSS+자바스크립트 웹 표준의 정석(고경희)