CSS 위치 속성 : display, position

css 문서에서 위치를 지정하고 수정하는 데에 가장 중요한 속성인 display, position, float에 대해 설명하겠습니다.

display

: block

해당 요소를 block 요소로 만든다. (줄바꿈 됨)

: inline

해당 요소를 inline 요소로 만든다. (줄바꿈 안됨)

: inline-block

해당 요소를 inline-block 요소로 만든다. (줄바꿈 안됨)

: none

해당 요소를 보이지 않게 한다.
* { display : none }은 해당 요소 자체를 없는 것으로 판단한다.
따라서 공간을 차지하지 않지만, { visibility : hidden }은
해당 요소를 보이지 않게 숨겨두는 것 뿐이므로 해당 요소의 크기만큼
공간을 차지한다.

: flex

해당 요소를 flexbox 요소로 만든다.

: grid

해당 요소를 grid 요소로 만든다.

position

: static

기본값. 부모 요소를 기준으로 하는 위치로,
자식 요소의 크기에 따라 부모 요소의 크기가 자동으로 변경된다. 
(top, left, right, bottom 속성 지정 불가능)

: relative

자기 자신의 위치를 기준으로 하는 상대적인 위치.
top, left, right, bottom등의 속성값을 지정할 수 있다.
자식 요소의 크기에 따라 부모 요소의 크기가 자동으로 변경되지만,
요소의 위치에는 영향을 받지 않는다.

: absolute

부모 요소의 위치를 기준으로 한 상대 위치를 지정한다.
부모 요소는 반드시 position이 relative 속성이어야 하며,
해당 요소의 크기가 부모 요소의 크기에 반영되지 않으므로 주의해야 한다.

: fixed

브라우저 창을 기준으로 위치를 지정한다.
전체 문서를 기준으로 위치가 정해지므로 부모 요소의 위치와는 무관하며,
해당 요소의 크기가 부모 요소의 크기에 반영되지 않는다.
또한 스크롤의 영향을 받지 않고 위치가 고정된다.
주로 특정 UI 요소를 부라우저 화면에 고정항 때 사용한다.