상속: 뭐가 흘러내리고 뭐가 안 흐르고 어떻게 조향할지

"상속은 조용한 기본값. 너의 스타일링 절반이 이거 덕에 '그냥 됐다'; 나머지 절반은 어느 게 그런지 몰라서 깨졌다."

Property 마다 다른 규칙

모든 CSS property 가 스펙에 한 줄 가짐: Inherited: yes 또는 Inherited: no. 부모가 값 있고 자식이 그걸 설정하는 규칙 없을 때:

상속되면: 자식이 부모 값 받음.
상속 안 되면: 자식이 property 의 초기 (기본) 값 사용.

전체 리스트 외울 필요는 없어 — 하지만 카테고리는 내면화해야 해.

기본적으로 상속되는 것

타이포그래피와 텍스트 관련 property 가 상속. 인지 모델: <body> 에 font-family 설정하면 안의 모든 단락, heading, 리스트 항목, 링크, span 으로 cascade — 규칙 50 개 안 쓰고.

color, font (그리고 모든 longhand: font-family, font-size, font-weight 등)
line-height, letter-spacing, word-spacing, text-align, text-indent, text-transform, text-shadow
visibility (응 — 부모에 visibility 설정하면 자식도 숨김)
cursor, quotes, list-style (리스트 bullet 이 중첩 리스트로 cascade)
Custom property (CSS 변수) — :root 의 --brand-color: blue; 가 어디서나 보임
RTL/LTR 관련: direction

상속 안 되는 것

Layout, 박스, 배경, 위치 property 는 상속 안 함. 모델: 모든 자식이 부모 margin, border, 배경을 상속하길 원하지 않아.

margin, padding, border
width, height, min-width, max-width, min-height, max-height
display, position, top/right/bottom/left
background (그리고 모든 longhand)
flex, grid, 모든 layout property
transform, opacity, z-index
overflow (참고: cursor 와 헷갈리지 마, cursor 는 상속됨)

폼 element 예외

폼 element (<input>, <textarea>, <select>, <button>) 가 역사적으로 <body> 의 상속 override 하는 UA 제공 글꼴 가져. 너의 아름답게 테마된 텍스트가 기본적으로 폼 input 에 적용 안 되는 이유. Fix:

네 가지 universal 값: inherit, initial, unset, revert

모든 CSS property 가 이 네 키워드 (+ revert-layer) 받음:

inherit — 부모에서 강제로 상속. 기본적으로 상속 안 하는 property 에 유용 ("이 padding 이 부모 padding 과 매치되길 원해").
initial — CSS 스펙에 정의된 property 의 초기값으로 리셋. 브라우저 UA 스타일시트 값이 아니라 스펙의 초기값. (display 의 초기값은 UA 가 element 에 준 거 말고 inline.)
unset — property 가 기본적으로 상속하면 inherit 처럼; 아니면 initial 처럼. Reset 에 유용.
revert — author 규칙이 없었을 때 property 가 가질 값으로 되돌리기 (즉, UA 기본으로, 또는 user 스타일시트 있으면 그것으로).
revert-layer — 이전 cascade layer 의 값으로 되돌리기.

단일 element 의 가장 깨끗한 reset 은 all: revert. 선언 하나, 모든 property 가 UA 기본으로 복원. 무겁게 테마된 사이트 안에서 기본 스타일로 렌더해야 하는 서드파티 콘텐츠 (iframe-substitute, 에디터 미리보기) 임베딩 때.

Custom Property (CSS 변수) 는 상속, 그게 초능력

이게 2026 년에 CSS 쓰는 방식 바꾸는 거:

Custom property (--brand-color, --gap, --radius) 가 텍스트 property 처럼 DOM 통해 상속. :root 에 한 번 정의하면 어디서나 보여. 섹션에 다시 선언하면 그 섹션의 subtree 가 새 값 봐. 이게 모던 CSS 에서 dark mode 토글 작동 방식 — <html> 의 data-theme="dark" 가 변수 재정의, 모든 자손이 상속으로 새 값 받음, 추가 규칙 필요 없음.

상속이 너를 무는 자리

클래식 혼란 셋:

"왜 내 자식 element 가 파랗지?" — ancestor 에 color 설정하고 상속하는 거 잊음.
"왜 내 폼 input 이 내 글꼴 안 써?" — 폼 element 가 상속된 글꼴을 UA 기본으로 override; input, button, select, textarea { font: inherit; } 더해.
"왜 reset 후에 링크 색이 바뀌었지?" — 부모에 color 설정했고 링크가 상속해서 브라우저 기본 링크 파랑 override.

피파의 노트

피파의 테마 시스템이 상속되는 custom property 위에 전적으로 지어져 있어. :root 가 --bg, --fg, --accent 등 선언. [data-theme="dark"] 가 재정의. 모든 component 가 color: var(--fg), background: var(--bg) 읽음 — theme-aware 로직 어디에도 없음. 테마 전환은 attribute 변경 하나, 나머지는 상속이 처리. Cwk-site 의 quest 색도 같은 방식으로 작동: 각 quest 의 meta.json 팔레트가 quest 페이지 wrapper 의 custom property 가 되고, 안의 component 가 자동 상속.

Code

기본 상속, 두 스니펫·css

/* 기본 상속되는 거 — 타이포그래피가 흐름 */
body {
  font-family: 'Inter', sans-serif;
  color: #1c2230;
  line-height: 1.6;
}

/* <body> 안 모든 <p>, <h1>, <span>, <a> 가 추가 규칙 없이
   이걸 받아 — 다 상속하니까. */

/* 상속 안 되는 거 — layout 이 안 흐름 */
.container { padding: 2rem; background: #f4f6f9; }

/* .container 의 자식들이 기본적으로 padding: 0, background: transparent —
   상속할 거라 기대해도. */

inherit, initial, unset, revert·css

/* 폼 element 예외 */

/* 이거 없으면 테마된 글꼴이 폼 input 에 안 닿음 */
button, input, select, textarea {
  font: inherit;
  color: inherit;
}

/* 키워드 동물원 */
.box {
  color: inherit;        /* 부모에서 강제 상속 */
  margin: initial;       /* 스펙 기본 (margin 은 0) */
  padding: unset;        /* 상속 안 됨 → initial (0) */
  background: revert;    /* UA 기본으로 되돌리기 (transparent) */
  border: revert-layer;  /* 이전 cascade layer 로 되돌리기 */
}

/* 서드파티 위젯 mount 자리의 universal reset */
.embed-host {
  all: revert;          /* 모든 property UA 기본으로 */
}

상속되는 custom property 로 만든 테마 시스템·css

/* Custom property + 상속 = 테마 */

:root {
  --bg: #ffffff;
  --fg: #1c2230;
  --accent: #5BA3D8;
  --radius: 8px;
  --gap: 1rem;
}

[data-theme="dark"] {
  --bg: #0b0e14;
  --fg: #e7ecf3;
  --accent: #5BA3D8;       /* 안 바뀜 */
  /* --radius 와 --gap 은 :root 에서 상속, 다시 선언 필요 없음 */
}

/* 모든 component 가 var() 로 읽음 */
body { background: var(--bg); color: var(--fg); }
.btn { background: var(--accent); border-radius: var(--radius); }
.card { padding: var(--gap); border-radius: var(--radius); }

/* 스코핑: 섹션이 자기 subtree 용 변수 재정의 가능 */
.alert { --accent: #d93b3b; }
.alert .btn { /* 새 빨간 accent 받음 */ }

Exercise

<body>, <main>, <article>, <p>, <form> 가진 작은 페이지 만들기. <body> 에 font-family, color, line-height, 그리고 CSS 변수 --accent 설정. article 에 --accent 다르게 정의. DevTools → Computed 창에서 각 element 클릭해 어느 property 가 상속됐고 어느 게 안 됐는지 확인. <html> 에 class 하나로 data-theme="dark" 토글하는 버튼 추가 — 변수 쓰는 모든 규칙이 업데이트되는지 확인.

Hint

Body 에 font 설정한 후에도 폼 input 이 시스템 글꼴 보이면 input { font: inherit; } 빼먹은 거. 폼 element 가 영원한 상속 함정.

상속: 뭐가 흘러내리고 뭐가 안 흐르고 어떻게 조향할지

Property 마다 다른 규칙

기본적으로 상속되는 것

상속 안 되는 것

폼 element 예외

네 가지 universal 값: inherit, initial, unset, revert

Custom Property (CSS 변수) 는 상속, 그게 초능력

상속이 너를 무는 자리

피파의 노트

Code

External links

Exercise

Progress

댓글 0