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
- font
- letter-spacing
- line-height
- list-style-image
- list-style-position
- list-style-type
- list-style
- orphans
- 인용문
- text-align
- text-indent
- text-transform
- visibility
- white-space
- widows
- word-spacing
상속 작동 방식
모든 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> 요소의 font-weight이 500이 됩니다.
이 값을 명시적으로 설정할 수도 있지만 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이 상속된 계산된 값으로 되돌아갑니다.
all 속성과 함께 unset 값을 사용할 수도 있습니다.
이전 예로 돌아가서 전역 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;
}
revert 키워드
캐스케이드에 관한 강의에서 살펴본 것처럼 스타일은 사용자 에이전트 기본 스타일, 사용자 환경설정 스타일, 작성된 스타일 등 다양한 출처에서 비롯됩니다. revert 키워드는 revert 키워드가 사용된 동일한 출처에 설정된 스타일을 실행취소합니다.
스타일을 설정했지만 일부 인스턴스에는 적용하지 않으려는 경우에 유용합니다. inherit, initial, unset는 스타일의 값을 계산하는 방법을 지정하는 반면 revert는 작성한 다른 스타일이 적용되지 않음을 지정할 뿐입니다.
p {
padding: 2em;
}
aside p {
padding: revert;
}
이 스니펫은 <p> 요소에 패딩을 부여하지만 <p> 요소가 <aside> 내에 있는 경우 padding를 전혀 지정하지 않습니다. 대신 사용자 환경설정 스타일 (설정된 경우) 또는 사용자 에이전트 기본 스타일로 되돌아갑니다.
revert-layer 키워드
캐스케이드 레이어는 스타일을 정리하고 캐스케이드의 작성자 출처 내에서 스타일의 우선순위를 지정하는 유용한 방법을 제공합니다. revert-layer 키워드는 revert와 비슷하지만 속성에 작성자 스타일을 적용하지 않도록 지정하는 대신 현재 레이어의 스타일만 실행취소합니다.
서드 파티 UI 라이브러리를 사용하는 경우 유용한 패턴은 라이브러리를 레이어로 가져오고 재정의를 우선순위가 높은 레이어에 추가하는 것입니다. 그런 다음 revert-layer를 사용하여 재정의를 삭제하면 UI 라이브러리의 기본값이 대신 사용됩니다.
다른 레이어에서 속성 값을 지정하지 않으면 revert처럼 동작하고 이전 출처의 값을 사용합니다.
이해도 확인
상속에 대한 지식 테스트
다음 속성 중 기본적으로 상속되는 속성은 무엇인가요?
animationfont-sizecolortext-alignline-height상속할 항목이 없으면 initial처럼 동작하고 그렇지 않으면 inherit처럼 동작하는 값은 무엇인가요?
resetunsetsuperset