레이아웃

Layout (레이아웃)

CSS에서 요소들을 보기 쉽게, 배치하고 정렬하는 것.
레이아웃을 만드는 방법에는 float, flex, grid가 있다.

---

Layout 종류

방법 1 : float

div태그는 block특성을 가지고 있기 때문에 세로 배치. 가로로 정렬시켜주는 것 float: left;입니다.
하단의 보이지 않는 요소에 clear: both; 주게 되면 요소가 다시 보이게 됩니다.
구조가 복잡해지면 overflow: hidden; 으로 주는 것이 좋으며 그보다도
clearfix를 주는 것이 좋습니다.
/* clearfix */
.clearfix::before,
.clearfix::after {
content: '';
display: block;
line-height: 0;
}
.clearfix::after {
clear: both;
}

See the Pen 레이아웃 1 by kimyihyung (@kimyihyung) on CodePen.

See the Pen 레이아웃02 by kimyihyung (@kimyihyung) on CodePen.

See the Pen 레이아웃03 by kimyihyung (@kimyihyung) on CodePen.

방법 2 : flex

각각의 자식 요소에 적용하는 것이 아니라 부모 요소에만 적용하면 된다.
display: flex; 아이템들을 더 이상 한 줄에 담을 여유 공간이 없을 때 아이템 줄바꿈을 결정 : (flex-wrap flex-wrap: wrap;)
방향 설정은 flex-direction으로 배치되는 축의 방향을 결정하는 속성.
row : 기본값으로, 아이템들이 가로(행) 방향으로 배치
row-reverse : 아이템들이 역순으로 가로 배치
column : 아이템들이 세로(열) 방향으로 배치
column-reverse : 아이템들이 역순으로 세로 배치

See the Pen 레이아웃01 by kimyihyung (@kimyihyung) on CodePen.

See the Pen 레이아웃02 by kimyihyung (@kimyihyung) on CodePen.

See the Pen Untitled by kimyihyung (@kimyihyung) on CodePen.

방법 3 : grid

display: grid; table처럼 행과 열 나누며 area를 정해주면 됩니다.
grid-template-rows : 명시적 행의 크기
grid-template-cloumns : 명시적 열의 크기
grid-template-areas : 영역 테이블 생성

See the Pen 레이아웃1 by kimyihyung (@kimyihyung) on CodePen.

See the Pen 레이아웃2 by kimyihyung (@kimyihyung) on CodePen.

See the Pen 레이아웃3 by kimyihyung (@kimyihyung) on CodePen.