CSS : 캐스케이드 (Cascade) : 스타일 적용 우선순위

GPT 생성 이미지

목차

1. CSS Cascade란?

2. 00

3. 00

---

1. CSS Cascade란?

캐스케이드란 '계단식'이라는 뜻으로, 여러 규칙이 적용될 때 우선 순위를 단계별로 나누어 최종 스타일을 결정하는 과정이다.

하나의 요소에 여러 규칙이 적용되어 충돌할 때, 브라우저는 정해진 기준에 따라 실제 적용되는 스타일을 정한다.

gpt 생성 이미지

 

---

2. 캐스케이드 우선순위 결정 기준

1. 스타일 시트의 출처와 종류

• 인라인 스타일 (Inline Style)
  : HTML 요소에 직접 작성된 style 속성의 스타일이 가장 높은 우선순위를 가진다.
• 외부 및 내부 스타일 시트 (External/Internal Stylesheet)
  : <style> 태그 내부 및 .css 파일에 작성된 스타일이 다음 순위를 가진다.
• 브라우저 기본 스타일 (User Agent Stylesheet)
  : 브라우저의 기본 적용 스타일이 가장 낮은 순위를 가진다.

 

2. 코드 상의 순서

• 나중에 작성된 스타일이 앞선 스타일을 덮어쓴다.
• 동일한 선택자, 명시도 점수를 가진 규칙이라면, 코드 내에서 아래에 위치한 스타일이 적용된다.

 

3. 선택자의 명시도 (Specificity)

• 선택자의 구성으로 명시도가 지정되어 우선순위를 결정할 수 있다.
• 명시도는 크게 아이디, 클래스, 속성, 가상 클래스, 요소/가상 요소의 개수로 계산된다.

https://specificity.keegan.st/

Specificity Calculator

 

이런 사이트에서 명시도 점수 계산 할 수 있지만 굳이 외우면서 할 필요는 없다.

자연스럽게 익히게 된다.

 

---

3. 중요도 강제 !

• CSS 규칙에 !important를 붙이면 일반적인 캐스케이드 규칙보다 우선 적용된다.
• !important가 충돌하면 위의 규칙이 다시 적용된다.
• 유지보수에 어려움을 줄 수 있으므로, 꼭 필요한 경우에만 사용하는 것이 좋다.

 

 

 

 

참고

codeit