CSS Inheritance (CSS 상속)

✅ CSS Inheritance (CSS 상속)

CSS에서는 특정 속성이 부모 요소에서 자식 요소로 전달되는 상속(Inheritance) 개념이 존재합니다. 이를 활용하면 코드의 재사용성을 높이고, 스타일을 더욱 효율적으로 관리할 수 있습니다.

---

📌 CSS 속성의 2가지 분류

CSS 속성은 상속되는 속성과 상속되지 않는 속성으로 나뉩니다.

✅ 상속되는 속성

• 주로 텍스트 관련 속성이 포함됩니다.
• font, color, text-align, visibility, opacity 등이 상속됩니다.

✅ 상속되지 않는 속성

• 주로 레이아웃 및 박스 모델 관련 속성이 포함됩니다.
• width, height, border, box-sizing, position, z-index 등은 상속되지 않습니다.

---

📌 CSS 상속 예제

✅ HTML 코드

<ul class="parent">
    <li class="child">Hello</li>
    <li class="child">Bye</li>
</ul>

✅ CSS 코드

.parent {
    /* 상속 O */
    color: red;
    
    /* 상속 X */
    border: 1px solid black;
}

✅ color: red; 속성은 텍스트 관련 속성이므로 자식 요소 (.child)에도 자동으로 적용됩니다. ✅ border: 1px solid black; 속성은 박스 모델 관련 속성이므로 자식 요소에는 적용되지 않습니다.

---

📌 CSS 상속 제어하기

1️⃣ 강제 상속 (inherit)

• 기본적으로 상속되지 않는 속성도 강제적으로 상속받을 수 있습니다.

.child {
    border: inherit;
}

2️⃣ 상속 차단 (initial, unset)

• 특정 요소가 부모로부터 상속을 받지 않도록 설정할 수 있습니다.

.child {
    color: initial; /* 기본값으로 초기화 */
    text-align: unset; /* 부모의 영향을 받지 않도록 설정 */
}

---

✅ 결론

• CSS 상속은 주로 텍스트 관련 속성에서 발생하며, color, font 등의 속성은 자동으로 상속됨.
• 레이아웃 및 박스 모델 속성은 기본적으로 상속되지 않음 (border, width, position 등).
• inherit, initial, unset을 활용하여 원하는 상속 효과를 적용 가능.

CSS 상속을 적절히 활용하면 코드의 중복을 줄이고, 유지보수를 쉽게 할 수 있습니다!