css cascading 캐스케이딩

 

cascading 캐스케이딩 이란?

 

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

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

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

 

 

구체성은 cascading 규칙 중 하나!!

 

 

 

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

 

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

 

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

 

 

---

cascading 규칙 

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

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

 

!important로 선언된 모든 규칙은 그렇지 않은 규칙보다 우선한다.

출처는 CSS 출처를 의미하며, 제작자와 사용자, 그리고 사용자 에이전트(user agent) 경우로 구분한다.

 

 

우선순위

 

1. 사용자 !important 스타일 

2. 제작자 !important 스타일  

3. 제작자 스타일 / 사이트를 실제 제작하는 개발자가 작성한 CSS를 의미한다. (대부분이 여기에 해당)

4.  사용자 스타일 / 일반 유저가 직접 css 만들어서 본인 브라우저에 설정해놓은 것.

5. 사용자 에이전트 스타일 / 브라우저에서 기본적으로 제공하는 스타일

 

 

 

---

구체성

 

css

p#bright { color: silver; } /*0,1,0,1*/
p { color: red; } /*0,0,0,1*/

html

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

⬆️ silver로 표현된다. 

 

 

---

선언순서

 

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

⬆️선언 순서에 따라 color: red가 적용된다.