부모요소, 자식요소, 형제요소, 조상요소, 자손요소 그리고 상속

이 개념은 사실 css 강좌에서 설명드리는 편이 쉬울듯 하지만 html 태그의 의미와 함께 기본사이즈를 알아가자는 취지에서 다소 어렵더라도 미리 설명 드리고자 합니다. 

 

 

위 이미지는 여지껏 해온 기본 html 문서에 p 태그만 포함된 문서 이며 좌측처럼 보이는 문서 입니다. 

html 태그 밑으로 head와 body가 있으며 head 밑으로 meta와 title, body 밑으로 p 태그가 존재합니다.

 

즉 head와 body를 html 태그가 감싸고 있습니다. 이경우에 html은 부모 요소가 되며 head는 자식 요소가 됩니다.

그리고 head와 body는 형제요소가 되는 것입니다.

 

다시 body태그는 p태그를 감싸고 있습니다. 그러니 body는 p의 부모가 되고 p는 body의 자식이 됩니다.

또 head는 meta와 title을 감싸고 있으니 head는 meta와 title의 부모이고 meta와 title은 head의 자식요소 입니다.

그리고 meta는 title과 형제 요소가 되는 것입니다.

 

그러면 p의 조상은 무엇일까요? 이런 구조 이니 p의 조상은 html 태그가 됩니다. 자연스럽게 p는 html 입장에서는 자손요소가 되는 것이지요.

모든 html 문서는 html부터 시작하니 모든 조상의 최상단의 부모는 html 태그입니다. 단군할아버지죠...

 

현재의 웹문서는 아주 단순하기 때문에 부모와 자식관계가 명확하지만 수 많은 요소가 문서에 포함되면 정신없어 질 수 있습니다. 코딩을 할때 탭을 이용해 간격을 조절하는 이유도 바로 그러한 부모 자식간의 관계를 알아보기 쉽게하기 위해서입니다.

 

기본사이즈 강좌에서 body는 8px 바깥쪽 여백을 가지고 16px 사이즈의 검정색 글씨라는 스타일을 가지고 있다는 것을 알아 보았습니다. 다시 위 개발자 도구의  p 태그를 보시면 block 속성 이며 margin을 가지고 있습니다만 font-size에 대한 언급이 없습니다. 이렇게 언급이 없는 것은 부모요소로 부터 font-size가 그대로 전달되었기 때문입니다. 즉 p의 font-size 도 16px 이라는 겁니다. 이렇게 부모로와 똑같이 되는 것을 상속이라 합니다.

 

대부분의 요소는 여백과 블럭 스타일을 제외하고 부모에서 자식으로 상속됩니다. 글자크기 글자색상 배경색등 거의 대부분의 스타일이 상속된다고 보시면 됩니다. 물론 앞으로 배울 CSS를 통해 모두 제어가능합니다만 html 기본 사이즈에 대해 알아가는 취지이니 상속이 기본이다라고 생각하시면 되겠습니다.