• 목록
• 게시판 리스트 옵션
  • 검색

CSS 상속 - 부모와 자식의 스타일 관계 & inherit 설명

1. 스타일 상속이란?

부모 요소(Outer tag)에 설정한 CSS 속성들이 그 안에 포함된 자식 요소(Inner tag)에 자동으로 적용되는 것을 말합니다.

• 부모 요소: 감싸고 있는 바깥쪽 태그

• 자식 요소: 안쪽에 포함된 태그

2. 모든 속성이 상속될까? (중요!)

가장 많이 헷갈려 하는 부분입니다. 

글자 관련 속성은 대부분 상속되지만, 박스 모델(구조) 관련 속성은 상속되지 않습니다.

① 상속되는 속성 (글자/색상 관련)

• color (글자 색상)

• font-family (글꼴)

• font-size (글자 크기)

• font-weight (글자 굵기)

• line-height (줄 간격)

• text-align (텍스트 정렬)

② 상속되지 않는 속성 (배치/박스 관련)

부모가 박스라고 해서 자식까지 자동으로 박스 모델이 되면 디자인이 엉망이 되기 때문입니다.

• width / height (너비/높이)

• margin (바깥쪽 여백)

• padding (안쪽 여백)

• border (테두리)

• background-image (배경 이미지)

• display (배치 방식)

3. 상속 예제 코드

<div class="parent">
  부모 요소입니다.
  <p class="child">자식 요소(문단)입니다.</p>
  <span>자식 요소(스팬)입니다.</span>
</div>

<style>
.parent {
  color: blue;         /* 상속됨: 자식들도 파란색이 됨 */
  font-weight: bold;   /* 상속됨: 자식들도 굵어짐 */
  border: 2px solid;   /* 상속 안 됨: 부모에게만 테두리가 생김 */
  padding: 20px;       /* 상속 안 됨: 부모 내부 공간만 확보됨 */
}
</style>

4. 상속의 우선순위

만약 부모도 스타일을 주고, 자식도 스스로 스타일을 가지고 있다면 어떻게 될까요?

• 자신의 스타일이 우선: 부모에게 물려받은 스타일보다 자식 요소가 직접 가지고 있는 스타일이 우선순위가 더 높습니다.

• 비유: 부모님이 물려주신 옷(상속)보다 내가 오늘 직접 사서 입은 옷(직접 지정)이 최종 내 모습이 되는 것과 같습니다.

5. 강제로 상속받기: inherit

상속되지 않는 속성(예: border)을 억지로 부모와 똑같이 맞추고 싶을 때 사용하는 예약어입니다.

.child {
  border: inherit; /* 부모의 테두리 스타일을 그대로 물려받음 */
}

 요약 포인트 

1. 텍스트 관련 속성은 부모에서 자식으로 흐른다.

2. 박스/레이아웃 속성은 상속되지 않는다. (직접 정해줘야 함)

3. 자식이 직접 스타일을 정의하면 부모의 스타일을 덮어쓴다.

• 목록
• 게시판 리스트 옵션
  • 검색