[CSS] 캐스케이드(Cascade)
🌱 정의
CSS에서 하나의 요소에 여러 개의 스타일이 지정되어 충돌이 발생할 때, 어떤 스타일을 우선적으로 적용할 지 결정하는 규칙
CSS는 Cascading Style Sheet의 약자로,
Cascade(종속, 작은 폭포, 계단식)는 여기서 가장 첫 번째로 위치한 단어인 만큼 매우 중요한 개념입니다.
개발을 진행하는 과정에서 여러 선택자를 사용하여 요소의 스타일을 지정하게 되는데,
같은 요소에 여러 스타일을 적용한 경우 내가 원하는 스타일이 적용되지 않는 상황이 발생할 수 있습니다.
충돌이 발생한다고 해서 에러가 나는 것은 아니고, 충돌된 스타일 중에서 우선순위 및 가중치에 따라 무시할 스타일을 정하게 됩니다.
이때 캐스케이드의 개념을 이해하고 있다면 어떤 스타일이 충돌된 것인지 찾아내어 제어할 수 있습니다.
캐스케이드에서 고려되는 사항은 다음과 같습니다.
- 스타일 시트 종류
- 작성 순서
- 우선 순위
- 상속
🌱 스타일 시트 종류
스타일 시트(style sheet)의 종류가 서로 충돌하는 경우 다음 순서에 따라 적용됩니다.
- 웹 사이트 개발자가 지정한 시트
- 사용자 개인이 직접 지정한 시트(저시력자나 색약자와 같이 특별한 속성이 필요한 사용자가 자신에게 맞는 조건으로 구성한 시트)
- 웹 브라우저 자체에서 기본적으로 지정된 시트
🌱 작성 순서
같은 가중치를 갖는 스타일이 두 개 이상인 경우 가장 나중에 쓰인 스타일이 적용됩니다.
마지막 스타일이 앞서 작성된 스타일을 덮어 쓰며 갱신되는 방식입니다.
예를 들어, 아래와 같은 코드가 있을 때
h1 {
color: red;
color: blue; /* <h1>에 적용되는 색 */
}h1에는 마지막에 작성된 스타일인 파란색이 적용됩니다.
아래의 경우도 위의 예시와 마찬가지로 마지막에 작성된 스타일인 파란색이 적용됩니다.
h1 {
color: red;
}
h1 {
color: blue; /* <h1>에 적용되는 색 */
}
🌱 우선 순위(명시도, specificity)
작성된 선택자가 얼마나 구체적인지에 따라 적용될 스타일이 정해집니다.
구체성의 가중치는 아래와 같습니다.
| 선택자 | 설명 | 점수 (비교를 위해 설정한 값) |
| !important | p { color: blue !important } 다른 어떤 스타일보다 우선적으로 적용되어야 하는 스타일 뒤에 적어줌 (권장하지 않는 방식) |
9999(최고점) |
| inline | <h1 style="color: blue;"> I'm blue. </h1> (권장하지 않는 방식) |
1000 |
| id | #id { color: blue } | 100 |
| class | .class { color: blue } | 10 |
| tag(element) | h1 { color: blue } | 1 |
예를 들어, 아래와 같은 선택자가 있다면
/* ex1 */
ul#primary-nav {
color: blue;
}
/* ex2 */
li.active {
color: blue;
}| ul | #primary-nav | vs | li | .active | ||
| tag(element) | id | = 101 | > | 11 = | tag(element) | class |
| 1 * 1 = 1 | 1 * 100 | 1 * 1 = 1 | 1 * 10 = 10 | |||
ex1) ul#primary-nav 선택자의 명시도가 더 크다고 계산할 수 있습니다.
또는, 명시도 계산기를 통해 우선 순위를 가지는 요소의 개수를 비교하여 적용될 스타일을 정할 수 있습니다.
비교를 원하는 선택자를 각각에 붙여 넣으면 명시도가 계산됩니다.
이 방식에서는 명시도 점수의 총합을 보는 것이 아니라 우선 순위가 높은 선택자의 개수가 많은 스타일이 우선 시 됩니다.
올림픽에서 은메달과 동메달의 개수가 아무리 많아도 금메달이 많은 나라가 높은 순위에 기록되는 것과 같은 맥락입니다.
🌱 상속
자신과 가장 가까운 조상 요소에게 물려받은 스타일이 적용됩니다.
예를 들어, 아래와 같은 구조의 html 파일이 있다면
body {
color: white;
}
#drive {
color: red;
}
.folder {
color: green;
}
.file {
color: blue;
}
---------------------------------
<body>
<div id="drive">
<div class="folder">
<p class="file">
I'm...blue!
</p>
</div>
</div>
<body>상속의 우선 순위는 낮은 것부터 id = "drive" < class = "folder" < class = "file" 순으로 높아지고,
p 태그 안의 문장은 file의 스타일인 파란색으로 지정됩니다.
참고로 모든 태그가 상속되는 것은 아닙니다.
MDN Web Docs에서 검색하고자 하는 속성을 검색하고 Formal definition이라고 적힌 표를 보았을 때,
Ingerited -> yes라고 나와 있다면 해당 속성은 상속됨을 알 수 있습니다.color 속성의 상속 여부
읽어주셔서 감사합니다:)