CSS를 작업하다 보면 부모 요소에 스타일을 줬는데 자식 요소에도 자동으로 적용되는 경우가 있습니다.
반대로 어떤 속성은 전혀 전달되지 않아 "왜 이건 상속되고 저건 안 되지?"라고 헷갈리는 경우가 많습니다.
이 개념을 제대로 이해하려면 반드시 알아야 하는 것이 바로 CSS 상속(inherit)입니다.
상속은 CSS 구조를 간결하게 만들고 중복 코드를 줄이는 데 매우 중요한 역할을 합니다.
이번 글에서는 CSS 상속이 어떻게 동작하는지, 어떤 속성이 자동으로 상속되는지, 그리고 실무에서 어떻게 활용하면 좋은지를 예제와 함께 쉽게 정리해보겠습니다.
CSS 상속(inherit)이란?
CSS 상속은 부모 요소에 적용된 특정 스타일이 자식 요소에게 자동으로 전달되는 동작 방식입니다.
body {
color: #333;
}
위 코드를 작성하면 body 안에 있는 대부분의 텍스트 요소는 자동으로 같은 글자색을 상속받습니다.
기본 상속 동작 예시
<div class="box">
부모 텍스트
<p>자식 텍스트</p>
</div>.box {
color: blue;
}
이 경우 p 태그도 파란색을 자동으로 상속받습니다.
즉, 별도로 p에 color를 주지 않아도 부모의 color가 전달됩니다.
자동으로 상속되는 대표 속성
주로 텍스트 관련 속성은 상속됩니다.
- color
- font-size
- font-family
- line-height
- letter-spacing
- text-align
- visibility
이 속성들은 부모 기준으로 통일하기 좋기 때문에 자동 상속됩니다.
상속되지 않는 대표 속성
레이아웃 관련 속성은 대부분 상속되지 않습니다.
- margin
- padding
- border
- width
- height
- display
- position
- background
예를 들어 부모에 margin을 줘도 자식은 자동으로 따라오지 않습니다.
inherit 키워드 직접 사용하기
CSS에서는 inherit 키워드로 강제로 부모 값을 상속받을 수 있습니다.
button {
color: inherit;
}
이렇게 하면 button은 부모의 color 값을 그대로 사용합니다.
inherit 실무 활용 예시
버튼 글자색 통일
.card {
color: #222;
}
.card button {
color: inherit;
}
카드 내부 버튼 글자색을 자동으로 부모에 맞출 수 있습니다.
링크 색상 통일
a {
color: inherit;
text-decoration: none;
}
링크 기본 파란색을 제거하고 부모 글자색을 그대로 따르게 만들 때 많이 사용합니다.
initial / unset / inherit 차이
이 세 가지는 실무에서 자주 헷갈립니다.
inherit
부모 값을 그대로 받음
initial
브라우저 기본 초기값으로 되돌림
unset
상속 속성이면 inherit, 아니면 initial처럼 동작
왜 어떤 속성은 상속되지 않을까?
브라우저는 의미상 자연스러운 속성만 상속되도록 설계되어 있습니다.
예를 들어 글자 크기나 폰트는 문단 전체에서 통일되는 것이 자연스럽지만, width나 margin은 요소마다 달라야 하기 때문에 상속되지 않습니다.
실무에서 상속을 잘 활용하는 방법
body에 기본 폰트 지정
body {
font-family: Arial, sans-serif;
color: #222;
}
이렇게 하면 대부분의 텍스트 요소가 자동으로 통일됩니다.
컴포넌트 단위 상속
카드, 모달, 섹션 단위로 기본 스타일을 부모에 주면 자식 스타일 코드가 크게 줄어듭니다.
상속 사용 시 주의할 점
예상치 못한 전달
부모에 color를 바꾸면 내부 모든 텍스트가 바뀔 수 있습니다.
너무 깊은 구조
상속 구조가 너무 깊으면 디버깅이 어려워집니다.
reset CSS 영향
reset 스타일이 상속 구조를 예상과 다르게 만들 수 있습니다.
CSS 상속과 유지보수
상속을 잘 활용하면 CSS 코드량을 크게 줄일 수 있습니다.
- 중복 코드 감소
- 공통 스타일 관리 쉬움
- 테마 변경 쉬움
특히 디자인 시스템이나 템플릿 제작에서는 매우 중요합니다.
마무리
CSS 상속은 부모 스타일을 자식에게 자연스럽게 전달하는 핵심 개념입니다.
정리하면 다음과 같습니다.
- 텍스트 관련 속성은 자동 상속
- 레이아웃 속성은 대부분 상속되지 않음
- inherit 키워드로 강제 상속 가능
- 실무에서는 body와 컴포넌트 단위 활용이 핵심
상속 원리를 이해하면 CSS를 더 적은 코드로 더 깔끔하게 작성할 수 있습니다.
CSS 구조를 잘 만들고 싶다면 꼭 익혀야 할 개념입니다.