CSS Precedence and Inheritance

CSS의 이름(Cascading Style Sheets) 그 자체이자 가장 중요한 작동 원리인 **캐스케이딩(Cascading), 우선순위(Precedence), 상속(Inheritance)**에 대해 정리해 드리겠습니다.

---

1. Cascading (캐스케이딩)

캐스케이딩은 '폭포수처럼 위에서 아래로 흐른다'는 뜻입니다.

하나의 요소에 여러 CSS 규칙이 적용될 때, 충돌을 해결하고 최종적으로 어떤 스타일을 적용할지 결정하는 원칙입니다.

결정 방식은 크게 세 가지 기준을 따릅니다.

• 중요도(Importance): !important가 있는지 확인합니다.
• 우선순위(Specificity): 어떤 선택자가 더 구체적인지 계산합니다.
• 소스 순서(Source Order): 나중에 작성된 코드가 이전 코드를 덮어씁니다.

---

2. CSS Precedence (우선순위/명시도)

우선순위는 선택자의 **'구체성'**에 따라 결정됩니다.

더 특정 요소를 콕 집어 가리킬수록 점수가 높아지며, 높은 점수의 스타일이 적용됩니다.

우선순위 점수 계산표

우선순위	선택자 종류	설명	점수
1순위	!important	무조건 최우선 적용 (사용 자제 권장)	-
2순위	Inline Style	HTML 태그 내에 style="..."로 직접 작성	1000점
3순위	ID 선택자	#header, #main 등	100점
4순위	Class/가상 선택자	.container, :hover 등	10점
5순위	Element 선택자	div, h1, p 등 태그 이름	1점
6순위	전체 선택자	*	0점

꿀팁: 같은 점수라면 나중에 작성된 스타일이 이깁니다.

---

3. CSS Inheritance (상속)

상속은 부모 요소에 적용된 스타일 속성들이 자식 요소에게 자동으로 전달되는 현상을 말합니다.

상속되는 속성 vs 안 되는 속성

• 상속되는 속성 (텍스트 관련): color, font-family, font-size, font-weight, line-height, text-align 등.
• 상속되지 않는 속성 (레이아웃 관련): width, height, margin, padding, border, display, position 등.

---

🖥️ 실전 예제 코드

HTML

 

<style>
  /* 1. 상속: 부모인 div에 color를 주면 내부 p와 span도 파란색이 됨 */
  .parent {
    color: blue;
    border: 2px solid black; /* border는 상속되지 않음 */
  }

  /* 2. 우선순위 충돌: class(10점) vs tag(1점) */
  p { color: red; } /* 1점 */
  .text-blue { color: blue; } /* 10점 -> 파란색 적용 */

  /* 3. 소스 순서: 같은 점수(10점)라면 아래에 있는 것이 이김 */
  .box { background-color: yellow; }
  .box { background-color: orange; } /* 최종: 오렌지색 */
</style>

<div class="parent">
  부모 영역 (파란 글자, 검정 테두리)
  <p class="text-blue">나는 무슨 색일까요? (파란색)</p>
  <span>나도 상속받아 파란색!</span>
</div>
<div class="box">나중에 쓴 색이 이깁니다.</div>

---

📋 핵심 요약표

개념	핵심 내용
Cascading	스타일 적용의 우선순위를 정하는 전체적인 시스템
Precedence	선택자의 종류에 따라 부여되는 점수 (ID > Class > Tag)
Inheritance	부모의 스타일(주로 텍스트)이 자식에게 대물림되는 특성

---

학습 정리

• 스타일이 의도대로 나오지 않는다면 **개발자 도구(F12)**의 'Computed' 탭을 확인해 어떤 규칙에 의해 덮어씌워졌는지 확인해 보세요.
• **!important**는 우선순위 시스템을 무너뜨리므로, 정말 필요한 경우가 아니면 사용을 피하는 것이 유지보수에 좋습니다.

---

CSS의 가장 근본적인 규칙들을 정복하셨습니다!

---