[CSS] 레이아웃(layout)에 대해 알아보자!

레이아웃(layout)

CSS에서 "layout" 이란, 다양한 요소들들 적절한 위치에 배치하고 정렬할 수 있도록 하는 기능을 뜻합니다. 작성한 순서대로 입력되는 HTML만으로는 우리가 원하는 위치에 원하는 정보를 배치할 수 없기 때문에 CSS의 layout을 이용하는 것입니다.

---

레이아웃 종류

1. float 방법

float이란, 페이지에서 이미지와 텍스트를 인라인으로 어우러지게 할 수 있는 기능입니다.(구버전)
※ float 속성을 적용하면 그 다음 요소에도 float가 적용되어 버그가 생길 수 있습니다. 이럴 때 사용할 수 있는 속성이 "clear" 입니다.

사용 방법
div태그는 block특성을 가지고 있기 때문에 세로로 나타납니다. 이를 가로로 정렬시켜주는 것이 float입니다.

float: left;
float의 버그로 인해 나타나지 않은 요소에는
clear: both;

float 기본형

레이아웃01

See the Pen layout(float방식) by KwonHyehyeon (@kwonhyehyeon) on CodePen.

레이아웃02

See the Pen layout2(float기본형) by KwonHyehyeon (@kwonhyehyeon) on CodePen.

레이아웃03

See the Pen layout3(float 기본) by KwonHyehyeon (@kwonhyehyeon) on CodePen.

float 반응형

레이아웃01

See the Pen layout01(float반응형) by KwonHyehyeon (@kwonhyehyeon) on CodePen.

레이아웃02

See the Pen layout02(float반응형) by KwonHyehyeon (@kwonhyehyeon) on CodePen.

레이아웃03

See the Pen layout03(float반응형) by KwonHyehyeon (@kwonhyehyeon) on CodePen.

2. flex 방법

flex란, 유연성을 뜻하며 레이아웃 배치 전용 기능으로 고안되었습니다. (신버전)
flex 아이템들은 가로 방향으로 배치되고 inline 요소들 처럼 아이템들의 width만큼을 차지하게 됩니다.

사용 방법

display: flex; 아이템들을 더 이상 한 줄에 담을 여유 공간이 없을 때 아이템 줄바꿈을 어떻게 할지 결정하는 속성 : flex-wrap flex-wrap: wrap;

배치 방향 설정으로는 flex-direction이라는 배치되는 축의 방향을 결정하는 속성이 있습니다.
row : 기본값으로, 아이템들이 가로(행) 방향으로 배치
row-reverse : 아이템들이 역순으로 가로 배치
column : 아이템들이 세로(열) 방향으로 배치
column-reverse : 아이템들이 역순으로 세로 배치

flex 기본형

레이아웃01

See the Pen layout01(flex) by KwonHyehyeon (@kwonhyehyeon) on CodePen.

레이아웃02

See the Pen layout02(flex) by KwonHyehyeon (@kwonhyehyeon) on CodePen.

레이아웃03

See the Pen layout03(flex) by KwonHyehyeon (@kwonhyehyeon) on CodePen.

flex 반응형

레이아웃01

See the Pen layout01(flex반응형) by KwonHyehyeon (@kwonhyehyeon) on CodePen.

레이아웃02

See the Pen layout02(flex반응형) by KwonHyehyeon (@kwonhyehyeon) on CodePen.

레이아웃03

See the Pen Untitled by KwonHyehyeon (@kwonhyehyeon) on CodePen.

3. grid 방법

grid는 2차원(행과 열)의 레이아웃 시스템을 제공합니다. 위의 방법들과는 달리, 더 복잡한 레이아웃을 만들기 위해서는 grid방법을 사용하는 것이 편리합니다.

사용 방법

display: grid; table처럼 행과 열을 나눠준 후에 area를 정해주면 됩니다.

grid를 위한 속성
grid-template-rows : 명시적 행의 크기를 정의
grid-template-cloumns : 명시적 열의 크기를 정의
grid-template-areas : 영역 이름을 참조해 테이블 생성

grid 기본형

레이아웃01

See the Pen layout01(grid기본형) by KwonHyehyeon (@kwonhyehyeon) on CodePen.

레이아웃02

See the Pen layout02(grid기본형) by KwonHyehyeon (@kwonhyehyeon) on CodePen.

레이아웃03

See the Pen layout03(grid기본형) by KwonHyehyeon (@kwonhyehyeon) on CodePen.

grid 반응형

레이아웃01

See the Pen layout01(grid반응형) by KwonHyehyeon (@kwonhyehyeon) on CodePen.

레이아웃02

See the Pen layout02(grid반응형) by KwonHyehyeon (@kwonhyehyeon) on CodePen.

레이아웃03

See the Pen Untitled by KwonHyehyeon (@kwonhyehyeon) on CodePen.