<aside> <img src="/icons/cursor-click_blue.svg" alt="/icons/cursor-click_blue.svg" width="40px" /> 빠른 이동을 원하시면, 아래 키워드를 클릭하세요!
</aside>
지난 시간에 html 요소에게는 부모, 자식 관계가 있음을 배웠습니다.
기본적으로 css는 부모 요소에 지정한 속성값을 자식 요소에게도 상속해서 적용합니다.
어떻게 상속이 되는지는 아래 예시를 통해 알아보도록 하겠습니다.
<div class="container">
바깥에 있는 박스입니다.
<div class="inner-box">
<p>안쪽에 있는 박스입니다.</p>
</div>
</div>
.container{
color : red
}
분명 부모 요소인 .container에만 속성을 줬는데 자식에게까지 속성이 상속되어 color:red 가 적용된 모습을 볼 수 있습니다.
이 처럼 css는 기본적으로 부모요소에 지정된 속성값이 자식요소에도 상속되어 적용됩니다.
❗️ 하지만, 모든 속성이 상속되는 것은 아닙니다. ‼️ css에는 상속 되는 속성이 있고 아닌 속성이 있습니다.
상속이 되는 속성과 상속이 되지 않는 속성에는 위와 같은 것들이 있습니다.