CSS는 Cascading Style Sheet의 약자를 지칭하는데, 그렇다면 Cascading은 무엇일까요?
네이버 어학사전으로 검색해보면
명사 작은 폭포, 폭포처럼 쏟아지는 물
동사 폭포처럼 흐르다, 풍성하게 늘어지다
즉, 폭포처럼 위에서 아래로 이어지는 연속적인 형태를 캐스캐이딩이라고 부릅니다.
그 중에서도 특히 상단의 이미지처럼 계단식으로(순차적으로) 흐르는 물이 Cascading인데요.
그렇다면 왜 CSS에 이러한 단어가 쓰였을까요?
이는 CSS에서 '캐스케이딩 원리'를 가장 중요하게 적용하고 있기 때문입니다.
CSS를 작성하다 보면, 하나의 요소에 여러개의 스타일를 적용하면서 중복 작성되는 일들이 빈번하게 일어나게 됩니다. 이러한 상황에서 중복된 코드 중 어떤 코드를 적용할지에 대한 기준이 필요한데, 이것이 바로 '캐스케이딩 원리'입니다. 위에서 아래로 내려오는 폭포수처럼, 우선순위를 정해 순차적으로 스타일을 적용시키는 것이죠.
해당 원리는 크게 아래의 3가지 규칙을 통해 우선순위를 결정하는데, 이에 대해 하나씩 알아보도록 하겠습니다.
중요도, 명시도, 코드 순서
1. 중요도 (Importance)
중요도는 Style Sheet 자체에 우선순위를 지정한 것입니다.
이는 크게 3개로 나뉘는데, 우선순위는 아래와 같습니다.
inline stylesheet :
- 사용자가 해당 페이지에 접속하여 HTML에 직접 스타일을 작성하는 것
author stylesheet :
- 흔히 우리가 생각하는 CSS 스타일을 말합니다. 제작자가 해당 홈페이지를 만들 때 지정한 스타일입니다.
- 참고로, 혹시 제작자가 스타일 시트에서 속성값 뒤에 !important 를 써놓은 스타일이 있다면, 해당 스타일은 다른 일반 스타일보다 우선 적용됩니다.
user agent stylesheet :
- 크롬, 사파리 등 브라우저가 기본으로 지정해놓은 스타일입니다.
- 일반적으로 제작자가 따로 스타일을 적용하지 않았거나, 코드에 오류가 있어 정상적으로 적용되지 않았다면 해당 스타일이 적용됩니다.
2. 명시도 (Specificity)
단어 뜻 그대로, 더 Specific한, 적용 대상이 명확한 스타일을 우선 적용한다는 뜻입니다.
참고로 VS Code에서 선택자에 마우스를 올리면 (0.0.0) 라고 적힌 숫자를 확인할 수 있는데, 해당 형태가 명시도를 나타내는 형식입니다. 여기서 첫 번째 숫자는 'ID의 개수', 두 번째 숫자는 'class의 개수', 세 번째 숫자는 'tag의 개수'를 나타내며, 명시도 역시 id > class > tag 순입니다.
- id는 선택자 이름 앞에 '#'을 사용하여 지정하는데, 같은 아이디는 같은 문서에서 한 번만 사용할 수 있으므로 가장 명시도가 높습니다.
- class는 선택자 이름 앞에 '.'을 사용하여 지정하는데, 같은 문서 내에서 여러 번 쓰일 수 있으므로 id보다는 명시도가 낮습니다.
- tag는 문서 내 사용된 모든 tag가 포함되므로, 가장 명시도가 낮습니다.
참고로, id보다 높은 명시도를 가지는 경우도 있습니다. 바로 inline인데요, <p style="font-size: 24px> 처럼 태그 안에 직접적으로 작성한 style 속성입니다. 이는 오직 해당 태그에서만 적용되므로, 가장 높은 우선순위를 가집니다.
따라서, 명시도의 최종 우선순위는 inline > id > class > tag 가 됩니다.
3. 코드 순서
마지막 우선순위 요소는 '코드 순서' 입니다. 기본적으로 '캐스케이딩 원리'는 우선순위가 낮은 스타일이 아예 적용이 되지 않는다기 보다는, 더 높은 우선순위를 가진 스타일이 해당 스타일을 '덮어 썼다'라고 하는 것이 더 정확한 표현인데요, 예를 들어 기본 브라우저가 글자 색깔을 #000000 으로 지정해 놨어도, 제작자가 해당 색깔을 #FFFFFF로 바꿀 권한을 갖는다는 뜻입니다.
코드는 기본적으로 위에서부터 아래로 읽히는데요, 따라서 다른 모든 우선순위가 같을 경우, 코드의 하단에 위치한 속성이 상단에 위치한 코드보다 높은 우선순위를 갖게 됩니다.
