CSS: 계단식(Cascade) 및 상속(Inheritance)

 

0. 왜 중요할까?

CSS 는 Cascading Style Sheets 의 약자이며, CSS 라는 단어를 이해하는 데 있어 첫 번째 단어 cascading 은 매우 중요합니다. CSS는 여러 규칙이 동시에 하나의 요소에 적용될 수 있습니다. 이때 "어떤 규칙이 실제로 적용될지"를 결정하는 것이 바로 계단식 + 우선 순위 + 상속 + 중요도 (!important)입니다. 이 시스템이 없다면 CSS는 매우 혼란스러울 수밖에 없습니다.
즉, CSS 충돌을 해결하는 핵심 규칙 세트입니다.

 

---

1. 계단식(Cascade)

핵심 개념

• 같은 요소에 여러 규칙이 적용될 때, CSS는 우선 적용할 규칙을 결정해야 합니다.
• 이 과정을 계단식(Cascade)이라고 부릅니다.

적용 우선순위 순서 (위에서 아래로 비교)

1. 중요도 (!important)
2. 출처(origin): 사용자 → 작성자 → 브라우저 기본
3. 우선 순위(Specificity)
4. 소스 순서(Source Order): 나중에 작성된 규칙이 이김

예시

h1 {
  color: blue;
}
h1 {
  color: red;
}

➡ 결과: red (같은 specificity → 나중에 선언된 red가 적용됨)

 

---

2. 우선 순위(Specificity)

핵심 개념

선택자의 "구체성"을 점수로 환산하여, 더 구체적인 선택자가 우선 적용됩니다.

우선순위 계산 방식

선택자 종류	점수 계산 기준
인라인 스타일 (style)	1000점
ID 선택자 (#id)	100점
클래스, 속성, 의사 클래스 (.class, [type], :hover)	10점
요소, 의사 요소 (div, ::before)	1점

• #main → 100
• .box.text → 20
• ul li a → 3
• style="..." → 1000

중요 포인트

• :not()은 내부 선택자의 점수만 포함합니다.
• 결합자(>, +, ~, 공백)는 점수에 영향 없음.

예시

h1 { color: black; }           // 1점
.title h1 { color: blue; }     // 11점
#main h1 { color: red; }       // 101점

➡ 결과: red (가장 높은 점수)

 

---

3. 상속(Inheritance)

핵심 개념

부모 요소의 일부 스타일 속성은 자식에게 자동 전달(상속)됩니다.

상속되는 속성 예시

✔️ 상속됨

• color, font-family, line-height, visibility

❌ 상속 안 됨

• width, height, padding, border, display

명시적 상속 키워드

키워드	설명
inherit	부모로부터 강제 상속
initial	브라우저 기본값 사용
unset	상속 가능한 속성 → 상속, 아니면 초기화
revert	사용자 스타일 초기화, 기본 스타일로 복원
all	모든 속성에 위 속성을 한 번에 적용 가능

p {
  all: unset;
}

→ p 요소의 대부분의 속성을 초기화함

 

---

4. !important의 역할

• !important가 선언된 속성은 모든 계단식 규칙을 무시하고 우선 적용됩니다.
• 단, !important끼리 충돌하면 우선순위(Specificity) 높은 쪽이 이깁니다.
• 계단식이 정상적으로 작동하는 방을 변경하므로, 반드시 필요한 경우가 아니라면 절대 사용하지 않는 것이 좋습니다.

p {
  color: blue !important;
}
#myText {
  color: red;
}

➡ 결과: blue (!important가 우선)

 

---

5. CSS 적용 우선순위 전체 흐름 정리

한 요소에 여러 규칙이 적용될 경우, 다음 순서로 판단합니다:

1. 중요도(!important)
2. 출처(origin)
   • 브라우저 기본 < 사용자 정의 < 개발자 정의 < !important 선언
3. 선택자의 우선순위(Specificity)
4. 소스 코드 내 순서 (나중에 선언된 것 우선)

 

---

6. 실전 디버깅 팁

• 개발자 도구(F12) → Elements 탭에서 어떤 CSS가 적용되었고, 어떤 것이 무시되었는지 확인 가능
• 취소선이 그어진 규칙은 덮어쓰인 스타일입니다.
• 우측에서 computed 탭 확인 시 실제 최종 적용값 확인 가능

 

---

요약

항목	의미	판단 기준
계단식	여러 규칙이 충돌 시 적용 우선 결정	중요도 > 출처 > 구체성 > 소스순
우선순위	선택자가 얼마나 구체적인가	ID > Class > Tag
상속	부모로부터 값 물려받기	일부 텍스트 속성만 기본 상속
!important	계단식 무시하고 강제 적용	꼭 필요한 경우에만 사용

 

이 구조를 이해하면 CSS가 "왜 작동하지 않지?"라는 의문에 정확히 답을 찾을 수 있습니다.

출처

계단식 및 상속 - Web 개발 학습하기 | MDN