[CSS 이해하기] 캐스케이딩(cascading)

cascading은 스타일 규칙들이 어떤 기준으로 요소에 적용되는지를 정한 규칙이다.

cascading은 폭포가 내려오는 모양처럼 단계적인이라는 의미를 가지며, 모든 스타일 규칙들은 cascading의 단계적인 규칙에 따라 요소에 적용된다.

 

앞서 배운 구체성은 cascading 규칙 중 하나이다.

만약 구체성이 같은 두 규칙이 동일한 요소에 적용되면 어떻게 될까?

h1 { color: red; }
h1 { color: blue; }

 이 경우 구체성이 0, 0, 0, 1로 서로 같은 두 규칙이 동일한 요소에 적용되었다.

결과적으로 h1에는 color: blue가 적용되며 이는 cascading 규칙에 의한 결과이다.

 

cascading에는 다음과 같이 3가지 규칙이 있다.

1. 중요도(!important)와 출처
2. 구체성
3. 선언 순서

위에서 출처는 CSS 출처를 의미한다.

CSS 출처는 제작자와 사용자, 사용자 에이전트(User Agent)로 구분한다.

제작자의 경우 사이트를 실제 제작하는 개발자가 작성한 CSS를 의미한다.

사용자의 경우 웹 페이지를 방문하는 일반 사용자들이 작성한 CSS를 의미한다.

마지막으로 사용자 에이전트는 일반 사용자의 환경, 즉 브라우저에 내장된 CSS를 의미한다.

 

우선순위를 매겨보자면

5. 사용자 에이전트 스타일

4. 사용자 스타일

3. 제작자 스타일

2. 제작자 !important 스타일

1. 사용자 !important 스타일

숫자가 작아질 수록 높은 우선순위로 매겨진다.

요즘은 사용자 스타일은 사용하지 않는 추세라 4순위와 1순위는 무시해도 좋다.

 

구체성의 경우는 이전 포스트에서 다뤘기 때문에 넘어가도록 한다.

 

선언 순서의 경우는 간단하다.

나중에 선언된 규칙이 더 우선하게 된다.

h1 { color: red; }
h1 { color: silver; }

위 코드의 경우 h1에는 color: silver가 적용된다.

---

부스트코스의 강의 내용을 정리한 포스트입니다.

https://www.boostcourse.org/cs120

비전공자를 위한 HTML/CSS