HTML/CSS - CSS 선택자

1️⃣ 배운 내용 정리

CSS 선택자 종류 및 우선순위

• !important → 모든 스타일 중 최우선 적용(그냥 우선순위 최강)
• 인라인 스타일 (style="") → 우선순위 1000
• ID 선택자 (#id) → 우선순위 100
• 클래스, 속성 선택자 (.class, [type="text"]) → 우선순위 10
• 태그, 가상 요소 선택자 (div, p, ::before) → 우선순위 1
• 전체 선택자 (*), 상속된 스타일 (inherit) → 우선순위 0

📌 우선순위 정리
!important > 인라인 스타일(1000) > ID(100) > 클래스/속성 선택자(10) > 태그(1) > 전체 선택자(0)

CSS 상속 (Inheritance)

• 부모 요소의 스타일이 자식 요소에게 전달됨
• 상속되는 속성 → color, font, visibility, line-height 등
• 상속되지 않는 속성 → width, height, margin, padding, border, display 등

📌 상속 강제 적용

p { color: inherit; } 부모의 color를 상속

CSS 겹침(Cascade) 및 충돌 해결

• 동일한 요소에 여러 스타일이 적용될 경우
  → 나중에 선언된 스타일이 적용됨
  

📌 예제

h1 { color: blue; }
h1 { color: red; } 마지막 스타일이 적용됨 → 빨강

CSS font 관련 속성 정리

✔ px (픽셀) → 고정된 크기, 유동적인 반응형에는 적합하지 않음
✔ rem 루트 요소(:root) 기준으로 크기 조절
✔ em → 부모 요소 기준으로 크기 조절
✔ % → 부모 요소 대비 비율 적용
✔ vw, vh → 화면 크기(Viewport) 기준 적용