비전공자를 위한 HTML/CSS-캐스케이딩

앞서 배운 구체성은 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가 적용됩니다.

 

---

 

참고자료

 

 

 

Cascade and inheritance

https://developer.mozilla.org

In this article we will define what the CSS cascade is, what specificity is, what importance is, and how properties inherit from different rules.

 

Introducing the CSS Cascade

https://developer.mozilla.org

This article explains what the cascade is, the order in which CSS declarations cascade, and how this affects you, the web developer.