[React] CSS Display와 Position 정리

1. Display

display는 HTML 요소가 화면에 어떻게 배치될지를 결정하는 속성이다.

Block

block 요소는 기본적으로 한 줄 전체를 차지한다.

display: block;

따라서 여러 요소를 배치하면 기본적으로 세로 방향으로 쌓이게 된다.

Inline-block

inline-block은 요소를 한 줄에 배치하면서 width, height 등을 지정할 수 있다.

display: inline-block;

여러 요소를 가로 방향으로 배치할 때 사용할 수 있다.

2. Position

position은 요소를 어떤 기준으로 배치할지 결정하는 속성이다.

속성	설명
static	기본값이며 일반적인 문서 흐름을 따른다.
relative	자신의 원래 위치를 기준으로 이동하며, absolute 자식 요소의 기준이 될 수 있다.
absolute	일반적인 문서 흐름에서 벗어나 자유롭게 배치된다.

static

position의 기본값이다.

position: static;

별도로 position을 지정하지 않으면 일반적인 HTML 문서의 흐름에 따라 배치된다.

absolute

position: absolute;

absolute 요소는 일반적인 문서 흐름에서 벗어나 다른 요소와 별개로 배치된다.

쉽게 생각하면 기존 공간을 차지하지 않는 유령 같은 요소라고 볼 수 있다.

다만 absolute 요소는 가까운 position 지정 조상 요소를 위치의 기준으로 사용한다.

relative

position: relative;

relative는 자신의 원래 위치를 기준으로 요소를 이동할 수 있다.

또한 자식 요소가 position: absolute인 경우 absolute 요소의 위치 기준이 되는 부모로 사용할 수 있다.

.parent {
    position: relative;
}

.child {
    position: absolute;
}

따라서 relative 부모 안에 absolute 자식을 배치하는 형태가 자주 사용된다.