[CSS] CSS의 CASCADING

 

CASCADING 이란?

"폭포, 위에서 아래로 쏟아지는" 이라는 뜻을 가진 단어이다. 최종적으로 적용할 CSS 속성들을 결정할 때, 계단식 폭포처럼 CSS규칙을 순서에 따라 합쳐서 적용하는 걸 말한다. 한국어로는 "종속"이라고 번역하기도 한다.

그리고 이 cascading은 CSS에서 가장 중요한 스타일 적용 규칙이기도 하다.

CSS는 스타일을 적용할 규칙을 세우기 위해 CASCADING 규칙을 채택했다.

CASCADING 은 다음과 같은 두가지의 원칙을 통해 어떤 요소에 스타일을 적용할지 결정한다.

- 스타일 우선순위

- 스타일 상속

---

우선 스타일 우선순위에 대해 먼저 알아보자.

1. 스타일 우선순위

스타일 요소는 각각 우선순위를 가지고 있는데, 이 우선순위가 가장 높은 스타일이 적용되게 된다.
이것을 "스타일 우선순위"라고 한다.

우선 순위가 높은 순서는 다음과 같다.
!important > 인라인 > 명시도 높은 선택자 > 동일 명시도일 경우, 나중에 작성된 > 기본 스타일

 

※ 인라인 속성

HTML에서 직접 스타일을 작성하는걸 "인라인 스타일"이라고 하는데 "인라인 스타일"은 cascade에서 !important 다음으로 가장 우선순위가 높다.

※ 선택자의 명시도

선택자마다 명시도 점수가 있는데, 아이디 개수, 클래스 개수, 태그 개수를 적어서 점수를 비교한다.

아래 사이트에서 명시도 비교가 가능하다.
https://specificity.keegan.st/

이런식으로 앞에 있는 숫자가 클수록 명시도가 높다고 볼 수 있다.

※ 나중에 작성한 선택자

코드에서 아래 쪽에 쓴 코드 일수록 우선순위가 높다.

.address {
    font-size: 1em;
}

.address {
  font-size: 2em;
}

따라서, 코드에서 아래 쪽에 쓰인 .address의 font-size: 2em;이 적용된다.

※ 페이지 기본 속성

개발자 도구(F12키)를 열어보면 user agent code라는 것이 나오는데 우리가 만든 style.css보다 우선 순위가 낮다.

간단히 말하자면, 브라우저의 기본 시트는 우리가 만든 css로 덮어씌울 수 있음을 말한다.

---

스타일 우선순위에 대해 알아봤으니 다음은 상속에 대해 알아보자.

2. 스타일 상속

상속

CSS에서 부모 요소에 적용된 특정 스타일이 자식 요소에게 자동으로 전달되는 현상을 ‘상속’이라고 한다.

즉, 자식이 명시적으로 스타일을 정의하지 않아도, 부모의 스타일을 그대로 물려받게 된다.

상속 예시

아래와 같은 코드에서 바깥쪽 태그를 부모요소, 내부의 태그를 자식 요소라고 한다.

<div>
	<div>
    </div>
</div>

 <div style="background-color: skyblue;">
  부모 요소
  <p>자식 요소 </p>
</div>

위 코드에서 p 태그는 color를 따로 지정하지 않았지만, 부모

에 지정된 color: skyblue;를 자동으로 상속받아 하늘색으로 렌더링된다.

마무리 정리

CSS에서 Cascading은 스타일 우선순위와 상속을 기반으로, 하나의 요소에 충돌하는 여러 스타일 중 최종적으로 어떤 스타일이 적용될지를 결정하는 핵심 원칙이다.

원하는 스타일이 적용되지 않는다면, 명시도 계산, 작성 순서, 상속 여부를 반드시 체크해봐야 한다.

특히 실무에선 라이브러리 스타일 덮어쓰기, 컴포넌트 스타일 꼬임, 전역 CSS 충돌 같은 문제들이 대부분 이 Cascading 구조에서 발생한다는 걸 기억해둬야한다.