캐스케이딩 정리

캐스케이드 정리

(출처: CSS 완벽 가이드, Eric Meyer, 2007, 위키북스)

상속이란, 일부 속성값들이 어떤 요소에서 그 자손 요소로 넘겨지는 방식을 의미한다. 사용자 에이전트가 요소에 어떤 값을 적용해야 할지 결정할 때에는 상속뿐 아니라 선언 자체의 기원(origin)과 구체성(specificity)도 고려해야 하며, 이런 고려 과정(process)를 캐스케이드(cascade)라고 부른다.

구체성

어떤 규칙이 우선인지 어떻게 알 수 있을까?

선택자 각각의 구체성을 보면 알 수 있다. 만약 요소에 상반되는 두 가지 이상의 속성 선언이 있다면, 구체성이 높은 선언이 우선한다. 구체성 값은 0,0,0,0처럼 4개의 값으로 표현되는데, 다음과 같은 규칙으로 계산된다.

• 선택자에 있는 모든 id 속성값에 0,1,0,0이 추가된다.
• 선택자에 있는 모든 class 속성값과 기타 속성, 가상 클래스에 0,0,1,0이 추가된다.
• 모든 요소와 가상 요소에 0,0,0,1이 추가된다.
• 조합자나 전체 선택자는 구체성에 아무런 영향을 주지 않는다.
• 인라인 스타일 선언에 1,0,0,0이 추가된다.

h1 {color: red;} /* 구체성 = 0,0,0,1 */
p em {color: purple;} /* 구체성 = 0,0,0,2 */
.grape {color: purple;} /* 구체성 = 0,0,1,0 */
*.bright {color: yellow;} /* 구체성 = 0,0,1,0 */
p.bright em.dark {color: maroon;} /* 구체성 = 0,0,2,2 */
#id216 {color:blue;} /* 구체성 = 0,1,0,0 */
div#sidebar *[href] {color: silver;} /* 구체성 = 0,1,1,1 */
html > body table tr[id="totals"] td ul > li {color: maroon;} /* 구체성 = 0,0,1,7 */

important 선언

어떤 선언들은 너무 중요하기 때문에 다른 모든 조건들보다 우선시해야 하는 경우가 있다. 이 때, !important선언을 사용한다. 제 위치에 선언이 놓이지 않으면 무효화 될 수 있으므로, !important는 언제나 선언의 끝, 즉 세미콜론 바로 앞에 위치시켜야 한다. !important선언과 일반적인 선언이 충돌할 때는 언제나 !important선언이 우선권을 갖는다.

상속

구체성과 더불어 선언들이 문서에 적용되는 방식을 이해하기 위한 중요한 핵심 개념이다. 상속을 통해 임의의 스타일이 선언문을 통해 지정된 해당 요소 뿐만이 아니라, 그 자손 요소에까지 적용된다.

상속에 관해 알아두어야 할 몇가지는 다음과 같다.

1. 몇가지 속성은 상속되지 않는데, 이런 것들은 보통 상식적으로 생각해보면 구분 할 수 있다. (예를 들어, 테두리와 같은 속성은 상속되지 않는다. 상속을 통해 자손 요소까지 적용될 경우 문서가 엉망이 될 가능성이 높은 속성들은 상속되지 않는다. 이런 이유로 마진, 패딩, 배경, 테두리와 같은 대부분의 박스 모델 속성들은 상속되지 않는다.)
2. 상속된 값은 구체성 값이 전혀 없으며, 심지어 0값을 갖지도 않는다.

캐스케이딩 스타일시트(CSS, Cascading Style Sheet)

CSS는 스타일을 단계적으로 조합하는 방식으로 동작하는데, 이런 방식은 상속과 구체성을 조합함으로써 가능해진다. CSS의 캐스케이드 규칙은 상당히 간단한다.

1. 주어진 요소를 선택하는 선택자가 포함된 모든 규칙을 찾는다.
2. 요소에 적용되는 모든 선언을 명시적인 중요도에 따라 분류한다. !important로 선언된 모든 규칙은 그렇지 않은 규칙보다 더 높은 우선순위를 갖는다. 요소에 적용될 모든 선언을 선언의 출처(origin)에 따라서 분류한다. 선언은 제작자(author), 사용자(reader), 사용자 에이전트(user agent)의 세 가지 출처로 분류된다. 일반적인 상황에서는 제작자 스타일시트가 사용자 스타일시트보다 우선한다. 하지만 !important로 선언된 사용자 스타일은 !important로 선언된 제작자 스타일을 포함해서 다른 어떤 스타일보다도 우선한다. 제작자와 사용자 스타일 모두 사용자 에이전트의 기본 스타일보다 우선한다.
3. 요소에 적용되는 모든 선언을 구체성에 따라 분류한다. 구체성이 더 높은 선언이 그렇지 않은 선언보다 높은 우선순위를 갖는다.
4. 요소에 적용되는 모든 선언을 순서대로 분류한다. 스타일시트나 문서에서 선언이 뒤에 위치할 수록 더 높은 우선순위를 갖는다. @import로 불러온 스타일시트는 자신을 호출한 스타일시트 내의 그 어떤 선언보다도 앞에 있는 것으로 간주한다.

정리하자면, 선언의 우선순위를 결정하기 위해서는 다섯 가지 단계를 고려해야 한다. 이 다섯 단계를 우선순위가 높은 순서대로 나열하면 다음과 같다.

1. 사용자 !important선언
2. 제작자 !important선언
3. 제작자 일반 선언
4. 사용자 일반 선언
5. 사용자 에이전트 선언

어떤 스타일이든, 일단 선언하기만 하면 사용자 에이전트의 스타일보다 우선하기 때문에, 제작자들은 특별한 경우를 제외하고는 1~4까지의 네 가지 단계만 신경쓰면 된다.

CSS이외의 표현 정보

문서에는 font요소처럼 CSS가 아닌 표현 정보가 있을 수도 있다. 이런 CSS외의 정보들은 구체성값 0을 갖으며, 제작자 스타일시트의 맨 처음에 놓여있는 것으로 취급된다. 따라서 제작자나 사용자 스타일로는 재정의할 수 있지만, 사용자 에이전트 스타일로는 불가능하다.