color 속성 상속

네, color 속성은 기본적으로 하위 요소(DOM 요소)들에게 상속됩니다.

✅ color 속성의 상속 특징:

• color 속성은 기본적으로 텍스트 관련 속성이므로 상속이 됩니다.
• 만약 부모 요소에서 color를 지정하면, 자식 요소들은 명시적으로 다른 색상을 지정하지 않는 한 이를 자동으로 상속받습니다.

예제 1: color 속성 상속

.parent {
  color: red;
}

.child {
  /* 따로 color를 지정하지 않으면 부모의 red를 상속받음 */
}

<div class="parent">
  부모 텍스트 (빨간색)
  <p class="child">자식 텍스트 (빨간색)</p>
</div>

✅ child 요소는 color: red;를 명시적으로 설정하지 않았지만, parent 요소에서 상속받아 빨간색이 됩니다.

---

✅ 예외: 일부 요소는 color 속성을 상속받지 않음

• color 속성은 텍스트를 포함하는 요소(p, span, a 등)에서는 상속되지만,
  div, button, input 등의 요소의 배경색이나 테두리에는 적용되지 않습니다.

.parent {
  color: blue;
}

.child-box {
  /* 상속되지 않음 */
  border: 2px solid;
}

<div class="parent">
  <div class="child-box">이 박스의 테두리는 상속되지 않음</div>
</div>

✅ border 색상은 color 속성을 상속받지 않으므로 테두리는 기본값(검정)으로 유지됩니다.

---

✅ 강제 상속하는 방법

일부 요소가 color 속성을 상속받지 않는 경우, inherit 키워드를 사용하면 강제적으로 상속할 수 있습니다.

.child {
  color: inherit;
}

<div class="parent" style="color: green;">
  부모
  <div class="child">강제로 상속받음 (녹색)</div>
</div>

✅ color: inherit;를 사용하면 부모 요소의 색상을 강제로 따르게 할 수 있습니다.

---

✅ 요약

1. color 속성은 기본적으로 하위 텍스트 요소들에게 상속됩니다.
2. 하지만 border, background 등은 상속되지 않으며, 따로 지정해야 합니다.
3. inherit을 사용하면 강제로 부모의 색상을 따르게 할 수 있습니다.

추가 질문이 있으시면 말씀해 주세요! 😊