🌊 03. Cascade와 상속: '스타일이 흐르는 정교한 규칙'

📌 이 문서를 읽기 전에

⏱️ 예상 읽기 시간: 7분(전체) / 핵심 파트만: 4분

🗺️ 이 문서의 흐름
[Cascade의 3요소] → [상속되는 것과 안 되는 것] → [제어하기: initial, inherit, unset]

🎯 이 문서를 다 읽으면 할 수 있는 것

• 여러 스타일이 충돌할 때 브라우저가 최종 스타일을 결정하는 논리를 설명할 수 있습니다.
• 어떤 속성이 상속을 지원하는지 구분하여 코드를 효율적으로 짭니다.
• all: unset 같은 강력한 도구로 스타일을 초기화할 수 있습니다.

🗺️ 이 문서의 배경 세계관: '영수네 커뮤니티'

• 🐣 영철 (입문자): "영호 님! body에 글자색을 지정했는데 왜 input은 계속 검은색일까요? 다른 텍스트는 바뀌는데 폼 요소만 다르게 보입니다."
• 🦁 영호 (리드): "CSS는 모든 값을 자동으로 물려받지 않아요. 상속되는 속성과 상속되지 않는 속성이 있고, 여러 규칙이 겹치면 Cascade가 최종값을 고릅니다. 어떤 값이 어디서 왔는지 추적하는 연습을 해봅시다."

🤔 왜 알아야 하는가

CSS에서 Cascading은 여러 스타일 소스가 부딪칠 때 어떤 선언이 최종값이 될지 결정하는 규칙입니다. 또한 **상속(Inheritance)**은 글꼴, 색상처럼 하위 요소까지 자연스럽게 이어져야 하는 값을 반복 선언 없이 전달하는 기능입니다.

하지만 모든 스타일이 상속되는 것은 아니며, 브라우저가 기본적으로 가지고 있는 스타일(User Agent Stylesheet)이 예상과 다른 값을 만들 때도 있습니다. 이 메커니즘을 정확히 모르면 불필요한 코드를 계속 반복해서 적게 되고, 이는 곧 유지보수 비용의 상승으로 이어집니다. 5년차 개발자는 상속을 이용해 적은 선언으로 일관된 스타일을 관리합니다.

🌊 1. Cascading: 스타일의 서열 정리

브라우저가 스타일을 결정할 때는 대략 다음 순서를 확인합니다. 실제 스펙에는 cascade layer와 scope 같은 추가 기준도 있지만, 처음에는 이 흐름만 잡아도 디버깅이 훨씬 쉬워집니다.

1. 출처와 중요도(Origin & Importance): 브라우저 기본값, 사용자 스타일, 작성자 스타일, !important 여부를 비교합니다.
2. 계층(Layer): @layer로 선언된 스타일이라면 레이어 순서도 영향을 줍니다.
3. 명시도(Specificity): 지난 시간에 배운 점수 계산법입니다. (ID > Class > Tag)
4. 코드 순서: 위 조건이 같다면 나중에 선언된 규칙이 적용됩니다.

👨‍👩‍👧 2. 상속(Inheritance): 무엇을 물려주는가?

모든 CSS 속성이 자식에게 전달되지는 않습니다.

• 상속되는 주요 속성들 (내용 중심):
  • color, font-family, font-size, line-height, text-align, visibility 등
• 상속되지 않는 주요 속성들 (박스 중심):
  • width, height, margin, padding, border, display, position 등

margin이 상속되었다고 상상해 보세요. 부모한테 마진을 줬는데 자식, 손자 요소들이 전부 같은 마진을 가지면 화면이 순식간에 밀려납니다. 그래서 **공간(Box)**에 관련된 속성은 대부분 상속되지 않도록 설계되어 있습니다.

🛠️ 3. 스타일 흐름을 제어하는 4인방

상속이나 기본값을 우리가 명시적으로 조절하고 싶을 때 쓰는 키워드들입니다.

• inherit: "부모님 값을 그대로 물려주세요." (상속 안 되는 속성도 상속하게 만듦)
• initial: "이 속성의 태초 브라우저 기본값으로 돌려주세요."
• unset: "상속되는 속성이면 부모님 거(inherit), 아니면 기본값(initial)으로 해주세요." (자연스러운 상태로 회귀)
• revert: "브라우저 기본값 스타일시트가 정한 값으로 돌려주세요."

폼 요소는 브라우저 기본 스타일 때문에 본문 글꼴과 다르게 보일 수 있습니다. 이때는 필요한 속성만 명시적으로 상속시키면 디자인 시스템의 기본 타이포그래피를 유지할 수 있습니다.

input {
  /* 폼 컨트롤도 부모 텍스트 색과 글꼴을 따르게 합니다. */
  color: inherit;
  font-family: inherit;
}

반대로 all: unset처럼 강한 초기화는 접근성에 필요한 기본 스타일까지 제거할 수 있습니다. 버튼의 포커스 표시, input의 기본 동작을 지우는 경우에는 다시 대체 스타일을 제공해야 합니다.

📝 마무리 퀴즈

Q1. body에 font-size: 16px을 설정했을 때, 그 안의 section 태그에 별도의 설정을 하지 않아도 글자 크기가 16px이 되는 현상을 무엇이라고 하나요?

✅ 정답: 상속(Inheritance)

💡 상세 해설:

• 원리 설명: CSS에서 font-size, color, line-height 등 텍스트 관련 속성은 부모에서 자식으로 자동 상속됩니다. 오직 '상속 가능한 속성'만 이 혜택을 받는다는 점이 핵심이에요.
• 오답 피드백: "영철 님, '캐스케이드(Cascade)'와 혼동하기 쉽지만, 캐스케이드는 같은 요소에 여러 스타일이 충돌할 때의 우선순위 규칙이에요. 부모→자식으로 값이 흘러내리는 건 '상속'이 맞습니다!"
• 📌 핵심 기억법: "상속은 부모에서 자식으로, 캐스케이드는 같은 요소의 후보 선언 사이에서 일어난다."

Q2. 다음 중 부모 요소로부터 상속되지 않는 속성은 무엇일까요?

1. line-height
2. text-align
3. padding
4. color

✅ 정답: 3. padding

💡 상세 해설:

• 원리 설명: padding, margin, border, width, height 등 레이아웃(박스 모델) 관련 속성은 상속되지 않습니다. 만약 padding이 상속되면 모든 자식 요소에 불필요한 여백이 생겨서 레이아웃 계산이 예측하기 어려워집니다.
• 오답 피드백: "영철 님, 상속되는 것과 안 되는 것을 구분하는 간단한 팁: '글자에 관한 것(font, color, text)'은 상속, '상자에 관한 것(margin, padding, border)'은 비상속이에요!"
• 📌 핵심 기억법: "글자는 유전, 상자는 각자!"

Q3. [영철이의 테스트 타임: 실무 딜레마]
영수 PM 님이 "로그인 버튼만 브라우저 기본 버튼 스타일에 가깝게 돌려주세요. 지금 스타일이 너무 튀어요!"라고 요청하셨습니다. 기존에 .btn 클래스에 수십 줄의 스타일이 붙어 있는 상황에서, 영철이가 한 줄로 이 버튼의 작성자 스타일을 초기화하여 브라우저 기본값에 가깝게 되돌릴 수 있는 속성은 무엇일까요?

✅ 정답: all: revert; (또는 상황에 따라 all: unset;)

💡 상세 해설:

• 원리 설명: all 속성은 요소의 모든 CSS 속성을 한 번에 제어합니다. revert는 사용자 제작 스타일을 무시하고 브라우저 기본 스타일로 되돌리는 가장 정확한 방법입니다.
• 오답 피드백: "영철 님, 일일이 background: none, border: 0을 쓰면 누락이 생기기 쉬워요. 다만 all은 강력하니 포커스 표시 같은 접근성 스타일을 다시 확인해야 합니다."
• 📌 핵심 기억법: "all은 강한 초기화 도구다. 쓴 뒤에는 필요한 기본 경험을 다시 확인한다."

🐣 영철이의 퇴근 일기

오늘은 내 코드가 왜 어떤 건 물려받고 어떤 건 무시하는지 그 깊은 속사정을 알게 됐다.
input 태그가 다르게 보였던 건 이유가 있었다. 브라우저 기본 스타일과 상속 규칙이 함께 작동하고 있었던 거다. inherit이라는 작은 키워드 하나가 폼 스타일을 훨씬 예측 가능하게 만들어줬다.

💡 "상속은 선물이고, Cascade는 법이다. 법을 알고 선물을 잘 활용하면 CSS는 더 이상 혼돈이 아니다."

오늘 영호 님이 all: unset과 all: revert를 비교해주셨을 때 강력한 도구일수록 사용 후 검증이 중요하다는 걸 느꼈다.
나중에 복잡한 라이브러리 스타일을 걷어낼 때도 "초기화한 뒤 포커스와 접근성이 남아 있는가"까지 확인해야겠다.

🔗 더 알아보기

• MDN: Cascade와 상속
• MDN: inherit 키워드