8) CSS - 캐스케이딩

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

cascading은 폭포가 내려오는 모양처럼 단계적인 이라는 의미를 지니며,

모든 스타일 규칙들은 cascading의 단계적인 규칙에 따라 요소에 적용됩니다.

 

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

위 <h1>에는 같은 구체성을 가진 두 규칙이 적용되었습니다.

그렇다면 <h1>에는 어떤 color가 적용될까요?

<h1>에는 color: blue가 적용되며 이는 cascading 규칙에 의해 적용된 결과입니다.

 

cascading 규칙 

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

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

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

CSS 출처는 제작자와 사용자, 그리고 사용자 에이전트(user agent) 경우로 구분합니다.

제작자의 경우는 사이트를 실제 제작하는 개발자가 작성한 CSS를 의미합니다. (대부분이 여기에 해당합니다.)

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

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

현재의 브라우저에서는 사용자 스타일을 지원하지 않는 추세이기 때문에 이와 관련해서는 생략하도록 하겠습니다.

 

스타일이 적용되는 방식은 생각보다 간단합니다.

모든 스타일은 아래의 규칙에 따라 단계적으로 적용됩니다.

 

1. 스타일 규칙들을 모아서 중요도가 명시적으로 선언되었는지에 따라 분류합니다.
2. 스타일 규칙들을 출처에 따라 분류합니다.
3. 스타일 규칙들을 구체성에 따라 분류합니다.
4. 스타일 규칙들을 선언 순서에 따라 분류합니다.

<p id="bright">Hello, CSS</p>

p#bright { color: silver; } 
p { color: red; }

위의 경우에는 구체성에 따라 color: silver가 적용됩니다.

p { color: silver; }
p { color: red; }

위의 경우에는 선언 순서에 따라 color: red가 적용됩니다.