CSS 캐스케이딩 - 스타일 우선 적용 순서

CSS는 "Cascading Style Sheets"의 약자로, 스타일 시트에서 "Cascading"은 여러 스타일 규칙이 어떤 순서로 적용되는지를 결정하는 규칙을 의미한다.

 

즉, 여러 CSS 선택자들이 어느 것이 최우선으로 적용될지를 결정한다.

 

간단하게 예를 들어, 동일한 HTML 요소에 class 선택자로 빨간색을 지정하고, id 선택자로 파란색을 지정했다면, id 선택자가 더 높은 우선순위를 갖기 때문에 해당 요소는 파란색으로 표시된다.

캐스케이딩 우선순위

1. 중요도(Importance)

CSS 규칙의 우선순위를 결정하는 첫 번째 요소는 '중요도'이다. 이는 다음 순서로 적용된다:

1. 인라인 스타일: HTML 요소 내에 직접 작성된 스타일이며, 가장 높은 우선순위를 가진다.
2. 내부 스타일 시트: <style> 태그 내에 작성된 스타일로, 인라인 스타일 다음으로 우선순위가 높다.
3. 외부 스타일 시트: 외부 CSS 파일에서 불러온 스타일로, 내부 스타일 시트보다 낮은 우선순위를 가진다.
4. 브라우저 기본 스타일: 브라우저가 기본적으로 제공하는 스타일로, 모든 사용자 정의 스타일보다 낮은 우선순위를 가진다.

2. 구체성(Specificity)

구체성은 선택자가 얼마나 구체적으로 요소를 지정하는지에 따라 우선순위가 결정된다. 구체성은 다음과 같이 계산된다.

1. ID 선택자: 요소의 ID를 통해 스타일을 지정할 때 가장 높은 우선순위를 갖는다.
2. 클래스 선택자와 가상 클래스: 클래스 또는 가상 클래스(예: :hover)를 사용한 스타일이 ID 선택자 다음으로 우선순위가 높다.
3. 태그 선택자: 태그 이름(예: div, p)을 사용하는 스타일은 클래스 선택자보다 낮은 우선순위를 갖는다.
4. 전체 선택자(*): 모든 요소에 적용되며, 가장 낮은 우선순위를 가진다.
5. 상속받은 속성: 부모 요소로부터 상속받은 속성은 상대적으로 낮은 우선순위를 가진다.

3. 선언 순서(Source Order)

스타일 시트 내에서 스타일이 선언된 순서도 우선순위에 영향을 미친다. 같은 중요도와 구체성을 가진 스타일 규칙이라면, 문서 내에서 나중에 선언된 스타일이 적용된다. 예를 들어, 다음과 같은 경우:

.title {
  color: red;
}
.title {
  color: green;
}
.title {
  color: blue; /* 이 스타일이 적용됨 */
}​

4. !important 규칙

!important는 모든 우선순위 규칙을 무시하고 해당 스타일을 강제로 적용한다. 매우 유용할 수 있지만, 남용은 유지보수를 어렵게 만들 수 있으므로 신중히 사용해야 한다.

* {
  color: red !important; /* 모든 요소에 강제 적용 */
}

CSS의 캐스케이딩 원리를 이해하고 올바르게 활용하면, 웹 페이지의 스타일링을 보다 효과적으로 관리할 수 있다. 스타일 규칙이 예상대로 적용되지 않는다면, 이 원리들을 다시 한번 점검해 보는 것이 좋을 것 같다.

출처:https://specifishity.com/