Cascading 이란?
Cascade의 사전적 의미를 찾아보면, "폭포가 되어 떨어지다.", "폭포처럼 떨어뜨리다." 등의
위에서 아래로 흐른다는 의미를 가지고 있다.
이처럼 CSS에서는 폭포처럼 스타일 규칙이 계단식으로 적용된다.
이런 스타일 규칙은 여러 개가 HTML 요소에 적용될 수 있는데,
이를 우선순위에 따라 결정하는 것을 "Cascading"이라고 한다.
그럼 저 우선순위는 어떻게 결정할까?
우선 순위
기본적으로 우선 순위를 결정할 때는 명시도를 고려해야하는데, 선택자마다 명시도 점수가 있다.
① id
② 클래스, 속성, 가상(pseudo)클래스
③ 태그, 가상(psuedo)요소
- 태그 < class < id 순으로 우선순위가 높으며, 각각의 개수를 비교하여 우선순위가 결정된다.
tag#id { ··· } /* --- 점수 : 1 0 1 --- */ 1순위
tag.class { ··· } /* --- 점수 : 0 1 1 --- */ 3순위
.class { ··· } /* --- 점수 : 0 1 0 --- */ 4순위
tag.class1.class2 { ··· } /* --- 점수 : 0 2 1 --- */ 2순위
명시도 점수 외에도 고려할 점들이 있다.
1. !important: 명시도와 무관하지만 명시도에 직접 영향을 미치고 다른 선언보다 우선한다.
* important가 여러 개일 경우에는 명시도 점수가 높은 것부터 우선순위로 적용된다.
2. 인라인 스타일 정의: 인라인 스타일은 항상 외부 스타일시트의 모든 스타일을 덮어쓰기때문에 가장 높은 명시도를 갖는다.
3. 상속된 스타일
: 부모 태그에 적용된 CSS 규칙은 자손에게도 상속된다.
모든 속성이 상속되는 건 아니고, 상속되는 속성(color, font-family 등)들이 정해져 있다.
조상 태그들의 스타일이 모두 계산된 상태에서 우선순위를 따지는데, 가까운 조상에게 물려받은 속성일수록 우선순위가 높다.
4. 코드 상의 순서: 동일한 가중치를 갖는 규칙이 두 개 이상인 경우, 코드에서 아래 쪽에 쓴 코드일수록 우선순위가 높다.
<style>
p {
color: blue;
color: red; /* -- 적용되는 스타일 -- */
</style>
또한 스타일 시트가 상호 충돌할 경우, 우선 적용되는 순서는 아래와 같다.
1. 웹 페이지를 만든 저자가 작성한 스타일 시트 = 개발자 스타일 시트 : 개발자 스타일 시트 안에서도 적용되는 우선 순위가 있다.
1) 인라인 스타일: HTML 요소의 style 속성으로 지정된 스타일
<body>
<p style="color: red"> Hello, World! </p>
</body>
2) 내부 스타일: HTML 문서 내 <head> → <style> 태그 내 선언
<head>
<style>
p {
color: red;
}
</style>
</head>
3) 외부 스타일: 외부 css 파일
2. 사용자가 작성한 스타일 시트
3. 브라우저에서 기본으로 제공하는 스타일시트
종합적으로 위의 규칙들이 적용되는 순서는 상속된 스타일 < 명시도 < 인라인 스타일 < !important의 순서로 적용된다.
하지만 !important와 인라인 스타일의 경우, 스타일 디버깅을 어렵게 하므로 되도록 사용하지 않는 것이 좋다!