WeniVooks

1. 상속(Inheritance)

CSS 상속은 부모 요소에 적용된 스타일 속성이 자식 요소에게 전달되는 메커니즘을 말합니다. 부모 요소의 속성을 상속받고, 자식 요소에게도 해당 속성을 상속합니다. 따라서 스타일이 HTML 문서의 계층 구조를 따라 "흘러내리는" 방식으로 적용됩니다. 상속을 통해 전체적인 디자인의 일관성을 유지하면서도 코드의 중복을 줄일 수 있습니다.

모든 CSS 속성이 상속되는 것은 아닙니다. 일반적으로 텍스트 관련 속성들(color, font-family, font-size 등)은 상속되지만 레이아웃 관련 속성들(width, height, margin, padding, border 등)은 상속되지 않습니다.

위 코드에서 color는 상속되는 속성이기 때문에 자식요소들은 color : red; 속성이 적용됩니다. 반면 border는 상속되는 속성이 아니기 때문에 자식요소들은 border 속성이 초깃값으로 설정됩니다.

상속은 명시적으로 설정된 우선순위가 낮습니다. 부모 요소로 받은 속성값보다 명시적으로 작성한 속성값이 우선수위가 높아 적용되며, 해당 속성값이 자식 요소에게 상속됩니다.

1.1 상속 제어

CSS에서는 상속을 제어할 수 있는 여러 속성 값을 제공합니다. 상속되는 속성을 받지않고 초기값을 갖도록 하거나, 상속되지 않는 속성을 상속받을 수 있습니다.

• inherit: 선택한 요소에 적용된 속성값을 부모와 동일하게, 즉 상속받게 합니다. 주로 상속되지 않는 속성을 강제로 상속받게 할 때 사용합니다.
• initial: 요소의 모든 속성을 각 속성의 초기값으로 변경합니다.
• unset: 해당 속성이 자연적으로 상속되는 속성이면 inherit처럼, 아니면 initial처럼 작동합니다.
• revert: 스타일 규칙이 없었을 때 적용되었을 상태로 복구합니다.

initial에서 설정되는 초기값은 브라우저에서 제공하는 사용자 에이전트 스타일이 아닌 CSS 명세에서 작성된 속성의 초기값을 나타냅니다.

1.2 전체 상속 제어

기존에 적용된 스타일에 대하여 상속을 all 속성에 inherit, initial, unset, revert 값을 지정하여 상속을 어떻게 제어할지 작성할 수 있습니다. all 속성 뒤에 작성된 스타일은 제어되지 않습니다.

/* 기본 크기 */
h1 {
  font-size: * * 2em * *;
}
h2 {
  font-size: * * 1.5em * *;
}
h3 {
  font-size: 1.17em;
}
 
/* x: article, aside, nav, section 의 속기형 */
x h1 {
  font-size: * * 1.5em * *;
}
x x h1 {
  font-size: * * 1.17em * *;
}
x x x h1 {
  font-size: * * 1em * *;
}
x x x x h1 {
  font-size: * * 0.83em * *;
}
x x x x x h1 {
  font-size: * * 0.67em * *;
}

/* 기본 크기 */
h1 {
  font-size: * * 2em * *;
}
h2 {
  font-size: * * 1.5em * *;
}
h3 {
  font-size: 1.17em;
}
 
/* x: article, aside, nav, section 의 속기형 */
x h1 {
  font-size: * * 1.5em * *;
}
x x h1 {
  font-size: * * 1.17em * *;
}
x x x h1 {
  font-size: * * 1em * *;
}
x x x x h1 {
  font-size: * * 0.83em * *;
}
x x x x x h1 {
  font-size: * * 0.67em * *;
}