📝 상속(Inherit)과 노멀라이즈(Normalize): 깔끔한 스타일의 시작
CSS에서 자식 요소는 부모 요소의 스타일을 자동으로 물려받을 수 있습니다.
그리고 웹 디자이너가 가장 먼저 해야 할 일, 노멀라이즈까지 함께 알아봅니다!
1. 상속(Inherit)이란?
CSS에서 상속이란 부모 요소에 적용된 스타일이 자식 요소에게 자동으로 전달되는 것을 말합니다.
🏠 비유로 이해하기
부모님의 외모나 성격이 자식에게 전달되는 것처럼, 부모 태그의 스타일이 자식 태그에게 흘러내려갑니다.
body (빨간 글씨, 가운데 정렬)
└── section (자동으로 빨간 글씨, 가운데 정렬 상속!)
└── div (자동으로 빨간 글씨, 가운데 정렬 상속!)2. 상속되는 속성 vs 상속되지 않는 속성 💡
모든 CSS 속성이 상속되는 것은 아닙니다.
✅ 상속되는 속성 (글자/텍스트 관련)
| 속성 | 설명 |
|---|---|
color | 글자 색상 |
font-family | 글꼴 |
font-size | 글자 크기 |
font-weight | 글자 굵기 |
text-align | 텍스트 정렬 |
letter-spacing | 자간 |
line-height | 줄 간격 |
❌ 상속되지 않는 속성 (레이아웃/박스 관련)
| 속성 | 설명 |
|---|---|
border | 테두리 |
margin | 바깥 여백 |
padding | 안쪽 여백 |
background | 배경 |
width / height | 크기 |
💡 기억하는 팁 — 글자와 관련된 속성은 대부분 상속되고, 박스(레이아웃)와 관련된 속성은 대부분 상속되지 않습니다!
3. 실습 예제 — 상속 확인하기 🚀
📝 HTML 구조
<body>
Hello
<section>
하하
<div>안녕</div>
<div>하세요</div>
<div>잘 가세요</div>
</section>
</body>🎨 CSS 스타일링
body {
/* 아래 속성들은 모든 자식 요소에게 상속된다. */
color: red;
font-family: "돋움";
font-weight: bold;
text-align: center;
font-size: 2rem;
letter-spacing: 10px;
/* 아래 속성은 상속되지 않는다. */
border: 10px solid green;
}
section {
/* inherit 키워드로 부모(body)의 border를 강제로 상속받는다. */
border: inherit;
}🔍 결과 분석
body
├── color: red → section, div 모두 빨간 글씨 ✅ 상속됨
├── font-family: 돋움 → section, div 모두 돋움 글꼴 ✅ 상속됨
├── font-weight: bold → section, div 모두 굵게 ✅ 상속됨
├── text-align: center → section, div 모두 가운데 정렬 ✅ 상속됨
├── font-size: 2rem → section, div 모두 2rem ✅ 상속됨
├── letter-spacing → section, div 모두 10px ✅ 상속됨
└── border: green → div는 상속 안 됨 ❌ 상속 안 됨
section은 inherit으로 상속 ✅ 강제 상속4. inherit 키워드로 강제 상속하기 🔧
기본적으로 상속되지 않는 속성도 inherit 키워드를 사용하면 강제로 부모의 값을 물려받을 수 있습니다.
section {
/* body의 border: 10px solid green 을 그대로 따라한다. */
border: inherit;
}inherit은 모든 CSS 속성에 사용할 수 있습니다.
div {
color: inherit; /* 부모의 글자 색상을 따라함 */
border: inherit; /* 부모의 테두리를 따라함 */
font-size: inherit; /* 부모의 글자 크기를 따라함 */
padding: inherit; /* 부모의 패딩을 따라함 */
}⚠️ 주의 —
inherit을 남용하면 스타일 추적이 어려워질 수 있습니다. 꼭 필요한 경우에만 사용하세요!
5. 노멀라이즈(Normalize)란? 🧹
🤔 왜 필요할까?
브라우저는 각자의 기본 스타일(User Agent Stylesheet) 을 가지고 있습니다.
예를 들어 <body>는 기본으로 margin: 8px이 적용되어 있고, <a> 태그는 파란색 + 밑줄이 기본값입니다.
이 기본 스타일들이 디자인을 방해하거나, 브라우저마다 다르게 보이는 문제를 일으킵니다.
Chrome의 body margin: 8px
Firefox의 body margin: 8px → 브라우저마다 다를 수 있음!
Safari의 body margin: 8px🧹 노멀라이즈란?
노멀라이즈(Normalize) 는 모든 브라우저의 기본 스타일을 초기화하거나 통일해서, 어떤 브라우저에서도 동일하게 보이도록 만드는 작업입니다.
💡 웹 디자이너/개발자가 CSS 작업에서 가장 먼저 해야 할 일입니다!
6. 노멀라이즈 적용하기 🚀
/* 노멀라이즈 — 웹 디자이너가 가장 먼저 해야 할 일 */
/* 이 세상의 모든 a 엘리먼트를 평범하게 만든다. */
a {
color: inherit; /* 부모(body)의 색을 따라감 */
text-decoration: none; /* 기본 밑줄 제거 */
}
/* body 노멀라이즈 */
body {
margin: 0; /* 브라우저 기본 여백 제거 */
}🔍 노멀라이즈 전후 비교
<a> 태그 노멀라이즈
| 적용 전 | 적용 후 | |
|---|---|---|
| 색상 | 🔵 파란색 (브라우저 기본값) | 부모 요소 색상 상속 |
| 밑줄 | 밑줄 있음 | 밑줄 없음 |
body 노멀라이즈
| 적용 전 | 적용 후 | |
|---|---|---|
| 여백 | margin: 8px (브라우저 기본값) | margin: 0 |
| 화면 여백 | 상하좌우 흰 여백 존재 | 화면 끝까지 꽉 찬 레이아웃 |
🍯 꿀팁 —
body { margin: 0; }을 빠뜨리면 화면 가장자리에 원인 모를 흰 여백이 생깁니다. 노멀라이즈가 없을 때 가장 흔한 실수 중 하나입니다!
7. 📖 핵심 요약
| 포인트 | 내용 |
|---|---|
| 🧬 상속 | 부모 요소의 스타일이 자식 요소에게 자동 전달 |
| ✅ 상속되는 속성 | color, font-*, text-align 등 텍스트 관련 |
| ❌ 상속 안 되는 속성 | border, margin, padding 등 박스 관련 |
| 🔧 강제 상속 | inherit 키워드로 어떤 속성이든 부모 값을 따라함 |
| 🧹 노멀라이즈 | 브라우저 기본 스타일을 초기화해 일관된 화면을 만드는 작업 |
| 📌 노멀라이즈 순서 | CSS 파일 최상단에서 가장 먼저 작성해야 합니다 |
➡️ 노멀라이즈는 모든 CSS 작업의 출발점입니다. 습관처럼 먼저 작성합시다!
