CSS - Cascading

coding.o·2025년 2월 9일

CSS cascading

CSS

목록 보기

2/4

Cascading(캐스케이딩) : 브라우저가 여러 스타일 규칙이 충돌할 때 어떤 스타일을 적용할지를 결정하는 방식

CSS 캐스케이딩의 핵심 요소

캐스케이딩에는 세 가지 주요 요소가 작용합니다.

원본(Origin) : 스타일이 어디에서 왔는가?
특이성(Specificity) : 선택자가 얼마나 구체적인가?
중요도(Importance) : !important가 있는가?

예제와 함께 개념 이해하기

1. 원본(Origin)

CSS는 여러 곳에서 적용될 수 있습니다.

브라우저 기본 스타일 (ex. <h1> 태그는 기본적으로 굵은 글씨)
외부 스타일 시트 (<link rel="stylesheet">)
내부 스타일 시트 (<style> 태그)
인라인 스타일 (style="color: red;")

💡 우선순위:
1. 인라인 스타일(style="")
2. 내부 스타일 시트(<style>)
3. 외부 스타일 시트(.css 파일)
4. 브라우저 기본 스타일

<!DOCTYPE html>
<html lang="ko">
<head>
  <style>
    p {
      color: blue; /* 내부 스타일 */
    }
  </style>
  <link rel="stylesheet" href="style.css"> <!-- 외부 스타일 -->
</head>
<body>
  <p style="color: red;">이 문장은 어떤 색일까요?</p> <!-- 인라인 스타일 -->
</body>
</html>

✅ 결과: style="color: red;"가 가장 우선순위가 높아 빨간색이 적용됨.

2. 특이성(Specificity)

CSS 선택자가 얼마나 구체적인지에 따라 우선순위가 달라집니다.
특이성 계산 공식 :

인라인 스타일 → 1000점
ID 선택자(#id) → 100점
클래스 선택자(.class), 속성 선택자([attr]), 가상 클래스(:hover) → 10점
태그 선택자(h1, p 등), 가상 요소(::before) → 1점

💡 예제:

p { color: blue; }         /* 1점 */
.special { color: green; } /* 10점 */
#unique { color: orange; } /* 100점 */

<p id="unique" class="special">이 문장은 어떤 색일까요?</p>

✅ 결과: #unique의 color: orange;가 적용됨. (100점 > 10점 > 1점)

3. 중요도(Important)

CSS에서 !important를 사용하면 특이성보다 더 강한 우선순위를 가집니다.

💡 예제:

p {
  color: blue !important;
}

#unique {
  color: red;
}

<p id="unique">이 문장은 어떤 색일까요?</p>

✅ 결과: color: blue !important;가 적용됨.
(!important는 특이성보다 강력함)

CSS 캐스케이딩 정리

우선순위	적용 대상
`!important`	가장 강력, 특이성과 상관없이 우선
---	---
인라인 스타일	`style=""` 직접 지정한 스타일
ID 선택자	`#id`로 지정한 스타일
클래스, 속성 선택자	`.class`, `[attribure]` 등
태그 선택자	`h1`, `p` 등
브라우저 기본 스타일	기본 적용 스타일