Cascading
위에서 아래로 흐르는, 상속 또는 종속하는
CSS는 Cascading Style Sheet의 약자이다.우리는 흔히 Style Sheet라는 것에만 적응이 되어 CSS가 스타일 관련 코드를 짜는 언어라고 알고 사용중이다.
하지만 제일 앞에 있는 글자인 Cascading에 대해서는 생각해 본 적이 없다.
Cascading이란 무엇일까
Cascading이란,
한 요소에 적용된 동일한 속성 중, 어떤 스타일 속성을 브라우저에 표현할지 결정해주는 원리
를 뜻한다.
쉽게 말해서 한 개의 태그에 동일한 스타일 속성이 적용되었을 때 어떤 스타일을 우선적으로 선택하여 적용할지를 결정해주는 원리인 것이다.
예를 들어 다음과 같은 코드를 보면
//HTML
<div class="first">
<h1 class="second">Hello</h1>
</div>
//CSS
.first {
color: red;
}
.second {
color: blue;
}동일한 Hello라는 텍스트에 색상이 적용되는 속성 두 개가 동시에 작성되어있다. 이런 경우 Cascading 원리에 의해서 color: blue;가 적용된다.
왜 이렇게 적용되는지 Cascading에 대해 알아보도록 하자.
Cascading은 기본적으로 두 가지 원칙을 따른다.
1. style priority(스타일 우선 순위)
2.style inherit(스타일 상속)
Hello