02. css 속성 상속 _ 부모, 자식, 자손

자식, 자손요소들은 부모의 속성값을 그대로 상속받습니다.

먼저 부모, 자식, 자손 요소에 대해 알아볼까요? 우리가 생각하는 가계도와 똑같습니다.
일단 제일 위에 값을 부모라고 합니다. 그 바로 밑에 위치하는 애들이 자식요소입니다.
이 자식 요소안에 위치하는 애들은 자손입니다.
모든 부모에게 부모가 있는 것처럼 부모요소 또한 상위개념 요소에게는 자식요소가 됩니다.

상속

자식, 자손요소는 부모요소의 속성값을 상속받습니다.
하지만 상속은 절대적인 것은 아닙니다.
상속이 안되는 속성값도 있고, 특정속성을 상속받지 않는 태그도 있습니다.
그건 차차 알아보도록 합시다. 일단 상속 예시를 봅시다.
부모요소인 #parent에 color값을 주면 자식, 자손들이 상속받습니다.

<div id="parent">
   <h1>나는 자식입니다.</h1>
   <p>나도 자식입니다.</p>
   <div>
	  <span>나는 자손이에요</span>
   </div>
</div>
 

앞에서 배운 css표기법 중 확인하기 쉽도록 내부스타일시트를 사용하겠습니다.
앞으로 css스타일은 head태그 위에 <style> </style>사이에 작성합니다.

CSS

 <style>
   #parent {color:skyblue;}
 </style>
 

나는 자식입니다.

나도 자식입니다.

나는 자손이에요

* 개인적인 공부를 정리하는 블로그입니다.