[CSS] Position과 Display

Position

1. static(default)

-   가장 기본 위치
-   top, bottom, left, right 등을 사용할 수 없다.
-   기본 문서 흐름에서 벗어나지 않는다.

2. relative

-   기본 위치에 대해서 상대적인 위치(즉, 기본 위치에 대한 '공간'은 차지하고 있음)
-   static에 해당하는 위치에서 각 방향에 대해 얼만큼 이동할지 설정
-   기본 문서 흐름에서 벗어나지 않는다.

3. absolute

-   말 그대로 절대적인 위치로, 페이지 레이아웃에 공간을 배정하지도 않는다.
-   가장 가까운 위치 지정 부모 요소에 대해 상대적인 위치로 설정
-   단, 부모 요소 중 위치 지정 요소가 없다면(static만 있다면) 초기 컨테이닝 블록을 기준으로 배치
-   기본 문서 흐름에서 벗어난다.

4. fixed

-   페이지 레이아웃에 공간을 배정하지 않는다.
-   뷰포트의 초기 컨테이닝 블록을 기준으로 배치
-   기본 문서 흐름에서 벗어난다.

5. sticky

-   가장 가까운, 스크롤되는 부모 요소를 컨테이닝 블록으로 삼아 각 방향에 대한 위치 설정

+ Z-index

• position이 static(default)가 아닌 요소들('위치 지정 요소'라고 함)에 대해서 지정해줄 수 있는 특성
• 단순하게 z-index가 높을수록 사용자의 시각에서 더 잘보이게 바깥쪽으로 드러난다고 볼 수 있다.
• 레이어를 쌓았을 때, 가장 위쪽(제일 먼저 보이는) 레이어

Display

1. Inline

-   다른 요소들과 가로축을 공유 가능한 요소들
-   ex) span, strong, a 등등
-   box보다 더 큰 공간을 차지할 것이라 기대하지 않는다.
-   따로 width, height을 지정할 수 없다. 그냥 내부 content에 따라 결정

2. Block

-   다른 요소들과 가로축을 공유하지 않는 요소들
-   ex) heading 요소들, div, p 등등
-   inline보다 더 '공간'으로서 의의를 갖는 경우
-   box의 크기를 설정하고 조절할 수 있다.

3. Inline-Block

-   위 2가지 요소를 결합한 방식
-   자체적인 공간을 가지면서 그 크기를 조절도 가능
-   뷰포트와 box의 크기가 허용하는 선에서 inline처럼 가로축에 존재 가능

+ Float

- 정렬을 위해 사용하는 속성
- block element에서만 사용이 가능
- float 처리된 element를 기준으로 다른 컨텐츠들이 흐르듯이 배치된다.
- float : left, right 등으로 사용

+ Clear

- float을 설정 후 그 설정을 해제할 때 사용하는 속성
- clear : left, right, both 등으로 사용

---

css를 공부하면서 느끼지만, 너무 디테일하게 많은 것을 암기하고 알려기보단 큼직큼직한 개념을 이해할 수 있게 하자.
그리고 MDN을 항상 보고 배우면서 진행하는 게 가장 빠르게 손과 눈에 익힐 수 있는 방법같다.