케스케이딩 (Cascading)

"계단식" 형태를 말하는 것으로 CSS (Cascading Style Sheet)의 중요한 특성이다.

CSS는 스타일 속성을 각 태그에 적용할 때, 같은 속성을 여러 번 적용시켰다면,

가장 마지막에 적용되는 (반대로 말하면 우선순위가 높은) 속성이 앞의 설정을 덮어 쓴다.

 

1. 부모 태그 속성을 자식 태그에서 다시 설정하면 덮어 쓴다.

<div class="descripton">

      <h2>Hot item</h2>

      <h1>

              인기 상품을<br>

              확인해 보세요

      </h1>

      <h3>

              가장 핫한 중고거래 물품을

              판다마켓에서 확인해 보세요

      </h3>

 </div>

예를 들어 div에서 폰트 크기를 정했어도,  h1 태그에서 다시 폰트 크기를 정하면  덮어 씌워진다.

 

2. 더 복잡한 태그 (특정하는 정도가 더 강한 태그)에서 설정한 속성이 덮어 쓴다.

 

명시도가 더 높은 태그가 우선 순위가 더 높다.

명시도는 아이디 개수, 클래스 개수, 요소 개수를 순서대로 숫자를 나열해서 점수를 매긴다.

아이디가 클래스 보다 우선 순위가 높고 요소가 많을 수록 우선 순위가 높다.

 

1. h1 : 0 0 1
2. h1.headline: 0 1 1
3. h1#main: 1 0 1
4. h1.large.headline: 0 2 1

아이디 개수가 훨씬 더 높은 점수를 받기 때문에 3번이 가장 명시도가 높다.