CSS Cascading

**지난 주차의 위클리 페이퍼이지만 블로그 이사로 인해서 새롭게 올리게 되었습니다.**

내용은 유사하지만, 조금 더 보완해서 게시했습니다!

 

- CSS의 Cascading에 대해 설명해주세요 

 

Cascading이란?

: 계단식으로 내려오는 형태의 폭포를 의미

CSS에서는 여러 CSS규칙이 적용될 때 '순서'에 따라 합쳐지는 것을 의미한다.

상위 요소의 스타일이 하위 요소로 내려오며 상속되는 특징을 계단식으로 내려오는 폭포에 빗대어 사용하는 것 같다.

 

상위 요소(우선 순위)를 결정 짓는 기준 3가지

1. 스타일 시트의 종류

어떤 스타일 시트의 스타일이냐에 따라 더 높은 우선순위를 가진다.

 

[ 프로그래머가 작성한 stylesheet ] > [ user agent stylesheet (웹에서 제공하는 기본 스타일) ]

 

2. 코드상의 순서

같은 선택자를 쓰는 경우, 나중에 씌여진 코드가 우선 순위가 더 높다.

 

3. 선택자의 명시도 (Specificity)

어떤 선택자를 쓰느냐에 따라 다른 점수를 얻고, 점수가 높을 수록 우선순위가 높아진다.

 

1) 유형 선택자 ( h1 등 ) 및 의사 요소 ( :before 등)
2) 클래스 선택자, 속성 선택자 ( [type = "radio"] ), 의사 클래스 ( :hover 등)
3) ID 선택자 (#example 등)

기타) 전역 선택자 (*), 조합자 (+, >, ~, " ", ||) 및 부정 의사 클래스 ( :not( ))은 명시도에 영향을 주지 않는다.

 

사실 우선순위에 위치한 선택자들을 자세히 살펴보면,

왜 우선순위가 높고 낮은지에 대해 조금은 감이 올 것이라고 생각한다. 

 

이때 2번, 3번의 점수가 아주 높아도1번 선택자를 사용하는 것이 우선순위가 더 높다.

100자리 숫자, 10의 자리 숫자, 1의 자리 숫자로 생각하면 우선순위 파악이 더 쉬울 것이다.

 

내가 사용한 선택자의 우선순위를 확인하고 싶다면, VS Code에서 선택자에 마우스를 hover했을 때 확인 가능하다.

 

!important
위에서 이야기한 우선순위와 무관하게 가장 높은 우선순위를 가지게 해주는 이른바 치트키이다.

⚠️ MDN 공식 문서의 내용에 따르면, !important를 사용하는 건 자연스러운 명시도 규칙을 깨뜨려 디버깅을 더 어렵게 만든다고 합니다. (되도록 사용하지 말 것)