Cascade의 의미
Cascade 라는 단어는 종속, 작은 폭포 라는 뜻을 가지고 있다. CSS 는 Cascading Style Sheet 의 약자인데, 상위 요소의 스타일 속성을 하위 요소들에게 물려주는 모습이 작은 폭포와 같기 때문에 붙여진 이름이다. 하지만 그렇게 속성을 물려주다보면 한 대상에게 동일한 속성이 겹치게 되는 경우가 발생하는데, 이때 어떤 스타일을 적용받을지에 대한 우선순위를 결정하는 것을 Cascading 이라고 말한다.
우선순위를 결정하는 순서
Cascading은 일반적으로 아래와 같은 순서로 이루어진다.
-
중요도(Important)
중요도는 스타일이 어디서 선언되었는지에 따라서 우선순위를 가진다. 아래는 순서가 높은 순이다.1) 사용자 스타일 시트
저시력자나 색약자 등과 같은 특별한 조건을 가진 사용자를 위해 구성해 놓은 스타일 시트를 말한다. 사용자 스 타일 시트는 시스템에 저장된 스타일이기 때문에, 웹 페이지 제작자가 스타일을 제어할 수가 없다.2) !important 가 적용된 스타일
스타일 시트를 제작하다가 우선순위를 높이고 싶은 속성값 뒤에 붙이면 해당 속성값은 높은 중요도를 가진다. 아래와 같이 붙이면 된다.선택자 { 속성: 속성값 !important; }하지만 !important 는 되도록 사용을 피해야하고, 오버라이딩을 어렵게 만들 수 있으므로 신중하게 사용해야 한다.
3) 작성자 스타일 시트
웹 페이지에서 일반적으로 적용하는 CSS 모듈들을 의미한다.4) 사용자 도구 스타일 시트
브라우저마다 기본적으로 지정하고 있는 스타일이다. Chrome 에서 지원하는 DevTools 로 적용된 스타일들을 살펴보면 user agent stylesheet 라고 명시된 부분이 있는데, 이것이 여기에 해당한다.
-
명시도(Specificity)
명시도는 선택자를 통해 계산하여 더 높은 쪽이 더 우선순위가 높다.
명시도의 계산은 인라인 > id > class > tag 순으로 등급이 높고, 더 높은 등급의 숫자가 높은 쪽이 명시도가 높다고 계산이 된다.
-
인라인 :
<p style="color: blue">와 같이 직접 html 파일의 태그안에 style 속성을 집어넣는 것을 말한다. -
id :
#id { color: blue }와 같이 id 선택자를 사용하는 경우를 말한다. -
class :
.class { color: blue }와 같이 class 선택자를 사용하는 경우를 말한다. -
tag : div 나 p 와 같은 모든 태그 선택자들을 말한다.
보통 인라인은 특수한 경우이니 제외하고, 선택자에 id, class, tag 가 얼마나 속해있는지를 통해 명시도를 계산한다. 예를 들어,
#id > a의 경우.class.class > p보다 짧지만 id를 하나라도 포함하기 때문에 명시도가 더 높다.명시도의 계산은 https://specificity.keegan.st/ 직접 입력만 하면 계산을 해주는 사이트가 있어 편리하다.
-
코드의 순서
CSS 파일에서 같은 선택자를 가진 경우, 일반적으로 아래에 있는 속성이 더 우선적으로 적용된다. 이것은 위에서 아래로 읽어나가는 프로그래밍의 원리와도 같다. 예를 들어,.class { color: blue }라는 속성을 입력했다가, 아래에서.class { color: red }를 입력한다면 아래 있는 red 속성값이 적용된다.
-
상속(Inheritance)
태그들이 어떻게 포함되어 있는지에 따라 어떻게 스타일을 적용해야 할지를 결정한다. 부모요소의 일부 속성들, 예를 들어 줄 높이, 폰트, 글자 색, 글자의 크기, 글자의 굵기, 문자의 배열 등은 자식요소에게도 상속이 된다.(상속되는 속성들은 mdn 에서 직접 속성마다 각각 확인 가능하다.) 일반적으로 같은 속성에 대해 상속받은 경우, 가장 가까운 조상에게서 물려받은 값이 우선순위가 더 높다.
