[CSS] CSS Position

 

▷ CSS Layout

각 요소의 위치와 크기를 조정하여, 웹 페이지의 디자인을 결정하는 것 

Display, Position, Float(이건 오래된 기술이라 요즘 안씀), Flexbox(최신기술) 등

* Layout  : 배치, 설계

 

▷ CSS Position

요소를 Normal Flow에서 제거하여 다른 위치로 배치하는 것

레이아웃은 일단 Normal Flow에서 벗어나야한다.

그래야 우리가 원하는 위치에 배치할 수 있음 

* Normal Flow : css를 적용하지 않았을 때, 웹 페이지가 기본적으로 어디로 배치되느냐.

Inline은 오른쪽으로, Block은 아래쪽으로 흐른다

위, 아래, 좌, 우, Z축이 있다.

* Z축 : 모니터, 우리 얼굴쪽 방향/ 요소끼리 겹칠 때 어디를 위로 할 것이냐 

 

▷ CSS Position 유형

배치하는 방법은 총 5가지가 있다. 

static, relative, absolute, fixed, sticky 

 

* 참고

Position이 전체 페이지를 구성하는 것은 아니다. 그런데, 웹사이트를 만들려면 박스에 대한 개념을 알고 있어야한다. 배치에 대한 개념은 아니지만, 조금 더 작은 개념에서 어딘가에 위치시키거나 상대적으로 같이 이동시키거나 하는 것이다.