CSS Cascading 소개
CSS는 Cascading Style Sheets의 약자로 Cascading은 폭포같은, 계단식의, 계속되는 이라는 뜻을 가지고 있는데 즉, CSS는 우선 순위가 있는 스타일을 명시한 문서이고 여러 CSS 규칙이 적용될 때 순서에 따라서 합쳐서 적용한다.
즉, CSS 규칙 및 선언이 어떻게 적용되는지에 따라 우선 순위를 정의하는 프로세스이다.
Cascading 순서
Cascading은 아래 3가지 요소에 의해 결정된다.
- 중요도
- 명시도
- 코드 순서
1. 중요도
기본적으로 사용자가 지정한 스타일이 우선순위가 제일 높고 웹 페이지의 저자가 정의한 스타일과 브라우저 자체에서 정의한 스타일이 우선순위가 낮다.
중요도에 따른 우선순위는 다음과 같다.
사용자 CSS > 저자 CSS > 브라우저 CSS
- !important로 선언된 스타일 규칙은 다른 어떠한 규칙보다 우선순위가 가장 높다. 사용법은 속성뒤에 !important를 붙여주면 된다.
2. 명시도
명시도란 선택자에 따라 우선순위가 달라지는 것이다. 쉽게 말해 구체적일수록 높은 우선순위를 가지며 스타일 규칙이 어떤 요소에 적용되는지 결정한다. 명시도에 따른 우선순위는 다음과 같다.
1. 인라인 선택자 : HTML 요소의 style 속성을 통해 정의되며 특정 요소에 직접적으로 스타일을 지정하여 우선순위가 가장 높다.
2. 아이디 선택자 : HTML 요소의 id 속성을 사용하여 정의된다.
3. 클래스 선택자 : HTML 요소의 class 속성을 사용하여 정의된다.
4. 태그 선택자 : HTML 요소의 태그(h1태그, div태그, p태그 등)을 기반으로 정의된다.
인라인 > #아이디 > .클래스 > 태그
3. 코드 순서
동일한 특성 값과 특정성을 가지는 규칙은 마지막에 선언된 규칙이 적용된다.
즉, 동일한 레벨일 경우 (예를 들어 같은 클래스명을 사용하고 있는 경우) 나중에 작성한 스타일이 우선순위가 높다.
