🌱 기초 프론트엔드
CSS 상속(Inheritance)이란?
쉽게 이해하기
부모가 안경을 쓰면 자녀도 안경을 쓸 가능성이 있잖아요? CSS 상속은 부모 요소에 설정한 스타일이 자동으로 자식에게 물려지는 거예요. 일일이 자식마다 설정 안 해도 돼요.
핵심 정리
부모 요소의 CSS 속성이 자식 요소에 자동으로 적용되는 CSS의 특성이에요.
자세히 알아보기
CSS 상속은 부모 요소에 적용한 특정 속성이 자식 요소에 자동으로 전달되는 메커니즘이에요. 예를 들어 `<body>`에 `color: blue;`를 설정하면, 별도 설정이 없는 모든 텍스트가 파란색으로 보여요. 매번 모든 요소에 색상을 지정할 필요가 없어서 코드가 간결해지죠.
하지만 모든 CSS 속성이 상속되는 건 아니에요. `color`, `font-family`, `font-size`, `line-height` 같은 텍스트 관련 속성은 상속되지만, `margin`, `padding`, `border`, `width`, `height` 같은 박스 모델 속성은 상속되지 않아요. 상속되면 레이아웃이 엉망이 되기 때문이죠.
실무에서는 전역 스타일을 설정할 때 상속을 활용해요. `body`나 `html`에 기본 폰트와 색상을 정해두면 전체 페이지에 일관된 스타일을 적용할 수 있어요. 만약 특정 요소만 다르게 하고 싶으면 그 요소에 직접 스타일을 지정하면 부모 스타일을 덮어써요.
상속을 명시적으로 제어할 수도 있어요. `inherit` 키워드를 쓰면 보통 상속되지 않는 속성도 부모 값을 가져오고, `initial`은 브라우저 기본값으로 되돌리고, `unset`은 상속 가능하면 상속하고 아니면 초기값을 써요. CSS 상속을 이해하면 불필요한 반복을 줄이고 유지보수하기 쉬운 코드를 작성할 수 있어요.