[CSS] Cascading

CSS는 Cascading Style Sheets로 HTML, XHTML 등의 마크업 언어로 작성된 문서를 실제 표시되는 방법을 기술하는 스타일 시트 언어이다. 그럼 SC(Style Sheets)라고만 해도 되는데 왜 앞에 Cascading이 붙은 걸까?

Cascade는 사전적 의미로 종속, 작은 폭포라는 뜻을 가진 단어이다. 이를 풀어서 생각해 보면 위에서 아래로 차례대로 내려온다고 볼 수 있는데, 이는 웹사이트에 스타일을 적용시킬 때 스타일 규칙이 상위 요소에서 시작하여 하위 요소로 계속해서 전파된다는 개념이다.

여기서 요소에 하나 이상의 스타일이 적용될 때, 어떤 스타일을 적용하게 되는지 결정하는 우선순위가 존재하는데 이를 Cascading(캐스케이딩)이라고 한다. 

Cascading은 선언 위치, 선언 순서, 명시도에 따라 우선순위가 결정되고 우선순위가 높은 스타일이 적용된다.

선언 위치

CSS를 어디에 선언했는지에 따라서 결정된다. 1~6으로 갈수록 우선순위가 낮아진다.
1. HTML의 head 요소 안의 style
2. HTML의 head 요소 안의 style 내부의 @import 문
3. <link>로 연결된 CSS 파일
4. <link>로 연결된 CSS 파일 내부의 @import 문
5. 브라우저 디폴트 스타일 시트

선언 순서

CSS 파일 안에서 선언된 순서에 따라 우선순위가 결정된다. 아래에 작성될수록 우선순위가 높다. 즉, 나중에 선언된 스타일이 우선 적용된다.

명시도

대상을 명확하게 특정할수록 명시도가 높아지고 우선순위가 높아진다. 아래와 같은 순서로 우선순위가 결정된다.

!important > 인라인 스타일 > 아이디 선택자 > 클래스/어트리뷰트/가상 선택자 > 태그 선택자 > 전체 선택자 > 상위 요소에 의해 상속된 속성

여러 개가 겹친다면 아이디 개수, 클래스 개수, 태그 개수를 적어서 점수를 비교하여 더 높은 점수가 우선적으로 적용된다.

---

더 정확한 우선순위를 알고 싶다면 아래의 사이트에서 확인할 수 있다.

https://specificity.keegan.st/

Specificity Calculator