CSS_캐스케이딩 (Cascading)

캐스케이딩이란?

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

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

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

 

캐스케이딩 규칙

1. 중요도(!important)와 출처

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

출처는 제작자(실제 제작 과정에서 개발자가 작성한 CSS), 사용자(웹페이지를 방문한 일반 사용자가 작성한 CSS), 사용자 에이전트(User Agent-일반사용자의 환경, 즉 브라우저에 내장된 CSS를 의미)로 구분한다.

 

우선순위

1. 사용자 !important 스타일

2. 제작자 !important 스타일

3. 제작자 스타일

4. 사용자 스타일

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

- 사용자 !important 스타일과 사용자 스타일은 흔히 사용되는 스타일은 아닙니다.

 

2. 구체성

선택자를 얼마나 명시적으로 선언했느냐를 수치화하여 계산합니다.

• 0, 1, 0, 0 : 선택자에 있는 모든 id 속성값
• 0, 0, 1, 0 : 선택자에 있는 모든 class 속성값, 기타 속성, 가상 클래스
• 0, 0, 0, 1 : 선택자에 있는 모든 요소, 가상 요소
• 전체 선택자는 0, 0, 0, 0을 가진다.
• 조합자는 구체성에 영향을 주지 않는다. (>, + 등)

 

3. 선언 순서

뒤에 선언된 스타일 규칙을 우선시 합니다.

---

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

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

 

스타일 규칙들을 모아서 중요도가 명시적으로 선언되었는지에 따라 분류합니다

1. 중요도가 명시적으로 선언된 규칙들은 그렇지 않은 규칙들보다 우선합니다

2. 중요도가 있는 규칙들끼리는 아래 다른 규칙들을 적용받습니다.

 

스타일 규칙들을 출처에 따라 분류합니다.

1. 제작자 스타일 규칙이 사용자 에이전트 스타일 규칙보다 우선합니다.

 

스타일 규칙들을 구체성에 따라 분류합니다.

1. 구체성이 높은 규칙들이 우선합니다.

 

스타일 규칙들을 선언 순서에 따라 분류합니다.

1. 뒤에 선언된 규칙일수록 우선합니다.