CSS 동작 원리, 우선순위와 상속

CSS는 하나의 요소에 여러 스타일이 동시에 적용될 수 있다. 이때 어떤 스타일이 최종적으로 적용될지를 결정하는 규칙이 종속(Cascade) 이다.
그리고 부모 요소의 스타일이 자식 요소에게 자동으로 전달되는 것을 상속(Inheritance) 이라고 한다. CSS는 충돌이 발생할 때 아래 순서로 최종 스타일을 결정한다.

① !important 여부
② 출처 (인라인 > 내부/외부 > 브라우저 기본)
③ 명시도 (ID > 클래스 > 태그)
④ 작성 순서

종속(Cascade)

CSS는 충돌이 발생할 때 아래 세 가지 기준을 순서대로 적용해 최종 스타일을 결정한다.

① 출처(Origin)

스타일이 어디서 왔는지에 따라 우선순위가 달라진다.

② 명시도(Specificity)

출처가 같을 때는 선택자의 명시도(구체성) 가 높은 쪽이 이긴다.
명시도는 선택자의 종류에 따라 점수로 계산한다.

③ 작성 순서

출처와 명시도까지 동일하다면, 나중에 작성된 스타일이 적용된다.

p { color: red; }
p { color: blue; } /* 나중에 작성되었으므로 blue가 적용된다 */

상속(Inheritance)

부모 요소에 적용된 일부 CSS 속성은 자식 요소에게 자동으로 전달된다.

/* body 에 font-family, color 적용하면 자식 요소에게 상속됨 */
body {
  font-family: 'Pretendard', sans-serif;
  color: #333;
}

상속되는 속성 vs 상속되지 않는 속성

모든 속성이 상속되는 것은 아니다.

상속 제어

상속을 명시적으로 제어하고 싶을 때는 아래 키워드를 사용한다.

.child {
  /* 부모의 값을 강제로 상속받는다 */
  color: inherit;
 
  /* 브라우저 기본값으로 되돌린다 */
  color: initial;
 
  /* 상속되는 속성이면 inherit, 아니면 initial로 동작한다 */
  color: unset;
}