상속

CSS 팟캐스트 - 005: 상속

요소가 버튼처럼 보이도록 일부 CSS를 작성했다고 가정해 보겠습니다.

<a href="http://example.com" class="my-button">I am a button link</a>

.my-button {
  display: inline-block;
  padding: 1rem 2rem;
  text-decoration: none;
  background: pink;
  font: inherit;
  text-align: center;
}

그런 다음 class 값이 .my-button인 기사에 링크 요소를 추가합니다. 하지만 한 가지 문제가 있습니다. 텍스트가 예상한 색상과 다릅니다. 왜 그런 것일까요?

일부 CSS 속성은 값을 지정하지 않으면 상속합니다. 이 버튼의 경우 이 CSS에서 color를 상속했습니다.

article a {
  color: maroon;
}

이 강의에서는 그 이유와 상속이 CSS 작성을 줄이는 데 도움이 되는 강력한 기능인 이유를 알아봅니다.

상속 흐름

다음 HTML 스니펫을 사용하여 상속이 작동하는 방식을 살펴보겠습니다.

<html>
  <body>
    <article>
      <p>Lorem ipsum dolor sit amet.</p>
    </article>
  </body>
</html>

루트 요소 (<html>)는 문서의 첫 번째 요소이므로 아무것도 상속받지 않습니다. HTML 요소에 CSS를 몇 개 추가하면 문서를 하위로 전파하기 시작합니다.

html {
  color: lightslategray;
}

color 속성은 기본적으로 다른 요소에 상속됩니다. html 요소에는 color: lightslategray가 있으므로 색상을 상속할 수 있는 모든 요소의 색상은 이제 lightslategray입니다.

body {
  font-size: 1.2em;
}

p {
  font-style: italic;
}

<p>에만 기울임꼴 텍스트가 표시됩니다. 가장 깊이 중첩된 요소이기 때문입니다. 상속은 아래쪽으로만 흐르고 상위 요소로 다시 돌아가지 않습니다.

기본적으로 상속되는 속성은 무엇인가요?

모든 CSS 속성이 기본적으로 상속되는 것은 아니지만 많은 속성이 상속됩니다. 참고로 다음은 기본적으로 상속되는 속성의 전체 목록으로, 모든 CSS 속성의 W3 참조에서 가져온 것입니다.

상속 작동 방식

모든 HTML 요소에는 기본적으로 초깃값이 정의된 모든 CSS 속성이 있습니다. 초깃값은 상속되지 않은 속성으로, 계단식에서 해당 요소의 값을 계산하지 못하는 경우 기본값으로 표시됩니다.

상속될 수 있는 속성은 아래로 하향 전파되고 하위 요소는 상위 요소의 값을 나타내는 계산된 값을 받습니다. 즉, 상위 요소의 font-weight가 bold로 설정되어 있으면 font-weight가 다른 값으로 설정되거나 사용자 에이전트 스타일시트에 해당 요소의 font-weight 값이 있지 않는 한 모든 하위 요소가 굵게 표시됩니다.

상속을 명시적으로 상속하고 제어하는 방법

상속은 예기치 않은 방식으로 요소에 영향을 줄 수 있으므로 CSS에는 이를 위한 도구가 있습니다.

inherit 키워드

inherit 키워드를 사용하여 모든 속성이 상위 요소의 계산된 값을 상속하도록 할 수 있습니다. 이 키워드를 사용하는 유용한 방법은 예외를 만드는 것입니다.

strong {
  font-weight: 900;
}

이 CSS 스니펫은 모든 <strong> 요소를 기본 bold 값(font-weight: 700와 같음) 대신 900의 font-weight를 갖도록 설정합니다.

.my-component {
  font-weight: 500;
}

.my-component 클래스는 font-weight를 500로 대신 설정합니다. .my-component 내부의 <strong> 요소를 font-weight: 500도 추가하려면 다음을 추가합니다.

.my-component strong {
  font-weight: inherit;
}

이제 .my-component 내부의 <strong> 요소에는 500의 font-weight가 있습니다.

이 값을 명시적으로 설정할 수도 있지만 나중에 inherit를 사용하고 .my-component의 CSS가 변경되면 <strong>가 자동으로 최신 상태를 유지하도록 할 수 있습니다.

initial 키워드

상속은 요소에 문제를 일으킬 수 있으며 initial는 강력한 재설정 옵션을 제공합니다.

앞서 CSS에는 모든 속성에 기본값이 있다는 것을 배웠습니다. initial 키워드는 속성을 초깃값인 기본값으로 다시 설정합니다.

aside strong {
  font-weight: initial;
}

이 스니펫은 <aside> 요소 내의 모든 <strong> 요소에서 굵게 가중치를 삭제하고 대신 일반 가중치(초깃값)로 만듭니다.

unset 키워드

속성이 기본적으로 상속되는지 여부에 따라 unset 속성은 다르게 작동합니다. 속성이 기본적으로 상속되는 경우 unset 키워드는 inherit와 동일합니다. 속성이 기본적으로 상속되지 않는 경우 unset 키워드는 initial와 같습니다.

기본적으로 상속되는 CSS 속성을 기억하는 것은 어려울 수 있으므로 unset는 이러한 맥락에서 도움이 될 수 있습니다. 예를 들어 color는 기본적으로 상속되지만 margin는 상속되지 않으므로 다음과 같이 작성할 수 있습니다.

/* Global color styles for paragraph in authored CSS */
p {
  margin-top: 2em;
  color: goldenrod;
}

/* The p needs to be reset in asides, so you can use unset */
aside p {
  margin: unset;
  color: unset;
}

이제 margin가 삭제되고 color가 상속된 계산된 값으로 돌아갑니다.

unset 값을 all 속성과 함께 사용할 수도 있습니다. 위의 예로 돌아가서, 전역 p 스타일에 몇 가지 속성이 추가로 있으면 어떻게 될까요? margin 및 color에 대해 설정된 규칙만 적용됩니다.

/* Global color styles for paragraph in authored CSS */
p {
    margin-top: 2em;
    color: goldenrod;
    padding: 2em;
    border: 1px solid;
}

/* Not all properties are accounted for anymore */
aside p {
    margin: unset;
    color: unset;
}

aside p 규칙을 all: unset로 변경하면 나중에 p에 적용되는 전역 스타일은 중요하지 않지만 항상 설정 해제됩니다.

aside p {
    margin: unset;
    color: unset;
    all: unset;
}

학습 내용 확인하기

상속에 관한 지식 테스트

다음 중 상속 가능한 속성은 무엇인가요?

animation
애니메이션은 하위 요소로 전달되지 않습니다.
font-size
🎉
color
🎉
text-align
🎉
line-height
🎉

상속할 항목이 없고 initial처럼 동작하지 않는 한 inherit처럼 동작하는 값은 무엇인가요?

reset
유효한 값이 아닙니다. 다시 시도하세요!
unset
🎉
superset
유효한 값이 아닙니다. 다시 시도하세요!

자료