Cascading의 의미와 원리
- Cascading이란?
Cascading의 우선순위
- 중요도
- 명시도(Specificity)
- 코드 상의 순서
CSS는 Cascading Style Sheets의 약자로 HTML이나 XML 같은 문서를 어떠한 스타일과 레이아웃으로 디자인 할지에 대한 표시방법을 기술하기 위한 스타일 시트 언어 입니다. CSS 언어의 이름에도 들어갈 만큼 Cascading은 CSS에서 중요한 규칙이자 흐름인데요, Cascading(이하 캐스케이딩)이 무엇인지, 어떤 규칙이 있는지 살펴보겠습니다.
Cascading 이란?
캐스케이딩은 사전적으로 폭포같은, 위에서 아래로 흐르는,연속적인 이란 뜻을 가지고 있습니다. 즉, 위에서 아래로 흐르는 연속적인 형태를 말합니다. 상속의 의미도 가지고 있습니다.
CSS의 관점에서 캐스케이딩은 어떤 의미 일까요?
먼저, CSS를 적용하는 HTML의 구조를 보면 HTML의 태그는 다른 태그들을 포함할 수 있습니다. 이때, 포함하는 태그를 '부모태그', 포함되는 태그를 '자식태그' 라고 합니다. 이 과정이 반복되면 조상태그, 자손태그, 형제태그가 생깁니다.
이렇게 계층적인 구조인 HTML의 태그에 CSS스타일을 적용하다 보면 각 태그의 스타일이 상위에서 하위로 상속되면서 누적됩니다. 이때 중복되는 스타일이 있을 경우 어떤 스타일을 적용할까요? 이때 캐스케이딩 규칙을 따릅니다.
CSS에서의 캐스케이딩이란 순서에 따라 계단식으로 스타일을 합치면서 이 스타일들을 요소에 어떤 기준으로 적용할지 우선순위를 정한 규칙을 말합니다.
우선순위는 다음과 같은 기준으로 결정됩니다.
- 중요도
- 코드 상의 순서
- 명시도(Specificity)
Cascading의 우선순위
1. 중요도 (Importance)
중요도는 스타일 시트의 종류에 따라서 우선순위를 매기는 것입니다.
중요도의 우선순위는 다음과 같은 순서로 적용됩니다.
- inline stylesheet > 2. author stylesheet > 3. user agent stylesheet
1. inline stylesheet (인라인 스타일)
html에 스타일을 직접 작성하는 것을 말합니다.
2. author stylesheet
html에 연결된 css파일 입니다.
3. user agent stylesheet
크롬, 사파리 등 웹 브라우저에서 기본적으로 지정해 놓은 스타일을 말합니다.
제작자가 따로 스타일을 적용하지 않았거나, 코드의 오류로 정상적으로 스타일이 적용되지 않았을 경우 적용됩니다.
중요도 올리기 !important
선택자 {
속성: 속성값 !important;
}!important; 를 붙이면 의도적으로 우선순위를 올릴 수 있습니다. 다른 스타일 보다 최우선으로 적용되게 됩니다. 자연스러운 캐스케이딩을 방해하므로 최대한 사용하지 않는 것이 좋습니다.
2. 명시도 (Specificity)
선택자가 적용 범위가 좁을 수록 우선순위가 높습니다.
VS Code에서 선택자에 마우스를 올리면 Selector Specifity:(0,0,0) 즉, 명시도를 확인 할 수 있는데 각각의 숫자는 (id의 개수, class의 갯수, 태그의 개수)를 의미합니다. 앞에 있는 숫자가 클수록 명시도가 높습니다. 명시도는 id > class > 태그 순이라고 볼 수 있습니다.
이때 인라인 은 하나의 태그 내에서만 적용되므로 인라인 까지 추가하면 명시도에 따른 우선순위는 아래와 같습니다.
인라인 > id > class > 태그
- 명시도를 계산해서 볼 수 있는 사이트
https://specificity.keegan.st/
3. 코드상의 순서 (Source Order)
똑같은 선택자라면 나중에 적은 코드의 우선순위가 높습니다. 코드는 기본적으로 위에서 아래로 읽혀서 아래에 적힌 코드가 위에 적힌 코드를 덮어쓰기 때문에 브라우저 화면에선 아래에 적힌 코드로 스타일이 적용된 걸 볼 수 있습니다.
이번 포스트에서는 캐스트케이딩에 대해 알아보았습니다. CSS를 작성할 때 원하는 스타일이 적용되지 않았을 경우 캐스트케이딩의 우선순위를 고려해서 수정해보면 좋겠습니다.
