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

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

1. CSS Cascading

• 겹치는 스타일 규칙들이 단계를 거쳐 하나의 스타일로 결정되는 과정
• HTML 요소의 스타일 적용은 우선순위에 따라 Overriding(재정의)됨

2. Cascading 우선순위

• 상속 → 스타일시트 → !important 순서로 재정의됨

3. CSS 상속

• 부모 요소는 자신의 스타일을 자식 요소에게 상속할 수 있음
• 속성에 따라 상속 여부가 다름(주로 글자 관련 CSS에서 상속 발생)
• 속성값에 범용 속성값을 넣어 상속을 제어할 수 있음
  • inherit : 부모 요소의 CSS 상속
  • initial : CSS 초깃값 적용
  • unset : 상속 여부에 따라 inherit / initial 동작
  • revert : 브라우저 기본값(유저 에이전트 스타일시트) 적용

4. 스타일시트 내 우선순위

• Specificity(명시도)와 선언 순서를 통해 우선순위를 결정함

4-1. 명시도

• 요소와의 연관 정도
• 선택자 조합에서 상위 선택자의 개수가 많을 수록 우선순위가 높음
• 하 : 요소, 의사 요소
• 중 : 클래스, 속성, 의사 클래스(is & where 예외)
• 상 : ID

4-2. 선언 순서

• 명시도가 동일할 경우, 선언 순서가 늦을 수록 우선순위가 높음
• 처음 : User Agent 스타일시트(브라우저 스타일시트)
• 중간 : User 스타일시트(사용자 정의 스타일시트)
• 마지막 : Auther 스타일시트(개발자 스타일시트)
  • layered 스타일(외부 CSS 파일)
  • unlayered 스타일(HTML 내 style 요소)
  • inline 스타일(요소 내 style 속성)

5. !important

• 최우선으로 특정 속성을 적용시키는 키워드
• 목표하는 속성의 속성값 뒤에 !important를 추가

6. 참고 자료

• MDN 개발 문서(계단식 및 상속)
• MDN 개발 문서(CSS 캐스캐이딩)
• 물고기로 알아보는 명시도
• 케스케이딩 계산기