CSS - Cascading

HTML Element는 여러 스타일의 영향을 받을 수 있으며 우선순위에 의해 적용되는 스타일이 정해지는 것을 캐스케이딩이라고 한다.

CSS의 정식 명칭이 Cascading Style Sheets인 만큼, 캐스케이딩의 원리가 중요하게 적용된다.

- cascading : 계단식의 작은 폭포이다.

캐스케이딩은 다음의 두 원칙을 통해 어떤 요소에 스타일을 적용할지 결정한다.

1. 스타일 우선순위
2. 스타일 상속

---

1. 스타일 우선순위

스타일요소는 각각 우선순위를 가지고 있으며 우선순위가 가장 높은 스타일이 적용된다.

다음의 세가지 요소를 통해 우선순위가 결정된다.

1. 중요도
2. 명시도
3. 코드 순서

 

① 중요도

• 중요도는 스타일이 선언된 위치에 따라서 우선순위를 매기는 것.
• [ 작성자 스타일 시트 > 사용자 스타일 시트 > 사용자 도구 스타일 시트(ex-웹브라우저) ] 순서로 우선순위가 매겨짐.
• 중요도를 올리기 위해서는 CSS선언부 뒤로 "!important" 를 붙인다.

body {
  margin: 0;
  background-color: #000 !important;
}

 

important가 적용된 스타일 시트의 중요도 :

[ !important작성자 스타일 시트 > !important사용자 스타일 시트 >

작성자 스타일 시트 > 사용자 스타일 시트 > 사용자 도구 스타일 시트 ]

 

② 명시도

• 명시도는 셀렉터가 가리키는 것이 명확할수록 우선순위를 높게 주는 것.
• [ 인라인 > id > class > 태그 ] 순서로 우선순위가 매겨짐.
• https://specificity.keegan.st/  해당 링크에서 점수를 계산해볼 수 있다.

        ∵

        인라인 : 하나의 태그에만 적용.

        id : 문서 내 하나의 태그에만 적용

        class : 여러 태그에 적용

         태그 : 모든 태그에 적용

 

③ 코드 순서

• 소스코드의 가장 마지막에 작성된 속성의 우선순위를 높게 주는 것.

 

---

2. 스타일 상속

부모의 스타일을 자식요소가 따라가는 것을 의미.

ex)

* html

<div class="a">
  부모 요소
  <div class="b">
    자식 요소
  </div>
</div>

----------------------------------------

* css

.a{
    background-color: pink;
}

 

결과) 부모요소에만 background-color를 주었으나, 자식요소도 동일한 배경색이 적용되었다.

 

 

참조:

https://victorydntmd.tistory.com/190

https://velog.io/@bami/CSS-Cascading