🎯 [CSS Position & Pseudo-class / Pseudo-element 정리]

---

🧱 [ 웹페이지 구역 구분 ]

구역	설명
🏷️ header	페이지 상단 구역 (로고, 메뉴 등)
📦 container	본문 콘텐츠 영역
⚓ footer	하단 구역 (회사 정보, 저작권 등)

---

📍 [ position 속성 정리 ]

속성	설명	주요 특징
static	기본값, 코드 순서대로 배치	위치 속성(top, left 등) 적용 불가
relative	원래 위치 기준으로 이동	absolute의 기준점 역할
absolute	부모의 위치 기준으로 절대 배치	부모가 없으면 body 기준
fixed	화면(Viewport)에 고정	스크롤에도 위치 고정 (ex. 광고 배너)
sticky	스크롤 시 특정 지점에 고정	주로 상단 메뉴바에 사용

---

🔎 예시 설명

.box {
    position: relative;
    top: 50px;
    left: 50px;
}

✅ 기존 위치에서 아래로 50px, 오른쪽으로 50px 이동

---

📌 position 시각적 예시

속성	예시 이미지
fixed
sticky

---

💬 [ 팝업 CSS ]

• position: fixed; 를 이용해 화면에 고정된 팝업 구현 가능
• 다른 요소와 겹칠 경우, z-index를 사용하여 우선순위 조정
• z-index 값이 클수록 앞으로 표시됨

.popup {
    position: fixed;
    z-index: 999;
}

---

🧭 [ 헤더 메뉴 CSS ]

• position: sticky;를 사용하면 스크롤 시 상단 고정 가능
• 단, 헤더를 감싸는 div에 sticky 적용 시 동작 안될 수 있음
  → header 요소를 body에 바로 배치하는 것이 안정적

header {
    position: sticky;
    top: 0;
    background-color: white;
}

---

✨ [ 가상 클래스 (Pseudo-class) ]

요소의 상태 변화에 따라 CSS를 적용하는 기능

가상 클래스	설명	예시
:hover	마우스를 올렸을 때	버튼, 링크 효과 등
:visited	방문한 링크에 적용	링크 색상 변경
:active	클릭 중인 상태	클릭 시 버튼 색 변경

button:hover {
    background-color: gold;
}
a:visited {
    color: purple;
}

---

🧩 [ 가상 요소 (Pseudo-element) ]

요소 내부의 특정 부분에 가상의 콘텐츠를 추가할 때 사용

가상 요소	설명	활용 예시
::before	요소의 앞에 가상 공간 추가	장식용 이모지, 아이콘 등
::after	요소의 뒤에 가상 공간 추가	구분선, 장식선 등

h2::before {
    content: "✨ ";
}
h2::after {
    content: " ✨";
}

💡 Tip: 여러 개의 경계선이나 아이콘을 추가할 때 매우 유용하다.
👉 이모지 사이트 바로가기

---