안녕하세요! CSS의 기초를 탄탄하게 다지고 계시는군요. 독후감 사이트나 웹 프로필 페이지를 만들 때, 부모 요소에 글자색을 한 번만 지정해 주면 자식 요소들까지 쫙 알아서 색이 바뀌는 걸 보며 "우와, 편하다!"라고 생각하신 적 있으시죠? 반대로 테두리(border)는 부모한테 줬는데 자식한테는 안 내려가서 일일이 다시 지정해야 했던 적도 있으실 거고요.
바로 그 비밀이 오늘 알아볼 '상속(Inheritance)'에 숨어있습니다. CSS가 왜 'Cascading(종속적인) Style Sheets'라고 불리는지 엿볼 수 있는 아주 핵심적인 개념이랍니다. MDN 공식 문서를 통해 원리를 정확하게 파헤쳐 볼게요!
상속 (Inheritance)
CSS에서 상속(inheritance)이란, 어떤 요소(element)에 특정 속성(property) 값이 지정되지 않았을 때 어떤 일이 일어날지를 제어하는 규칙입니다.
CSS 속성은 크게 두 가지 유형으로 나눌 수 있습니다:
- 상속되는 속성 (inherited properties): 기본적으로 부모 요소의 계산된 값(computed value)을 물려받도록 설정된 속성들입니다.
- 상속되지 않는 속성 (non-inherited properties): 기본적으로 부모의 값을 물려받지 않고, 해당 속성 자체가 원래 가지고 있는 초깃값(initial value)으로 설정되는 속성들입니다.
어떤 CSS 속성이 기본적으로 상속이 되는지("Inherited: yes") 아니면 안 되는지("Inherited: no") 궁금하다면, 공식 문서의 해당 속성 정의 부분을 찾아보시면 됩니다.
이 문서의 내용 (In this article)
- 상속되는 속성 (Inherited properties)
- 상속되지 않는 속성 (Non-inherited properties)
- 참고사항 (Notes)
- 명세 (Specifications)
- 참고 자료 (See also)
상속되는 속성 (Inherited properties)
어떤 요소에 상속되는 속성의 값이 아무것도 지정되어 있지 않다면, 그 요소는 부모 요소가 가지고 있는 해당 속성의 계산된 값(computed value)을 그대로 가져와서 사용하게 됩니다. 문서의 제일 꼭대기에 있는 루트(root) 요소(일반적으로 <html>)만이 예외적으로 부모가 없으므로, 속성 요약 정보에 나와 있는 초깃값(initial value)을 갖게 됩니다.
가장 대표적인 상속되는 속성이 바로 글자색을 지정하는 color 속성입니다. 다음 스타일 규칙과 마크업을 살펴볼까요?
p {
color: green;
}<p>This paragraph has <em>emphasized text</em> in it.</p>MDN Playground에서 실행해보기 (Live Sample)
위 코드를 실행하면 "emphasized text"라는 단어들 역시 초록색(green)으로 나타납니다. <em> 요소 자체에는 색상 값을 주지 않았지만, <em>가 <p> 요소의 자식이기 때문에 부모의 color 속성값을 상속(inherited)받았기 때문이죠.
<em> 요소는 (페이지에 색상이 아예 지정되지 않았을 때 루트 요소가 사용하는 기본 검은색 같은) 초깃값을 가져오지 않고 부모의 색상을 충실히 따라갑니다.
💡 강사 팁:
color,font-family,font-size,line-height,text-align처럼 '글자(Text)'와 관련된 속성들은 대부분 상속이 된다고 외워두시면 실무에서 아주 편합니다. 부모인<body>나.container에 폰트 스타일을 한 번만 지정해 두면 자식들이 알아서 다 물려받으니까 코드가 훨씬 깔끔해지죠!
상속되지 않는 속성 (Non-inherited properties)
어떤 요소에 상속되지 않는 속성의 값이 아무것도 지정되어 있지 않다면, 그 요소는 부모의 값을 무시하고 해당 속성의 초깃값(initial value) (속성 요약 정보에 명시된 기본값)을 가지게 됩니다.
상속되지 않는 속성의 대표적인 예가 바로 테두리를 지정하는 border 속성입니다. 다음 코드를 보세요:
p {
border: medium solid;
}<p>This paragraph has <em>emphasized text</em> in it.</p>MDN Playground에서 실행해보기 (Live Sample)
결과를 보면 "emphasized text"라는 단어 주변에는 테두리가 쳐져 있지 않습니다. 왜냐하면 border는 상속되지 않는 속성이며, border-style의 초깃값은 테두리가 없는 상태인 none이기 때문입니다.
💡 강사 팁:
border,margin,padding,width,height,background처럼 '박스(Box)'의 형태나 배치와 관련된 속성들은 대부분 상속이 안 된다고 생각하시면 됩니다. 만약 부모한테 준border나margin이 모든 자식들에게 똑같이 적용된다면 레이아웃이 엉망진창이 되겠죠? CSS는 아주 똑똑하게 설계되어 있답니다.
참고사항 (Notes)
만약 상속이 안 되는 속성인데 억지로 상속을 시키고 싶다면 어떻게 할까요? 그때는 inherit 키워드를 사용해서 개발자가 명시적으로 상속을 지시할 수 있습니다. 이 키워드는 상속되는 속성이든 안 되는 속성이든 상관없이 모두 적용할 수 있습니다.
또한, all이라는 단축 속성(shorthand property)을 사용하면 모든 CSS 속성들의 상속 여부를 한 번에 통제할 수도 있습니다. 예를 들어볼까요?
p {
all: revert;
font-size: 200%;
font-weight: bold;
}이 코드는 <p> 요소의 font를 비롯한 모든 속성 스타일을 브라우저(사용자 에이전트)의 기본 상태로 되돌려 놓습니다(revert). (만약 유저가 직접 설정해 둔 커스텀 스타일시트가 있다면 그것으로 되돌아갑니다.) 그런 다음에야 폰트 크기를 두 배(200%)로 키우고, 글자 굵기(font-weight)를 "bold"로 적용하는 것이죠. 이렇게 하면 이전에 어떤 복잡한 상속이나 스타일 꼬임이 있었더라도 싹 다 초기화시키고 백지상태에서 스타일을 먹일 수 있습니다.
억지로 상속시키기 예제 (Overriding inheritance, an example)
아까 상속되지 않는다고 했던 border 예제에서, inherit 키워드를 써서 명시적으로 상속을 시켜보겠습니다.
p {
border: medium solid;
}
em {
border: inherit; /* 부모인 p의 border를 무조건 물려받아라! */
}<p>This paragraph has <em>emphasized text</em> in it.</p>MDN Playground에서 실행해보기 (Live Sample)
이제 결과를 보시면 "emphasized text"라는 단어 주변에도 부모를 따라 똑같이 테두리가 쳐져 있는 것을 볼 수 있습니다.
참고 자료 (See also)
- 상속을 제어하는 CSS 값들:
inherit,initial,revert,revert-layer, 그리고unset - CSS 종속성 및 상속 (CSS cascading and inheritance) 모듈
- CSS 캐스케이드 소개 (Introduction to the CSS cascade)
- CSS 구문 소개: 선언, 룰셋, 문 (Introduction to CSS syntax: declarations, rulesets, and statements)
- 값 정의 구문 (Value definition syntax)
MDN 개선에 참여하기 (Help improve MDN)
이 페이지가 도움이 되셨나요?
[Yes][No]
기여하는 방법 알아보기(Learn how to contribute)
이 페이지의 마지막 수정일은 2025년 12월 16일이며, MDN 기여자들에 의해 수정되었습니다.
👨🏫 마무리 강사 코멘트:
"글자는 상속되고, 박스는 상속 안 된다!" 이 단순한 원리만 몸에 배어 있어도 CSS 디버깅 시간이 절반으로 줄어듭니다. 만약 디자인 시안을 보다가 "어라, 부모 컨테이너 안에 있는 애들이 다 똑같은 글꼴과 색깔이네?" 싶으면 일일이 자식들에게 클래스 주지 마시고, 쿨하게 부모한테 한 방에 줘서 상속의 힘을 누려보세요!
포트폴리오 만드시다가 CSS 상속 때문에 안 먹히는 부분이 생기면 언제든 질문 주세요!
