Cascading은 작은 계단모양의 폭포를 말합니다. 폭포의 전후로 물의 높낮이가 바뀌겠죠. 연속적인 물의 흐름에서 높낮이 차이를 우선순위에 비유한 것 인듯 싶습니다.
CSS(Cascading style sheets)의 C는 Cascading의 약자입니다. CSS의 뜻을 살펴보면 우선순위가 있는 스타일 시트라는 뜻이군요. 구체적으로 하나의 태그에 여러가지 방법으로 동일한 속성의 스타일을 적용하는 경우 우선순위에 따라서 적용될 스타일이 결정된다는 뜻입니다. 속성을 적용하다보면 하나의 태그에 본의 아니게 같은 속성이 겹쳐 적용될 때가 있을 겁니다.
단편적인 예제를 통해서 CSS를 공부할 때는 이런 경우가 그다지 발생하지 않으므로 Cascading에 대해서 깊게 생각하지 않아도 될지 몰라도 완성도 있는 HTML 페이지를 만들기 위해 Cascading에 대한 이해는 필수입니다.
그렇다면 스타일을 적용할 때 우선순위가 어떻게 달라지는지 살펴보겠습니다.
캐스케이딩(Cascading)
- 중요도
저작자 !important > 저작자 CSS > 사용자 CSS > 브라우저 CSS
웹 디자인너(프로그래머)는 저작자에 해당하고 사용자나 브라우저가 설정한 기본 CSS 보다 우선순위가 높습니다. 브라우저가 가장 우선순위가 낮은데 저작자가 아무런 CSS 속성도 지정하지 않았을 때 디폴트로 보여지는 모습이 브라우저에 기본으로 설정된 CSS입니다. 같은 페이지라도 크롬과 인터넷 익스플로러에서 약간 차이가 있게 보이는 경우가 각 브라우저의 기본 CSS의 차이때문입니다.
그리고 사용자가 CSS 속성을 지정하는 것은 흔하지는 않기 때문에 넘어가겠습니다.
저작자 !important는 CSS 속성을 줄 때 !important를 뒤에 붙이는 것을 말합니다. 이렇게 하면 우선순위가 가장 높아집니다. 나중에 예제로 살펴보도록 하겠습니다.
우선순위를 결정하는 중요도는 이 정도로만 이해하고 "아 그렇구나~" 하고 스윽 넘어가시면 됩니다. 다음부터가 중요한 내용입니다.
- 선택자에 따른 명시도
태그 요소에 스타일 속성을 줄 때 선택자를 사용합니다. 그런데 선택자의 종류에 따라 명시도의 차이가 있습니다. 그리고 명시도는 더 구체적이라는 뜻이고 바로 우선순위를 뜻합니다.
style > id > class > 태그
예를들어 id 선택자는 class 선택자보다 명시도가 높고 class 선택자는 태그 선택자보다 명시도가 높습니다.
그리고 같은 태그 선택자끼리라면 뒤에 추가적인 선택자가 더 붙는 것이 더 자세하므로 명시도가 높습니다.
예를 들어 살펴보겠습니다.
순서있는 리스트에 3개의 아이템이 있습니다. (li 태그 안에)
그리고 li 태그에 폰트색을 blue로 주었습니다. 결과를 보면 third에만 blue가 적용되었네요. 우선순위에서 밀린겁니다. 바로 다음에 나오는 class 선택자와 id 선택자가 태그 선택자보다 우선순위가 높기 때문입니다.
다음은 클래스 선택자로 리스트의 첫 번째, 두 번째 아이템에 brown색을 주었습니다. 하지만 첫 번째 아이템만 적용되었군요. 왜냐면 다음에 나오는 id 선택자가 두 번째 아이템에 pink색을 주었기 때문에 우선순위에서 밀린 겁니다.
이렇게 중복해서 속성이 적용될 때는 선택자의 종류에 따라서 적용 우선순위가 달라집니다.
※ 참고
CSS 선택자로 속성을 주는 것 보다 다음과 같이 태그에 직접 style을 주는 경우가 우선순위가 더 높다.
<li style="color:yellow">
이번에는 같은 종류의 선택자일 때 우선순위를 정하는 규칙에 대한 예제입니다.
같은 선택자 끼리라면 깊이가 깊을수록(구체적일 수록) 명시도(우선순위)가 높다.
ⓐ, ⓑ, ⓒ는 모두 같은 div 태그 선택자로 시작하지만 선택자의 깊이가 다릅니다. ⓐ 보다 ⓑ가 더 구체적이죠. 이럴 때는 ⓑ가 우선순위가 높으므로 ⓐ는 적용되지 않고 ⓑ가 적용됩니다.
그런데 결과를 보면 리스트의 세 번째 아이템만 빨간 색이 적용되었습니다. ⓒ는 ⓑ보다 더 구체적으로 class 선택자까지 명시했으므로 우선순위가 더 높기 때문입니다. 그런데 두 번째 아이템은 green이 아닌 darkgrey가 적용되었네요. ⓒ와 ⓓ가 같은 깊이지만 ⓓ의 세 번째 선택자가 id 선택자로 ⓒ의 세 번째 선택자 class 선택자보다 우선순위가 높기 때문입니다.
같은 만원짜리 지폐라도 헌 지폐보다 새 지폐가 선호도가 높겠죠. 비슷한 원리라고 기억하면 이해하기 쉬울 듯 합니다.
- 코드 순서
앞의 내용과 연결해서 이해할 수 있습니다. 선택자의 종류와 깊이가 같을 때 우선순위의 결정 방식은 코드의 순서입니다. 다음 예제를 보죠.
css에서 박스로 표시된 부분을 보면 .cl_first에 대해서 각각 color 속성을 지정했습니다. 이 때 명시도가 같아서 명시도로 우선순위를 가릴 수 없으므로 코드 상에서 나중에 오는 경우가 우선순위가 높도록 설정됩니다. 비유하자면 캔버스에 색을 칠할 때 먼저 칠했던 색을 다른 색으로 덮어씌우기를 하는 거라고 생각하면 됩니다. 코드의 해석은 위에서 아래방향의 순서대로 해석되니 아래쪽에 있는 코드가 나중에 적용되는 코드입니다.
두 코드의 위치를 바꾸면 다음과 같이 .cl_first가 green 색으로 적용됩니다.
※ 주의
같은 깊이라도 (,)콤마로 나열된 경우 우선순위가 생깁니다.
div ol .cl_first, .cl_second 보다
div ol .cl_second 가
.cl_second에 대해서 우선순위가 높습니다.