Cascading은 CSS의 핵심 원칙 중 하나로, 여러 스타일 규칙이 한 요소에 적용될 수 있을 때 우선순위에 따라 어떤 스타일이 최종 적용될지 결정하는 과정입니다.
여러 CSS 규칙이 충돌할 때, 아래 순서로 우선순위를 정해서 스타일을 적용합니다:
| 우선순위 기준 | 설명 | 예시 |
|---|---|---|
| 1. 중요도 (Importance) | !important가 붙은 속성 |
color: red !important; |
| 2. 명시도 (Specificity) | 선택자의 구체성 | #id > .class > tag 순 |
| 3. 소스 순서 (Source Order) | 나중에 선언된 스타일이 우선 | 동일한 선택자라면 마지막 것이 적용됨 |
CSS에서 Cascading이란 여러 스타일 규칙이 함께 적용될 때 최종적으로 어떤 스타일이 우선 적용되는지를 결정하는 원칙을 말합니다. 직역하면 '폭포수처럼 흐른다'는 의미인데, 말 그대로 여러 규칙이 위에서 아래로 흐르면서 최종 결과가 정해지는 구조입니다. 같은 요소에 여러 스타일이 선언될 때 충돌을 해결하는 기준 역할을 합니다.
Cascading에서 어떤 스타일이 우선 적용될지는 세 가지 요소를 기준으로 결정됩니다.
- *첫 번째는 특수성(Specificity)**입니다. 선택자가 얼마나 구체적인지를 따져서 우선순위를 매깁니다. 보통 태그 선택자보다는 클래스가, 클래스보다는 ID 선택자가 더 우선합니다. 예를 들어
#title이.title보다,.title이h1보다 우선적으로 적용됩니다.- *두 번째는 중요도(Importance)**입니다. 만약
!important가 선언된 스타일이 있다면, 특수성이나 소스 순서와 상관없이 가장 높은 우선순위를 갖습니다. 예를 들어, 어떤 스타일이 특정 ID 선택자에서 정의됐더라도, 다른 곳에서!important가 붙었다면 그 스타일이 무조건 우선 적용됩니다.- *세 번째는 소스 순서(Source Order)**입니다. 만약 같은 수준의 특수성과 중요도를 가진 규칙이 여러 개 있다면, CSS에서 더 나중에 선언된 규칙이 우선 적용됩니다. 이는 브라우저가 CSS 코드를 위에서 아래로 해석하기 때문입니다.
정리하면, CSS에서는 먼저
!important여부를 따지고, 그다음 특수성을 비교하고, 마지막으로 순서를 기준으로 최종 스타일이 결정됩니다. 이런 흐름 덕분에 여러 스타일이 섞여 있어도 원하는 디자인 결과를 낼 수 있습니다.