CSS -캐스케이드, Cascading 이란?

캐스케이드, Cascading 이란?

 

css에는 캐스케이드 라는 개념이 있다.

Cascade. 작은 폭포, 여러 단으로 된 폭포 라는 뜻이 있다.

 

그럼 css에서의 캐스케이드는 어떤 의미일까?

 

원래의 뜻처럼 폭포처럼 규칙에 따라 CSS규칙을 적용하는 것을 뜻한다.

"종속"이라고 번역을 하기도 하며, 우선순위에 따라 속성이 적용된다.

 

 

---

1. 시트별 우선순위

style.css > 브라우저 기본 스타일시트

- 두개에 동시에 동일한 선택자가 존재하면, 우리가 작성한 코드의 우선순위가 높다.

즉, 디폴트로 제공하는 것에 우리가 원하는 대로 추가를 했다고 생각하면 되지 않을까?

 

2. 코드순서

위쪽 < 아래쪽

- 위에서 아래로 흐르는 느낌으로 동일한 속성값이 있다면 가장 아래쪽의 코드가 반영이된다. 

예를들어 하나의 클래스에 1px을 반영했다가 아래쪽에 동일한 클래스에 2px을 중복으로 반영했다면, 아랫쪽의 2px이 적용되는식이다.

 

3. 명시도

아이디 개수, 클래스 개수, 태그 개수로 명시도 표시.

- 아이디1 태그1인 경우 1,0,1

- 클래스1, 태그1인 경우 0,1,1

--> 위의 경우 첫번째가 1 0 1로 우선순위가 더 높다.

캐스케이드 우선순위 조회하는 사이트에서도 확인해볼 수 있다.

https://specificity.keegan.st/

4. 상속

부모 태그의 css규칙 중 일부 속성은 자손들에게 상속이 된다.

-  color, font-family, font-size, font-weight, line-height, text-align등

- MDN 사이트 - CSS 속성 페이지 내에 Formal definition이라는 섹션 - inherited에 상속 여부를 볼 수 있다. 

* 현재 웹페이지에서 상속 속성을 보고 싶다면 개발자도구 > Style > Inherited from .. 에서 진하게 표기된 것으로 상속된 속성을 볼 수 있다. (왼쪽 다크모드는 한글버전)

 

5. 상속 속성 우선순위

조상태그에서 모두 계산된 상태로 우선순위가 적용. 가까운 조상의 속성의 우선도가 높음.

<div><p><a>텍스트</a></p></div>

이 경우 각각의 태그에 모두 글자 색이 지정되어 있다면 텍스트는 가장 가까운 a태그의 색이 반영된다.