CSS) Cascading 이란?

Cascading에 대해 알아보기 전에, CSS 가 무엇의 약자인지부터 살펴보자.

CSS의 full name

CSS 는 Cascading Style Sheet 의 약자이다.

Style은 말 그대로 스타일, Sheet는 한 페이지를 뜻하니까

Style Sheet는 여러 스타일이 한 페이지에 모여 있는 형태라고 이해가 되는데… Cascading??

Cascading의 사전적 의미

Cascade 는 폭포라는 뜻의 단어이다.

즉, Cascading은 폭포처럼 위에서 아래로 내려가는 뜻으로 해석할 수 있다.

이게 무슨 뜻이냐면..

아래 코드를 한번 보자.

<div style="color: black">
    <h1 style="color: red;">What is Cascading?</h1>
</div>

Quiz. 여기서 What is Cascading? 은 무슨 색일까??

현재 What is Cascading? 은 h1 태그 안에 속해있으면서, div 태그 안에도 속해있다.

h1 은 빨간색으로, div 는 검정색으로 설정되어있는데, What is Cascading?는 두 태그에 모두 속해 있어서, 어떤 태그의 스타일을 따라야 할지 참 모호하다.

따라서, CSS는 우선순위에 따라 스타일이 적용되도록 규칙을 세웠고, 그게 곧 Cascading 방식이다.

즉, Cascading이란 몇 가지 원칙에 따라 스타일이 적용되는 방식을 의미하며, 원칙은 다음과 같다.

• 스타일 우선순위
• 스타일 상속

스타일 우선순위

여러 스타일이 동일한 요소에 적용될 때, 어떤 스타일이 최종적으로 적용될지 결정하는 기준이다!

아래 3가지 요소를 통해 우선순위가 정해진다.

1️⃣ 명시도 (Specificity)

2️⃣ 코드 순서 (Source Order)

3️⃣ 중요도 (!important)

---

명시도 (Specificity)

각 스타일 규칙이 얼마나 구체적인지를 기준으로 우선순위를 계산한다.

즉, 더 구체적인 선택자가 더 높은 우선순위를 가진다.

구체적인 선택자를 순서대로 나타내면 아래와 같다.

인라인 스타일 > id 선택자 > 클래스, 속성, 가상 클래스 > 요소 선택자, 가상 요소 > 전체 선택자

앞에 있는 선택자일수록 명시도가 높다.

쉽게 비교하려면 각 스타일에 점수를 설정해, 더 높은 점수를 가진 스타일을 우선으로 적용하면 된다!

선택자 유형	점수 계산법
인라인 스타일 (style="")	1000점
ID 선택자 (#id)	100점
클래스, 속성, 가상 클래스 (.class, [type="text"], :hover)	10점
요소 선택자 (div, h1, p), 가상 요소 (::before, ::after)	1점
전체 선택자 (*), 상속된 스타일	0점

코드 순서 (Source Order)

코드 순서 란 코드에서 가장 마지막에 등장한 속성을 최우선으로 적용한다는 것이다.

아래 예제를 보자.

<p>
    What is Cascading?
</p>

p {
  color: blue;
}

p {
  color: red;
}

p 태그에 대해 color: blue; 와 color: red; 가 선언되었지만,

color: red;가 나중에 선언되었기 때문에 최종적으로는 What is Cascading? 은 빨간색이 된다.

중요도 (!important)

!important 가 붙은 스타일은 우선순위를 무시하고 강제로 적용된다.

하지만, !important 끼리 충돌하면 Specificity(명시도)가 높은 쪽이 적용된다.

<p>
    What is Cascading?
</p>

p {
  color: blue !important;
}

p {
  color: red;
}

p 태그에 대해 color: blue; 와 color: red; 가 선언되었다.

color: red;가 나중에 선언되었지만, color: blue; 에 !important 가 붙었다!

따라서 최종적으로 What is Cascading? 은 파란색이 된다.

스타일 우선순위에 따른 예제

몇 가지 예제를 통해 앞서 배운 스타일 우선순위를 고려하여, 적용될 스타일을 생각해보자.

( html 은 따로 작성하지 않겠음. )

🔹 예제

h1 { color: red; }  /* 1점 */
.title { color: blue; }  /* 10점 */
#main-title { color: green; }  /* 100점 */

✅ #main-title (100점)이 가장 높은 우선순위를 가지므로 color: green; 적용됨.

---

🔹 예제 2

h1 { color: red; }  /* 1점 */
h1.title { color: blue; }  /* (1 + 10) = 11점 */
#main-title { color: green; }  /* 100점 */

✅ #main-title이 가장 높은 점수(100점)를 가지므로 color: green; 적용됨.

---

---

🔹 예제 3

div button { background-color: gray; }  /* (1 + 1) = 2점 */
div .button { background-color: blue; }  /* (1 + 10) = 11점 */
div #submit-button { background-color: green; }  /* (1 + 100) = 101점 */

✅ div #submit-button이 가장 높은 점수(101점)를 가지므로 background-color: green; 적용됨.

---

🔹 예제 4

#nav .menu { color: red; }  /* (100 + 10) = 110점 */
#sidebar .menu { color: blue; }  /* (100 + 10) = 110점 */

명시도가 같다!!! 이럴 땐 코드 순서 (Source order)에 따라 나중에 선언된 스타일이 적용된다.

즉, #sidebar .menu가 더 아래에 선언되었으므로 color: blue; 적용됨.

---

🔹 예제 6

p { color: red !important; }  /* 1점 + 중요도 */
p.text { color: blue; }  /* 10점 */

color: red의 명시도는 낮지만, 뒤에 !important 가 붙었다.

이런 경우 color: red;가 !important 때문에 강제 적용된다.

(명시도가 낮아도 !important가 붙으면 무조건 우선 적용)

---

스타일 상속

스타일 상속은 태그들이 어떻게 포함되었는지에 따라서 스타일을 적용할 지 결정하는 원칙이다.

바깥쪽의 태그를 부모 요소, 내부의 태그를 자식 요소라고 하는데,

상속 요소는 부모 요소의 스타일을 자식 요소가 따라가는 것을 의미한다.

아래 예시 코드를 보자

<div style="color: red">
    <h1>What is Cascading?</h1>
</div>

이 코드에서는 <div> 가 부모 요소 이며, <h1> 가 자식 요소 이다.

부모 요소의 스타일을 자식 요소가 따라간다고 했으므로, What is Cascading? **에는 **부모 요소의 영향으로 color: red;가 적용될 것이다.

---

정리

이렇게 CSS에서는 우선순위와 상속을 통해 어떤 스타일이 적용될 지 결정된다.

앞으로 CSS를 다루다가 원하는 속성이 적용이 안된다면, Cascading 규칙이 지켜졌는지 확인하면 되겠다.