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 참조에서 가져온 기본적으로 상속되는 속성의 전체 목록입니다.
- azimuth
- border-collapse
- border-spacing
- caption-side
- 색상
- cursor
- direction
- empty-cells
- font-family
- font-size
- font-style
- font-variant
- font-weight
- 글꼴
- letter-spacing
- line-height
- list-style-image
- list-style-position
- list-style-type
- list-style
- 고아
- 인용문
- text-align
- text-indent
- text-transform
- visibility
- white-space
- 과부
- word-spacing
상속 작동 방식
모든 HTML 요소에는 기본적으로 초기 값으로 정의된 모든 CSS 속성이 있습니다. 초기 값은 상속되지 않는 속성으로, 캐스케이드가 해당 요소의 값을 계산하지 못하면 기본값으로 표시됩니다.
상속할 수 있는 속성은 아래쪽으로 계단식 상속되며 하위 요소는 상위 요소의 값을 나타내는 계산된 값을 가져옵니다.
즉, 상위 요소의 font-weight
가 bold
로 설정된 경우 font-weight
가 다른 값으로 설정되어 있거나 사용자 에이전트 스타일시트에 해당 요소의 font-weight
값이 있는 경우가 아니라면 모든 하위 요소가 굵게 표시됩니다.
상속을 명시적으로 상속하고 제어하는 방법
상속은 예상치 못한 방식으로 요소에 영향을 미칠 수 있으므로 CSS에는 이를 지원하는 도구가 있습니다.
inherit
키워드
inherit
키워드를 사용하여 모든 속성이 상위 요소의 계산된 값을 상속하도록 할 수 있습니다.
이 키워드를 사용하는 유용한 방법은 예외를 만드는 것입니다.
strong {
font-weight: 900;
}
이 CSS 스니펫은 모든 <strong>
요소의 font-weight
를 font-weight: 700
에 상응하는 기본값 bold
대신 900
로 설정합니다.
.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;
}
이해도 확인
상속 지식 테스트
다음 중 기본적으로 상속되는 속성은 무엇인가요?
text-align
color
animation
line-height
font-size
상속할 항목이 없으면 inherit
처럼 작동하다가 initial
처럼 작동하는 값은 무엇인가요?
unset
reset
superset