[CSS] Position 속성 한 방 정리! 🔥

웹 페이지 레이아웃, 어떻게 배치할까? 🤔

HTML 구조를 짜놓고, CSS로 스타일을 입혔는데…!
"이 요소를 왼쪽으로 좀 옮기고 싶은데?", "이거 화면 스크롤해도 고정돼야 하는데?"

이런 고민 다들 해보셨죠?

 

그럴 때 필요한 게 바로 CSS의 position 속성!
이걸 알면 요소 배치를 완벽하게 컨트롤할 수 있습니다!

 

오늘은 CSS3 position 속성을 완벽 정리하고,
예제 코드까지 첨부해드릴 테니 끝까지 봐주세요! 🚀

---

1. position 속성, 뭐 하는 놈인가? 🤔

position 속성은 HTML 요소의 위치를 결정하는 중요한 속성입니다!
기본적으로 모든 요소는 흐름대로 쌓이지만, position을 사용하면 원하는 곳에 자유롭게 배치 가능해요.

position의 주요 속성값:

1. static (기본값)
2. relative (상대 위치)
3. absolute (절대 위치)
4. fixed (고정 위치)
5. sticky (스크롤 따라다님)

각 속성이 어떻게 동작하는지, 예제와 함께 하나씩 알아보겠습니다!

---

2. static – 기본값 (그냥 흐름대로 배치됨)

static은 모든 HTML 요소의 기본값입니다.
아무 속성도 지정하지 않으면 static이 적용돼요.
위치 값을 설정해도 효과가 없습니다!

.box {
  position: static; /* 기본값이라 명시할 필요 없음 */
  top: 50px; /* 효과 없음 */
  left: 50px; /* 효과 없음 */
}

💡 결론: position을 지정하지 않으면 자동으로 static이 적용됩니다!

---

3. relative – 원래 위치를 기준으로 이동

relative는 원래 위치를 기준으로 이동하는 속성입니다.
즉, 자기 자리(space)는 그대로 남아 있고, 보이는 것만 이동해요!

.box {
  position: relative;
  top: 20px;  /* 원래 위치에서 아래로 20px 이동 */
  left: 30px; /* 원래 위치에서 오른쪽으로 30px 이동 */
}

💡 특징: 다른 요소에 영향을 주지 않고, 본인만 이동합니다!

---

4. absolute – 부모 기준으로 자유롭게 이동! 🏃‍♂️

absolute는 부모 요소를 기준으로 자유롭게 배치하는 속성입니다.
그런데 중요한 포인트!
📌 부모 요소에 position: relative가 있어야 그 부모를 기준으로 함!
📌 없으면? body를 기준으로 위치가 잡힙니다!

.container {
  position: relative; /* 기준점 설정 */
}

.box {
  position: absolute;
  top: 10px;   /* 부모의 위쪽에서 10px */
  left: 20px;  /* 부모의 왼쪽에서 20px */
}

💡 결론: absolute는 relative 부모를 기준으로 위치가 잡힙니다!

---

5. fixed – 스크롤해도 고정되는 요소! 📌

fixed는 화면을 기준으로 고정되는 속성입니다.
스크롤을 해도 움직이지 않고, 항상 같은 위치에 남아 있어요!

.fixed-box {
  position: fixed;
  bottom: 20px;
  right: 20px;
  background: red;
  color: white;
  padding: 10px;
}

💡 실전 활용: 네비게이션 바, 퀵 메뉴, 상단 배너 등에 자주 사용됩니다!

---

6. sticky – 스크롤하다가 특정 위치에서 고정! 🔥

sticky는 스크롤하다가 특정 위치에 도달하면 고정되는 속성입니다!
(fixed와 비슷하지만, 특정 위치에서만 고정됨!)

.sticky-box {
  position: sticky;
  top: 0px; /* 스크롤이 top: 0px에 닿으면 고정됨 */
  background: yellow;
  padding: 10px;
}

💡 실전 활용: 페이지 상단에 헤더 메뉴바 만들 때 많이 씁니다!

---

자주 묻는 질문! 💡

❓ absolute와 relative 차이가 뭔가요?

👉 relative는 원래 위치를 기준으로 이동하고,
absolute는 부모 요소를 기준으로 이동합니다!
특히 absolute는 relative 부모가 없으면 body를 기준으로 잡혀요.

❓ fixed와 sticky의 차이점?

👉 fixed는 항상 고정되지만,
sticky는 스크롤하다가 특정 위치에 도달하면 고정됩니다!
(네비게이션 바 만들 때 sticky를 많이 사용해요!)

❓ position을 언제 써야 하나요?

👉 레이아웃을 세밀하게 조정할 때 사용하면 좋아요!
특히 absolute, fixed, sticky는 다양한 UI 요소에 활용됩니다.

---

position 속성, 이제 완벽하게 이해했나요? 😎

이제 position 속성을 자유자재로 활용할 수 있겠죠?
이걸 잘 쓰면 레이아웃 배치가 훨씬 쉬워지고, 원하는 디자인을 자유롭게 만들 수 있어요!

 

지금까지 정리한 내용을 활용해서, 직접 연습해보세요!
혹시 궁금한 점이 있다면 댓글로 남겨주세요. 같이 해결해봅시다! 🚀