[CSS] Chapter 02. Cascading 원칙 (적용 우선순위)

Cascading : 폭포같은, 계단식의, 위에서 아래로 흐르는, 연속적인

CSS 개발을 할 때, 흔히 겪을 수 있는 실수 : 요소에 CSS를 줬지만 적용되지 않을 때

 

1. 스타일 우선순위
2. 스타일 상속

 

1. 스타일 우선순위

• 선언된 위치 : 동일한 스타일이라도 선언된 곳에 따라 우선순위가 정해진다
  • 브라우저 기본 스타일 < 외부 스타일(External) < 내부 스타일(Embedded) < inline 스타일
• Specificity(명시도) : 적용 범위가 더 구체적일수록 우선적으로 적용된다.
  • tag 스타일 < class 스타일 < id 스타일 < inline 스타일
    • 단순 tag로 지정된 스타일 < id/class/attribute 등 직접 지정한 스타일
    • id는 calss보다 우선이다.
    • 부모로부터 상속받은 속성은 내가 지정한 속성이 따로 없을 때만 적용된다.
      • 즉, 내 요소에서 구체적으로 CSS rule을 정해주면 부모의 것이 아닌 나의 것을 따른다.
• 코드  위치 : 소스코드의 순서가 뒤에 있으면 덮어쓴다. (제일 마지막에 선언된 코드)

 

2. 스타일 상속

• 부모 요소에 있는 스타일 속성들이 자식 요소로 전달된다.
  
  • 자식 요소에서 재 정의 할 경우, 부모의 스타일을 덮어쓴다.
• 상속이 되지 않는 속성도 있다. (예: 배경 이미지, 배경 색 등)

 

상속 제어를 위한 전역 속성 값

• CSS 속성의 값(value)으로 아래 특수값을 지정해주면, 상속되어 적용되는 CSS를 의도적으로 끊어줄 수 있음
• initial : CSS를 기본값(브라우저 초기값)으로 지정
  • 예) color: inital; all: inital;
• inherit : 모든 rule을 무시하고, 무조건 상속을 받아 부모의 값을 따라가고자 할 때
  • 예) color: inherit;  color 속성은 무조건 부모를 따라가게 된다.
• unset
  • 지금까지 영향받은 여러 CSS를 없애고, 깔끔하게 초기화하고 싶을 때 사용
  • 부모로부터 상속받을 값이 존재할 때 : inherit
  • 부모로부터 상속받을 값이 없을 때 : initial