Cascading 이란?
CSS는 Cascading Style Sheet의 약자입니다. CSS를 사용하다 보면 같은 요소에 여러 개의 스타일이 중복될 수 있습니다. 충돌이 발생하지 않기 위해 스타일 우선순위, 스타일 상속이라는 두 가지 원칙으로 어떤 요소에 스타일을 적용할지 결정하는 데 이를 Cascading이라고 합니다.
스타일 우선순위
스타일 우선순위는 스타일 요소는 각각 우선순위를 가지고 있는데, 이 우선순위가 가장 높은 스타일이 적용되는 것을 말합니다. 스타일 우선순위는 중요도, 명시도, 코드 순서 총 3가지 요소를 통해 우선순위를 결정합니다.
- 중요도
- 명시도
- 코드 순서
중요도
중요도는 스타일이 선언된 위치에 따라서 우선순위를 매기는 것입니다. 작성자, 사용자, 사용자 도구 순으로 우선순위가 높습니다.
작성자 스타일 > 사용자 스타일 > 사용자 도구 스타일
명시도
명시도는 선택자가 가리키는 것이 명확할수록 우선순위를 높게 주는 것을 의미합니다. 쉽게 말해서, 여러 개를 가리키는 선택자보다 적은 범위를 명확하게 가리키는 선택자 스타일의 우선순위가 높습니다.
!important > 인라인 > id > class > 태그
코드 순서
코드 순서는 위에서 아래로 실행되는 프로그래밍의 기본 원리와도 같이 코드에서 가장 마지막에 등장한 속성을 최우선으로 적용합니다.
스타일 상속
두 번째 원칙인 스타일 상속은 태그들의 포함 관계로 스타일을 적용하는 원칙입니다. 바깥에 있는 태그가 부모 요소, 그 안에 포함된 태그들을 자식 요소라고 하는데 일반적으로 부모 요소의 스타일을 자식 요소들이 받아서 갖게 됩니다. 이것을 상속이라고 하며, 부모 요소의 스타일을 자식 요소가 그대로 받는 것을 스타일 상속이라고 합니다.
<div>
<div>
</div>
</div>이렇게 스타일 우선순위와 스타일 상속을 통해 어떤 스타일이 적용될지 결정하는 것을 Cascading이라고 합니다.
