[CSS] CSS의 Cascading

Q. 질문

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

 (코드잇 스프린트 위클리 페이퍼 #1)

 

A. 답변

CSS 를 적용하다보면 겹치는 속성이 발생할 수 있다.

 

개발자 도구를 사용해 임의로 코드잇 페이지에 있는 컴포넌트의 배경 색상을 blue 와 red 로 변경하여 속성이 겹치도록 하였다.

그렇다면 화면에서는 blue 와 red 중에 어떤 것이 반영이 될까?

 

바로 이러한 상황에서 CSS 규칙들을 어떻게 합쳐 줄지 정해주는 방식을 CSS 의 Cascading 이라고 한다.

backgorund-color 속성 blue 와 red 로 변경 및 추가

 

 

Cascading 이란?

그렇다면 Cascading  는 정확히 무엇일까? 

 

그 전에 CSS 의 약자는 Cascading Style Sheets (CSS) 이다.  이를 한국말로 직역하자면 계단식 스타일 시트 라는 의미이다.

 

즉, CSS 는 계단식 스타일 시트로 규칙을 순서에 따라 계단식으로 합치게 되며 이를 Cascading 라고 한다.

그래서 우리가 개발자 도구에서 보는 CSS 의 순서는 Cascading 되는 순서로, 위에 있는 CSS 규칙이 아래에 있는 것을 덮어씌운다.

 

사진에 있는 내용을 보면 blue 가 red 보다 위에 있다.

그래서 blue 속성이 밑에 있는 것을 덮어쓰게 되어, 실제로 적용되는 배경색은 blue 가 된다.

Cascading 결과

 

CSS의 Cascading
여러 CSS 규칙들이 적용될 때, 순서에 따라서 합치는 것

 

Cascading 적용 순서

그러면 어떻게 하면 Cascading 순서를 설정할 수 있을까?

 

우선 순위가 높은 순서는 간략하게 다음과 같다.

1. 인라인 속성
2. 나중에 작성한 선택자
3. 선택자의 명시도
4. 페이지 기본 속성

 

1. 인라인 속성

인라인 속성은 HTML 태그에 바로 적용되는 속성으로 아래 사진 처럼 바로 <div> 태그에 style 속성을 넣는 것으로

우선 순위가 가장 높다.

인라인 속성

 

2. 나중에 작성한 선택자

같은 선택자라도 파일 내에서 나중에 작성한 선택자가 우선 순위가 된다.

 

예를 들어 아래와 같은 코드가 있을 때, 실제로 적용되는 것은 코드상으로 나중에 적은 blue 가 적용이 된다.

.test {
  background-color: red;
}

.test {
  background-color: blue;
}

 

 

3. 선택자의 명시도

선택자의 명시도가 높으면 우선 순위가 높아진다.

 

명시도
주어진 CSS 선언에 적용되는 가중치(weight)
[출처] MDN - 명시도

 

명시도는 선택자의 id 가 몇 개 있는지, class 가 몇 개 있는지, 태그가 몇 개 있는 지에 따라 점수를 측정해 우선 순위가 정해진다. 

이러한 명시도는 아래 사이트에서 직접 계산해 볼 수 있다.

Specificity Calculator

 

내 티스토리 블로그를 예시로 들자면

위에는 .cover-card__item 과 .thumbnail 이라는 class 가 2개 있고

아래는 .cover-card__item 이라는 class 가 1개 있어

class 의 개수가 2개인 것이 명시도가 높기 때문에 우선 순위가 높으며 개발자 도구에서도 위에 있는 것을 확인할 수 있다.

명시도 순서

 

4. 페이지 기본 속성

페이지의 기본 속성으로 개발자 도구에서 보면 user agent stylesheet 가 적힌 부분이 바로 페이지 기본 속성이다.

기본 속성 이므로 쉽게 덮어쓸 수 있으며 우선 순위가 낮다.

페이지 기본 속성

 

결론

CSS 의 Cascading 란 CSS 속성이 적용 되는 순서이며,

이를 잘 알고 있으면 내가 적용한 속성이 왜 적용되지 않았는지 또한 어떻게 하면 잘 적용되는 지 알 수 있게 된다