CSS 레이아웃

Position 속성

Relative

단어 뜻 그대로, 시작 위치를 기준으로 상대적으로 원하는 위치로 이동시켜주는 속성이다. 특정 요소의 위치를 이동시키기 위하여 반드시 필요한 속성이다. 시작 위치를 기준으로 top, right, bottom, left를 이용하여 위치를 이동 시키고 싶을 경우, position:relative를 사용하여 위치를 이동시킬 수 있다.

Absolute

Absolute의 사전적 의미는 "절대적인"이다.
사전적 의미 그대로, absolute는 position이 선언된 가까운 상위 요소의 위치를 기준으로 잡고 위치를 이동시켜주는 속성이다.

Fixed

단어 뜻 그대로 "고정" 되어 있는 요소이다.
Absolute와 달리, position이 선언된 상위 요소를 필요로하지 않으며, 그저 위치만 고정해주면 항상 지정된 화면 위 위치에 요소가 고정이 되어있다.

Inline

display:inline으로 설정시 다른 요소들과 일자로 정렬하며 가로와 세로의 크기를 따로 지정할 수 없다.

ex) <span>

Block

display:block으로 설정시 다른 요소들과 일자로 정렬하지 않으며 새로운 줄로 이동하게 된다. Inline과 다르게 가로와 세로의 크기를 따로 지정할 수 있다.

ex) <div>, <p>

Inline-block

이름 그대로 inline과 block을 합쳐 놓은 듯한 속성을 가지고 있다. display:inline-block으로 설정 시, inline처럼 다른 요서들과 일자로 정렬하지 않으며 새로운 줄로 이동하게 되는 속성을 가지고 있으며, block처럼 가로와 세로의 크기를 따로 지정할 수 있다.