⭐ CSS Cascading

CSS는 Cascading Style Sheets의 약어이다. CSS의 Cascading은 여러 스타일 규칙이 적용되는 방식을 설명하며, Cascading은 CSS에서 스타일 우선순위와 상속에 관련된 개념을 나타낸다. Cascading은 단어 그대로 계단식이라는 뜻으로, 스타일 규칙이 적용되는 과정이 단계적으로 진행된다는 의미를 가진다.

---

✨ CSS 규칙이 적용되는 환경에 따라 다른 우선순위

① HTML의 head 요소 안의 style

HTML 문서 내부에서 style 태그를 사용하여 스타일을 정의한 경우, 이 스타일 규칙은 가장 높은 우선순위를 가진다. 이는 사용자 정의 스타일로 HTML 문서의 특정 부분에 적용되는 것을 의미한다.

② HTML의 head 요소 안의 style 내부의 @import 문

style 태그 내부에서 @import를 사용하여 외부 CSS 파일을 가져오는 경우, 이 스타일 규칙은 1번과 동일한 우선순위를 가진다.

③ link로 연결된 CSS 파일

HTML 문서의 head 태그 내부에서 <link> 태그를 사용하여 외부 CSS 파일을 연결한 경우, 이 스타일 규칙은 1번과 2번보다 우선순위가 낮다.

④ link로 연결된 CSS 파일 내부의 @import 문

외부 CSS 파일 내부에서 @import를 사용하여 다른 CSS 파일을 가져오는 경우, 이 스타일 규칙은 1번부터 3번까지의 우선순위보다 낮다.

⑤ 브라우저 디폴트 스타일 시트

모든 브라우저는 기본적인 스타일 시트를 가지고 있으며, 이는 HTML 문서에 적용되기 전에 적용된다. 이 스타일 시트는 HTML 문서에서 정의된 스타일보다 우선순위가 가장 낮다.

이러한 우선순위는 CSS 규칙이 충돌하는 경우에 중요하게 작용하여 어떤 스타일이 최종적으로 적용되는지를 결정한다.

✨ Cascading의 세 가지 요소

① 속성의 중요도 (Importance of the Property)

CSS 규칙에는 우선시되는 중요도가 있다. 이 중요도는 다음과 같은 순서로 결정된다.

• 일반
  일반적인 CSS 규칙은 특별한 중요도를 가지지 않는다. 일반적인 우선순위 규칙에 따라 처리된다.

• !important
  CSS 규칙에 !important 키워드를 사용하면 해당 규칙은 다른 모든 규칙보다 우선 처리되어, 최종적으로 적용되는 스타일을 덮어씁니다.

p {
    color: blue !important;
}

p {
    color: red;
}

위 코드와 같은 경우, !important 키워드가 있는 규칙이 우선 처리되어 p 요소의 글자 색은 blue가 된다.

② 선택자의 명시도 (Specificity of the Selector)

특정한 요소를 선택하기 위한 선택자의 명시도가 중요하다. 선택자가 얼마나 구체적으로 요소를 선택하는지를 나타낸다. 일반적인 선택자의 명시도 규칙은 다음과 같다.

🔹 요소 선택자 (Element Selector)
요소의 이름만으로 선택자가 된다. 예를 들어 p는 모든 p 요소를 선택한다.

🔹 클래스 선택자 (Class Selector)
클래스 이름 앞에 점(.)을 붙여 특정 클래스를 선택한다. 예를 들어 .name은 class="name" 속성을 가진 요소를 선택한다.

🔹 ID 선택자 (ID Selector)
ID 이름 앞에 해시(#)를 붙여 특정 ID를 선택한다. 예를 들어 #name은 id="name" 속성을 가진 요소를 선택한다.

[ 명시도 계산 ]

🔹 ID 선택자 명시도 값 : 100
🔹 클래스 선택자 명시도 값 : 10
🔹 요소 선택자 명시도 값 : 1

선택자에 나타나는 각 유형의 값이 합산되어 명시도 값이 클수록 우선순위가 높아진다.

예를 들어 p.name 선택자의 명시도는 11이며(1 + 10), #name 선택자의 명시도는 100이다.

③ 코드 순서 (Source Order)

코드 순서는 Cascading의 중요한 요소 중 하나이다. 동일한 속성에 대한 규칙이 충돌하는 경우, 코드의 순서에 따라 우선순위가 결정된다.

CSS가 위에서 아래로 파싱되기 때문에 더 아래에 위치한 규칙이 더 위에 위치한 규칙보다 우선된다. 즉, 나중에 선언된 규칙이 이전에 선언된 규칙을 덮어쓸 수 있다.

/* 코드 순서: 1 */
p {
    color: blue;
}

/* 코드 순서: 2 */
p {
    color: red;
}

위 코드와 같은 경우, 코드 순서가 2인 두 번째 스타일이 더 나중에 선언되었으므로 p 요소의 글자 색은 red가 된다.