CSS 속성 상속

CSS에서 상속되는 속성(inheritable properties)은 부모 요소의 스타일이 자식 요소로 전파되는 속성을 말한다.

1. 상속되는 속성

텍스트와 관련된 속성들은 기본적으로 상속된다.

• color: 텍스트 색상
• font-family: 폰트 종류
• font-size: 글꼴 크기
• font-style: 글꼴 스타일(예: 기울임꼴)
• font-variant: 소문자, 대문자 등의 변형
• font-weight: 글꼴 굵기
• letter-spacing: 글자 간격
• line-height: 줄 간격
• visibility: 요소의 가시성
• word-spacing: 단어 간격

2. 상속되는 속성

박스 모델(box model) 관련 속성은 기본적으로 상속되지 않는다. 이러한 속성은 필요할 때 명시적으로 지정하거나 상속을 강제해야 한다.

• margin: 외부 여백
• padding: 내부 여백
• border: 테두리
• width: 너비
• height: 높이
• background: 배경 속성
• display: 표시 방식
• position: 위치 설정

3. 상속을 제어하는 방법

3.1 inherit 키워드

• 상속되지 않는 속성을 강제로 상속받게 합니다.
• 주로 부모 요소의 스타일을 그대로 자식에게 적용하고 싶을 때 사용합니다.

div {
  color: blue;
}

span {
  color: inherit; /* 부모의 color 값을 상속받음 */
}

3.2 initial 키워드

• 속성을 기본값으로 초기화합니다.
• CSS의 초기값을 강제로 적용할 때 사용합니다.

p {
  color: red;
}

span {
  color: initial; /* 기본값인 black으로 설정됨 */
}

3.3 unset 키워드

• 상속 가능한 속성은 상속받고, 상속되지 않는 속성은 초기화합니다.
• 상속 여부를 자동으로 처리하는 방식입니다.

div {
  color: green;
}

span {
  color: unset; /* 부모로부터 상속 또는 기본값 적용 */
}

4. 상속 속성의 초기값과 상속 여부

속성	초기값	상속 여부
color	black	상속됨
font-family	depends	상속됨
font-size	medium	상속됨
background-color	transparent	상속되지 않음
margin	0	상속되지 않음
padding	0	상속되지 않음