CSS 레이아웃 총정리

허정원·2021년 2월 16일

1. Position 속성

css position 속성은 웹에서 엘리먼츠를 배치하는 방법을 지정한다. 최종적인 위치는 top, bottom, left, right 속성에 의해 결정된다.

position 속성은 아래 속성 값을 가진다.

static : default 값으로 방향 값에 영향을 받지 않는다.
relative : static 일 때 위치에서 방향값의 의해 엘리먼츠가 움직인다.
absolute : position 속성 값이 static 이 아닌 가장 가까운 부모 태그를 기준으로 시작하여 방향값의 의해 움직인다. 모든 태그가 position 기본 값이라면 body 태그가 기준이 된다.
fixed : 사용자의 뷰포트가 기준이 되기 때문에 화면이 바뀌어도 고정된 위치에 존재한다. 상위 엘리먼트에 영향을 받지 않으며 방향 값의 의해 위치가 결정된다.

display 속성은 엘리먼트의 render block type 을 결정한다.
크게 inline, inline-block, block 을 속성값으로 사용한다.

block :
가로 영역을 모두 차지하여 줄바꿈이 일어난다. width, height 조정이 가능하지만 가로 영역에 공간이 있어도 항상 다음 줄에 렌더링된다.
inline :
엘리먼츠의 컨텐츠 자체만을 꾸며주어 최소한의 공간을 차지하기 때문에 수평으로 정렬하며 공간이 부족할때 줄바꿈이 일어난다. width, height 를 조정할 수 없다.
inline-block :
줄바꿈이 일어나지 않아서 수평으로 나열할 수 있으며 width, height 를 조정할 수 있다.

float 속성은 기존의 웹 레이아웃 흐름(위에서 아래)에서 벗어나 엘리먼트가 흐르듯이, 떠 있는 것처럼 바꿔준다.

left 속성값을 이용해 왼쪽에 부유할 수 있고 right 속성값을 이용해 오른쪽에 부유할 수 있다.

문제점은 float 속성을 가진 엘리먼트의 부모 엘리먼트가 높이를 인지하지 못하고 부모 영역을 벗어나서 레이아웃을 망치게 된다. 이를 해결하기 위해 세가지 방법이 존재한다.