TIL] css포지션(position)

css 포지션

css포지션 속성은 HTML에서 element를 배치하는 방법을 지정하는 속성이다.

position속성에 쓸 수 있는 것은 총 5개가 있다.

5개를 차례대로 살펴보자.

---

static

static은 HTML에서 일반적인 흐름을 따라 배치가 된다.

element에서 포지션을 지정하지 않는다면 기본값으로 static이 적용된다.

*static에서는 top, right, bottom, left, z-index 속성들이 아무련 효과를 주지 못한다.

---

relative

relative는 static과 마찬가지로 HTML에서 일반적인 흐름을 따라 배치된다.

static과의 차이점은 static에서는 적용되지 않는

top, right, bottom, left, z-index속성들이 적용된다는 것이다.

---

absolute

absolute는 HTML에서 일반적인 흐름을 따르지 않는다.

대신 가장 가까운 위치에 있는 조상 element에 대해 상대적 위치로 배치된다.

조상 element가 없다면 문서 본문 body를 기준으로 삼고 페이지 스크롤에 따라 움직인다.

---

fixed

fixed는 HTML에서 absolute와 마찬가지로 일반적인 흐름을 따르지 않는다.

대신 스크린의 뷰포트(웹페이지가 사용자에게 보이는 영역)를 기준으로 한 위치에 배치된다.

absolute와 차이점은 스크롤이 되어도 움직이지 않고 고정된다는 차이가 있다.

---

sticky

sticky는 HTML에서 일반적인 흐름에 따라 배치되고

relative처럼 동작하다가 스크롤이 특정 지점에 도달하면 요소를 고정시킬 수 있다.

스크롤을 내리다가 지정한  오프셋에 도달했을 때 위치가 고정되는 것이다.

fixed와 헷갈릴 수 있는데 fixed와의 차이점은

fixed는 보이는 화면을 기준으로 정한 오프셋에 계속 고정이 되는 방식이고

sticky는 스크롤을 내리다가 지정한 오프셋에 위치하고나서부터 계속 그 위치에 고정된다.

---

css는 정말 양이 방대한 것 같다.

두 번째 토이 프로젝트를 하면서 포지션을 사용하게 되었는데

정말 비슷하면서 각자의 차이점이 확실하기 때문에

올바르게 사용한다면 정말 유용하게 쓰이는 것 같다.

강의를 들으면서 배우는 건 정해진 루트에 정해진 답이 있고

해답지가 있는 객관식 느낌이지만

토이 프로젝트는 내가 토이 프로젝트를 하면서 필요한 요소들이 있다면

구글링을 하면서 찾아야 하는 논술형 문제를 푸는 느낌이다.

그래도 토이 프로젝트를 하면서 내가 원하는 요소들이 올바르게 작동할 때

너무 큰 성취감을 느끼기 때문에 토이 프로젝트는 나에게 너무 재미있다.

두 번째 토이 프로젝트 완성도를 높이기 위해 열심히 분발해야겠다!

파이팅🤩🤩👍