CSS의 cascading은 스타일 규칙이 어떻게 적용되는지를 설명하는 개념.

Cascading이라는 용어는 “계층적”이라는 의미를 갖고 있음.

CSS에서는 스타일 규칙이 적용되는 우선 순위에 따라 “상속”되거나 “재정의”됨.

CSS의 Cascading이 갖는 개념

1. 우선순위(Specificity):

   스타일 규칙의 우선순위는 해당 스타일이 적용되는 대상에 대한 선택자의 특정성에 따라 결정됨.

   ID선택자가 클래스 선택자보다 우선되고, 클래스 선택자가 요소 선택자보다 우선됨.

   이렇게 스타일 규칙의 특정성이 높을수록 우선순위가 높아지며, 높은 우선순위를 갖는 스타일이 적용됨.

2. 중요도(Importance):

   !important 라는 특별한 키워드를 사용하여 스타일 규칙에 우선순위를 부여할 수 있음.

   !important 가 지정된 스타일은 다른 모든 스타일보다 우선됨.

3. 소스 순서(Scource Order):

   CSS파일에서 스타일 규칙이 선언된 순서에 따라 우선순위가 결정됨.

   나중에 선언된 스타일이 이전에 선언된 스타일보다 우선됨.

   이는 같은 특정성과 중요도를 갖는 스타일 규칙에 대한 우선순위를 결정하는 데 사용됨.

Cascading 개념을 통해 웹 개발자는 스타일을 조정하고 원하는대로 레이아웃을 제어할 수 있음.

!important 를 남용하거나 소스 순서를 의도적으로 조작하는 것은 유지보수를 어렵게 만들 수 있음.

요약:

Cascading은 CSS에서 스타일 규칙이 적용되는 우선순위를 나타내는 개념.

이는 선택자의 특정성, 중요도 및 소스 순서에 따라 스타일이 결정됨.

한 요소에 3가지 스타일링을 적용했을 경우 텍스트는 어떤 색상이 될까?

/* 예시 스타일 규칙 */
.element {
color: red; /* 우선순위: 1 */
}

#unique-element {
color: blue; /* 우선순위: 2 */
}

.element {
color: green; /* 우선순위: 3 */
}

이 경우, #unique-element는 id 선택자를 사용하여 선언되었으므로 가장 높은 우선순위임.

따라서 #unique-element의 텍스트 색상은 파란색.