캐스캐이딩(Cascading)이란?
CSS의 정식 명칭은 Cascading Style Sheets. 캐스캐이딩은 '위에서부터 아래로 떨어지는' 이란 의미를 지닌 단어이다. 맨앞에 캐스캐이딩이란 단어가 들어가는 만큼 CSS에서는 이 원리가 가장 중요하게 적용된다.
웹 요소는 하나 이상의 스타일에 영향을 받을 수 있기 때문에 스타일을 적용할 때 우선순위에 따라 적용할 스타일을 결정한다. CSS에서 우선순위에 따라 계단식으로 스타일이 적용된다는 의미를 캐스캐이딩이라고 하는데, 스타일끼리 충돌하지 않도록 막아 주는 중요한 개념이니 잊지말자. 스타일이 충돌하지 않게 하는 방법으로 다음 2가지 방법이 있다.
- 스타일 우선순위: 스타일 규칙의 중요도와 적용 범위에 따라 우선순위가 결정되고, 그 우선순위에 따라 위에서 아래로 스타일을 적용한다.
- 스타일 상속: 태그의 포함 관계에 따라 부모 요소의 스타일을 자식 요소로, 위에서 아래로 전달한다.
스타일 우선순위
스타일 우선순위는 캐스캐이딩에서 가장 중요한 개념이다. 이때 우선순위란, 어떤 스타일을 먼저 적용할 것인지 결정하는 규칙을 말하며, 다음 3가지 기준에 따라 결정된다.
1. 중요도(Importance)
중요도는 스타일이 선언된 위치(사람)에 따라 우선순위를 매기는 것이다. 스타일 시트는 작성자(author), 사용자(user), 사용자 도구(user agent, 대표적으로 browser)가 기본으로 정해놓은 스타일로 나뉜다. 중요도 순위는 아래와 같다.
작성자 스타일 시트 > 사용자 스타일 시트 > 사용자 도구 스타일 시트
2. 명시도 (Specificty)
명시도는 셀렉터가 가리키는 것이 명확할수록 우선순위를 높게 주는 것을 의미한다. 다시 말해, 모호하게 여러개를 가리키는 셀렉터 보다 적은 범위를 명확하게 가리키는 셀렉터 스타일의 우선순위가 높다. 명시도에 따른 우선순위는 다음과 같다.
인라인 > id > 클래스 > 태그
- 인라인: 하나의 요소 안에 style 속성을 사용해 해당 태그만 스타일을 적용하므로 가장 높은 우선순위를 지닌다.
- id: 지정한 부분에만 적용되는 스타일이지만, 한 문서에 한 번만 적용할 수 있다. 선택자 이름 앞에 # 기호를 사용해 적용한다.
- 클래스: 지정한 부분에만 적용되는 스타일로, 한 문서에 여러 번 적용할 수 있다. 선택자 이름 앞에 . 기호를 사용해 적용한다.
- 태그: 한 문서 내에 해당되는 모든 태그에 스타일을 적용하므로 범위가 제일 넓다.
!important 예외
!important 규칙이 스타일 선언에 사용된 경우, 이 선언은 다른 어떤 선언보다 우선한다. 명시도와 관련 없는 영역이나, 명시도에 직접 영향을 미치는 규칙이므로 자연스러운 캐스캐이딩을 깨뜨릴 수 있어 디버깅을 더 어렵게 만들기 때문에 사용을 권장하지 않는다.
3. 코드 순서 (Source Order)
우선순위 기준 마지막 요소는 코드 순서이다. 코드 순서는 코드에서 가장 마지막에 등장한 속성을 최우선으로 적용한다는 것이다. 이것은 위에서 아래로 해석해나가는 프로그래밍의 기본 원리와도 일치한다.
스타일 상속
캐스캐이딩이 따르는 두 번째 원칙은 스타일 상속이다. 웹 문서에서 사용하는 여러 태그는 서로 포함 관계가 있다. 이때 포함하는 태그를 부모 요소, 포함된 태그를 자식 요소라고 한다. 스타일 시트에서는 자식 요소에서 별도로 스타일을 지정하지 않으면 부모 요소의 스타일 속성들이 자식 요소로 전달되는데, 이를 스타일 상속이라고 한다.
예를 들어, 문서 구조에서 <body> 태그는 웹 문서에 사용한 모든 태그의 부모 요소이다. 그래서 <body> 태그 스타일에서 글자색이나 글꼴을 지정하면 그 스타일은 웹 문서 전체에 적용된다. 부모 요소의 스타일이 자식 요소에게 그대로 상속되기 때문이다.
Tip
참고로 배경색과 배경 이미지는 스타일 상속이 되지 않는다. 또한 스타일 상속만으로 모든 스타일의 충돌을 해결할 수 있는 것은 아니다. 만약 부모 요소로부터 글꼴을 상속받은 자식 요소에서 다른 글꼴을 사용하려면, 우선순위에서 설명한 '명시도'나 '소스 순서' 등의 기준에 따라 해결해야 한다.
'CSS' 카테고리의 다른 글
| CSS-in-JS의 장단점 (0) | 2023.11.04 |
|---|---|
| [CSS] Position의 속성 (0) | 2023.09.09 |
