🎯 CSS inheritance와 cascading의 원리 – 상속과 우선순위

🎯 CSS inheritance와 cascading의 원리 – 상속과 우선순위

CSS는 스타일을 적용할 때 상속(Inheritance)과 계단식 규칙(Cascading)이라는 두 가지 중요한 원리를 따릅니다. 이 두 원리를 이해하면 왜 어떤 스타일이 적용되는지, 왜 내가 쓴 코드가 무시되는지를 명확히 알 수 있습니다.

---

1️⃣ CSS 상속(Inheritance)이란?

상속이란 부모 요소의 스타일이 자식 요소에 자동으로 전달되는 것을 말합니다. 하지만 모든 속성이 상속되는 것은 아니며, 일부 속성만 자동 상속됩니다.

✔️ 대표적으로 상속되는 속성들

• color
• font, font-size, font-family
• line-height
• visibility
• letter-spacing, word-spacing

body {
  color: #333;
  font-family: 'Noto Sans KR', sans-serif;
}

👉 위 설정은 별다른 설정이 없다면 모든 텍스트 요소에 적용됩니다.

✔️ 강제로 상속받기

상속되지 않는 속성도 inherit 키워드를 이용해 강제로 상속받을 수 있습니다.

.button {
  border: inherit;
}

---

2️⃣ Cascading(계단식 적용)이란?

여러 CSS 규칙이 하나의 요소에 적용될 때, 누가 최종적으로 적용될지를 결정하는 규칙입니다.

결정 순서 – 3단계 룰

1. 1. 중요도 (Importance)
   !important가 붙은 규칙이 최우선
2. 2. 특이성 (Specificity)
   선택자의 구체적인 정도에 따라 우선 적용
3. 3. 작성 순서 (Order)
   CSS에서 나중에 쓴 코드가 우선 적용됨

---

3️⃣ specificity(특이성) 간단 계산법

선택자	특이성 점수
인라인 스타일	1000
#id	100
.class, [attr], :pseudo-class	10
태그명, ::pseudo-element	1
* (전체 선택자), 결합자	0

예시:

• div → 1점
• .content → 10점
• #header → 100점
• div.content.active → 1 + 10 + 10 = 21점

---

4️⃣ !important의 힘과 주의점

.title {
  color: red !important;
}

모든 스타일 우선순위를 무시하고 강제 적용됩니다.

주의: !important는 유지보수에 악영향을 줄 수 있으므로 최소한으로만 사용하세요.

---

📌 요약 정리

• CSS는 상속과 계단식(Cascading) 규칙으로 스타일 우선순위를 정함
• 상속되는 속성은 주로 텍스트 관련 속성
• !important는 최우선이지만 신중히 사용
• 특이성(Specificity) 점수로 충돌 시 우선순위 결정

---

📌 다음 글 예고

다음 글: “CSS specificity(우선순위)와 !important 사용 시 주의점”에서는 특이성 점수 계산과 충돌 상황을 실제 예제 중심으로 다룹니다.