WeniVooks

CSS 상속

1. 상속(Inheritance)

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

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

상속은 명시적으로 설정된 스타일보다 우선순위가 낮습니다.

1.1 상속 제어

CSS에서는 상속을 세밀하게 제어할 수 있는 여러 가지 속성 값을 제공합니다.

• inherit: 선택한 요소에 적용된 속성값을 부모와 동일하게, 즉 상속받게 합니다. 주로 상속되지 않는 속성을 강제로 상속받게 할 때 사용합니다.
• initial: 브라우저 기본 스타일 속성을 따르게 합니다. 특정 속성을 브라우저 기본 값으로 리셋하고 싶을 때 유용합니다.
• unset: 속성을 자연 값으로 합니다. 해당 속성이 자연적으로 상속되는 속성이면 inherit처럼, 아니면 initial처럼 작동합니다.
• revert: 캐스케이딩 단계에서 현재 적용된 스타일을 취소하고 이전 단계의 스타일로 돌아갑니다.
• all: 모든 속성에 대해 한 번에 상속 값을 지정할 수 있습니다.

1.2 form 요소의 특별한 상속 동작

button, input과 같은 form 관련 태그들은 일반적인 상속 규칙을 따르지 않는 경우가 많습니다. 이는 브라우저별로 이미 적용된 기본 스타일이 있기 때문입니다.

form 요소에 상속을 적용하려면 명시적으로 inherit 값을 사용해야 할 수 있습니다. 또는 CSS 리셋을 사용하여 브라우저의 기본 스타일을 초기화한 후 스타일을 적용할 수 있습니다.

이와같은 상속을 통해 코드 효율성을 크게 높일 수 있습니다. 상위 요소에 스타일을 한 번만 적용하면 하위 요소들에 자동으로 적용되어 불필요한 코드 중복을 줄일 수 있습니다. 이는 CSS 파일의 크기를 줄이고, 로딩 시간을 단축시키는 데 도움이 됩니다. 또한 웹사이트 전체의 디자인 일관성을 유지하는 데 도움이 됩니다. 예를 들어, body 태그에 기본 폰트를 지정하면 모든 텍스트 요소에 동일한 폰트가 적용되어 통일된 디자인을 쉽게 구현할 수 있습니다. 자연스레 유지보수 측면에서도 유용합니다. 상위 요소의 스타일만 변경하면 그 아래의 모든 요소들의 스타일도 함께 변경되기 때문에, 웹사이트의 전체적인 스타일을 쉽고 빠르게 수정할 수 있습니다. CSS 상속을 잘 이해하고 활용하면, 더 효율적이고 일관성 있는 웹 디자인을 구현할 수 있습니다.

그러나 모든 속성이 상속되는 것은 아니며, 때로는 원하지 않는 스타일이 상속될 수도 있다는 점을 항상 유념해야 합니다. 따라서 CSS 상속의 특성을 잘 이해하고, 필요에 따라 상속을 제어하는 방법을 숙지하는 것이 중요합니다.

/* 기본 크기 */
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 * *;
}

<section>
  <h1>section h1</h1>
  <section>
    <h1>section section h1</h1>
    <section>
      <h1>section section section h1</h1>
    </section>
  </section>
</section>

<section>
  <h1>section h1</h1>
  <section>
    <h1>section section h1</h1>
    <section>
      <h1>section section section h1</h1>
    </section>
  </section>
</section>