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

📌 이 문서를 읽기 전에

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

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

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

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

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

• 🐣 영철 ( 신입 ): "영호 님! body에 폰트 색상을 입혔는데 왜 input 태그는 계속 검은색일까요? 다른 애들은 다 말을 잘 듣는데 얘만 반항해요! 😤"
• 🦁 영호 ( 리드 ): "영철 님, CSS는 무조건 무조건 물려받는 게 아니에요. '가문(상속)'의 규칙이 있고, '법률(Cascade)'의 우선순위가 있죠. 왜 어떤 속성은 조용히 전달되고, 어떤 속성은 고집을 피우는지 알아야 고생을 안 합니다."

🤔 왜 알아야 하는가

CSS에서 Cascading은 여러 스타일 소스가 부딪칠 때 누가 이길지 결정하는 '중재자' 역할을 합니다. 또한 **상속(Inheritance)**은 공통 스타일을 한 번에 정의하여 코드 중복을 획기적으로 줄여주는 '효도' 기능이죠.

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

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

브라우저가 스타일을 결정할 때 체크하는 3가지 순서입니다.

1. 중요도(Importance): !important가 있는가? 아니면 일반 스타일인가?
2. 출처(Origin): 누가 쓴 스타일인가? (제작자 > 사용자 > 브라우저 기본값)
3. 명시도(Specificity): 지난 시간에 배운 점수 계산법! (ID > Class > Tag)
4. 코드 순서: 점수까지 같다면? 나중에 쓴 놈이 장땡!

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

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

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

🦁 영호의 팁:
"영철 님, 만약 margin이 상속되었다고 상상해 보세요. 부모한테 마진을 줬는데 자식, 손자 요소들이 전부 마진을 가지게 되면 화면이 엉망진창이 되겠죠? 그래서 **공간(Box)**에 관련된 건 상속되지 않도록 설계되어 있습니다."

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

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

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

/* 🐣 영철이의 input 반항 길들이기 */
input {
  color: inherit; /* 이제 body 의 색상을 따라옵니다! */
  font-family: inherit;
}

📝 마무리 퀴즈

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

✅ 정답: 상속(Inheritance)

💡 상세 해설:

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

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"을 보여주셨을 때 마치 타노스의 핑거 스냅 같았다. 스타일이 싹 사라지는 걸 보니 쾌감이...!
나중에 복잡한 라이브러리 스타일 걷어낼 때 유용하게 써먹어야지. 퇴근하고 시원한 에일 맥주 한 잔 마시면서 오늘 배운 '흐름'을 곱씹어봐야겠다. 🌊

🔗 더 알아보기

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