CSS에서 스타일 시트 상속은 부모 요소의 스타일 속성을 자식 요소에게 상속시키는 과정을 말합니다. 이를 통해 코드의 반복을 줄이고 유지보수를 쉽게 할 수 있습니다.

기본 상속

모든 요소는 부모 요소의 일부 스타일을 상속받습니다. 예를 들어, 부모 요소의 폰트 크기가 16px이고 자식 요소에 명시적으로 크기가 지정되지 않았다면, 자식 요소는 부모 요소의 폰트 크기를 상속받습니다.

명시적 상속

일부 속성은 명시적으로 상속될 수 있습니다. inherit 키워드는 해당 속성이 부모 요소의 값을 상속받도록 지정하는 데 사용됩니다.

.child {
  font-size: inherit;
}

위 코드에서 inherit 키워드를 사용하면 .child 요소는 부모의 폰트 크기를 상속받습니다.

상속 제어

몇 가지 속성은 상속을 받지 않도록 지정할 수 있습니다. initial 키워드를 사용하면 해당 속성의 기본값으로 재설정됩니다.

.child {
  margin: initial;
}

위 코드에서 .child 요소는 부모의 margin 값을 상속받지 않고 기본값으로 재설정됩니다.

스타일 시트 상속은 CSS 코드를 보다 간결하고 유지보수가 쉽도록 만들어줍니다. 올바르게 사용하면 코드의 가독성과 확장성을 향상시킬 수 있습니다.