[Weekly Paper] CSS Cascading

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

 

CSS는 Cascading Style Sheet의 약자로, 'Cascading'은 '폭포'처럼 규칙이 위에서 아래로 흐르며 합쳐지는 것을 의미합니다.

 

우선순위에서는 인라인 스타일이 가장 높은 우선순위를 가지며, 코드 내에서는 나중에 작성된 규칙이 먼저 적용됩니다. 또한, 선택자의 특이성에 따라 규칙의 우선순위가 결정됩니다.

 

일부 스타일은 부모 요소에서 자식 요소로 상속되기도 하며, 이 상속된 값도 Cascading에 영향을 미칩니다. 예를 들어, 부모 요소의 `color` 속성은 자식 요소에 상속되지만, `margin` 속성은 상속되지 않습니다.

 

마지막으로 특정 스타일에 `!important`를 사용하면 특이성, 순서와 관계없이 가장 높은 우선순위로 적용됩니다. 그러나 `!important`는 코드 유지보수를 어렵게 할 수 있으므로, 꼭 필요할 때만 사용하는 것이 좋습니다.

---

기본적으로는 `<h1>`의 글자 색상이 #000으로 적용되지만 `<div>`에 !important를 사용하면 `<h1>`의 글자 색상이 #FFF으로 적용됩니다.

// !important 사용 예시
div {
  color: #FFF;
}

div h1 {
  color: #000;
}


// !important 사용
div {
  color: #FFF !important;
}

div h1 {
  color: #000;
}