우선순위(Precedence)와 상속(Inheritance)

 

💡 

CCS (Cascading Style Sheets)

Cascading의 의미 '폭포수처럼 위에서 아래로 흐른다.'

즉, 하나의 HTML 요소에 여러 CSS 규칙이 적용될 때, 어떤 스타일이 최종적으로 적용될지 결정하는 규칙.

 

---

 

 

🟢 우선순위 (Precedence)

여러 CSS 규칙이 같은 요소에 적용될 때 어떤 스타일이 우선 적용되는지를 결정하는 기준.

선택자의 구체성에 의해 결정되며, 선택자가 특정 요소를 더 구체적으로 지정할수록 우선적으로 적용된다.

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

 

🔎   중요도(Importance): !important가 적용된 스타일이 가장 우선적으로 적용된다.

🔎  우선순위(Specificity): 선택자가 얼마나 구체적인지에 따라 우선순위가 결정된다.

🔎  소스 순서(Source Order): 같은 우선순위라면 나중에 작성된 CSS 코드가 적용된다.

 

 

🟢 상속 (Inheritance)

부모 요소에 적용된 CSS 스타일이 자식 요소에게 자동으로 전달되는 특성.

즉, 부모 요소의 스타일을 자식 요소가 물려받아 적용되는 것이다.

• 상속이 되는 대표 속성: color, font-family, font-size, font-weight, line-height, text-align 등

 

 

📋 키워드별 핵심 요약표 📋

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

 

---

 

⚙️ 실 전 예제 코드 ⚙️

<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>