Layout | float, flex, grid 3가지 방법

Layout

레이아웃이란 이미지나 글 등을 화면에서 보기 좋게 배열하는 것을 말합니다. 이번 게시글에서는 layout을 만드는 3가지 방법을 알아보려고 합니다.

---

1. Float-based layout

float의 사전적 의미는 '뜨다','떠돌다'이며 말 그대로 특정 요소를 뜨게 하도록 해주는 속성입니다.
플로팅 된 요소는 블럭 요소가 되며 display: inline-block;을 한 것과 같이 됩니다.

01. float: 속성값(value);

속성값	의미
left	요소를 왼쪽 방향으로 띄운다
right	요소를 오른쪽 방향으로 띄운다
none	기본값, 요소를 띄우지 않는다

02. 플로팅 해제

플롯의 원기능은 글씨와 이미지가 있을 때 정리해주기 위해 나온 속성으로 플로팅한 요소는 기본적인 문서의 배치에서 벗어난 상태이기 때문에 레이아웃이 깨지는 버그가 발생합니다.
이때 플로팅을 해제하는 방법 3가지를 알아보겠습니다.

속성값	의미
clear	float의 영향을 받지 않도록 해주는 속성
overflow	overflow: hidden; 내가 지정한 영역 외에는 안보이게 해주는 속성 height 값이 없어지는 버그는 사라지지만 2차메뉴, 3차메뉴 만들게되면 쓰지 못한다
clearfix	영역을 잡아주기 위한 속성 float을 사용한 부모박스에 적용시킨다

---

2. Flex-based layout

공간에 따라 크기를 유연하게 조절할 수 있으며 시각적인 순서와 방향을 정할 수 있다는 특징이 있으며 익스플로어에서는 사용할 수가 없습니다.
기본적인 구성은 부모 요소(container)와 자식 요소(item)으로 이루어지며, flex는 자식 요소를 감싸는 부모 요소에 적용하면 됩니다.

01. display: 속성값(value);

flex container를 정의하는 속성입니다. container와 그 주변 요소 사이의 관계를 생각하시면 됩니다.

속성값	의미
flex	block 특성의 flex container를 정의
inline-flex	inline 특성의 flex container를 정의

02. flex-wrap: 속성값(value);

플렉스 항목들의 열을 바꾸는 방법을 제어하는 속성으로 각각의 항목이 아닌 플렉스 컨테이너에 지정해줍니다.

속성값	의미
nowrap	기본값, 플렉스 항목들이 wrap 되지 않도록 지정한다
wrap	플렉스 항목들이 컨테이너 내에서 여러 줄로 열 바꿈을 할 수 있게 지정한다
wrap-reverse	정렬 방향을 반대로 나열한다
initial	기본값
inherit	부모 요소로부터 값을 상속 받는다

03. flex-direction: 속성값(value);

플렉스 항목들의 흐름 방향을 제어하는 속성으로 전체 플렉스 항목을 제어하기 때문에 각 항목이 아닌 플렉스 컨테이너에 지정해야 합니다.

속성값	의미
row	기본값, 왼쪽에서 오른쪽으로 나열한다
row-reverse	오른쪽에서 왼쪽으로 나열한다
column	수직으로 위쪽에서 아래쪽으로 나열한다
column-reverse	수직으로 아래쪽에서 위쪽으로 나열한다

---

3. Grid-based layout

float이나 flex처럼 1차원적인 레이아웃이 아닌 2차원(행과 열)적인 레이아웃을 만드는 속성입니다.

01. display: 속성값(value);

grid container를 정의하는 속성입니다.

속성값	의미
grid	block 특성의 grid container를 정의
inline-grid	inline 특성의 grid container를 정의

02. grid-area: 이름 지정;

그리드 영역의 이름을 지정해줍니다. 이 속성은 grid container가 아닌 grid 요소에 적용해줍니다.

03. grid-template-areas: 그리드 영역 지정;

지정해 놓은 그리드 영역을 템플릿으로 생성합니다. 비어있는 영역은 .(마침표)를 사용하거나 none을 입력해 정의해 줄 수 있습니다.

.container {
grid-template-areas:
    "header header header"
    "nav nav ."
    "aside article section"
    "footer footer footer"
;
}

04. grid-template-columns: 크기 지정;

열의 크기를 지정합니다.

.container {
grid-template-columns: 300px 600px 300px;
}

05. grid-template-rows: 크기 지정;

행의 크기를 지정합니다.

.container {
grid-template-rows: 300px 600px 300px;
}