부모요소(Parent Element) & 자식 요소(Child Element)

태그A가 태그B의 콘텐츠를 사용되면, 태그B는 태그A의 부모 요소, 태그A는 태그B의 자식 요소라고 한다.

<PARENT>
	<CHILD></CHILD>
</PARENT>

<Section class = "fruits">
	<h1>과일 목록</h1>
    <ul>
    	<li>사과</li>
        <li>딸기</li>
        <li>바나나</li>
        <li>오렌지</li>
    </ul>
</section>

<!-- 다음과 같이 이해할 수 있다.-->
<섹션 영역 태그별명 = "fruits">
	<주제1>과일 목록</주제1>
   	<순서없는목록>
    	<항목>사과</항목>
        <항목>딸기</항목>
        <항목>바나나</항목>
        <항목>오렌지</항목>
    </순서없는목록>
</섹션 영역>

<!-- section의 자식요소는 ul-> li(section에서 li요소는 후손(자손, 하위)요소) 이다. -->
<!-- li의 부모요소는 ul->section(li에서 section요소는 조상(상위)요소) 이다. -->

<section></section> 안에는(콘텐츠) <h1></h1>, <ul></ul>,<li></li>가 있고 <ul></ul>안에는(콘텐츠) <li></li>가 있다.

이러한 구조에서 section은 h1과 ul의 부모요소이다.

또한 ul은 li의 부모 요소이다.

반대로 h1과 ul은 section의 자식요소이다.

또한 li는 ul의 자식요소이다.

 

여기서 ul은 section의 자식 요소이면서 li의 부모 요소이다.

이처럼 부모와 자식 요소는 상대적인 개념이다.

 

우리가 기본적인 가계도를 통해서 할아버지, 엄마, 삼촌, 형제 같은 호칭을 정의하듯, HTML의 구조도 위와 같은 개념으로 호칭을 정의해서 추후 선택자를 통해 CSS와 JS로 HTML을 다룰 때 중요하게 사용된다.