웹 개발을 위한 HTML 가이드 4편 - 태그와 태그의 관계

이번 글은 웹 개발을 위한 HTML 가이드 4편입니다. 저번 글에서는 태그의 특징에 대해서 알아봤습니다. 정확히는 태그의 특징에 따른 두가지의 종류에 대해 알아봤죠. 이번 글에서는 태그들의 관계에 대해서 알아보도록 합시다.

HTML 문서에서 태그들은 하나만 쓰이지는 않습니다. 여러개의 태그가 사용됩니다. 태그의 안에 태그가 들어가고 그 안에 태그가 들어가기도 합니다. 그렇기 때문에 HTML의 태그들은 부모 자식 관계가 존재하고, 자손, 혹은 형제 관계가 존재합니다. 이번 글에서는 이런 것들을 알아볼 예정입니다.

알아볼 내용이 많지는 않습니다. 중요한 것이니 이해하고 넘어가도록 하는 것이 좋습니다. 또한 CSS나 자바스크립트에서도 이러한 관계를 이해하고 있어야지만 진행이 가능하기 때문에 반드시 이해하고 넘어갑시다.

일단 우리는 아직 어떤 태그들이 존재하는지 알지 못합니다. 따라서 이번 글에서 언급되는 태그들이 무엇인지는 지금은 몰라도 됩니다. 추후에 알게 될 내용들이니까 태그들의 관계에 대해서만 집중을 하시면 되겠습니다.

부모 태그와 자식 태그

<div>
  부모
  <p>자식</p>
</div>

가장 먼저 알아볼 것은 부모 태그와 자식 태그입니다. 위의 코드에는 두가지의 태그가 있습니다. div태그가 있고 그 안에 p태그가 있죠. 어떠한 태그의 안에 다른 어떠한 태그가 들어가 있는 경우를 부모 태그와 자식 태그라고 부릅니다. 바깥에 있는 태그가 부모 태그이고 안에 있는 태그가 자식 태그입니다.

위의 코드에서 부모 태그는 div태그인 것이고 자식 태그는 p태그인 것이죠. 부모 태그는 parent Element라고 하고 자식 태그는 child Element라고 부릅니다. 태그는 엘리먼트라고 부르기도 한다고 했었죠.

쉽게 말해서 부모 태그와 자식 태그는 한 단계 위 아래 관계일 때를 말하는 것이라고 생각하면 됩니다. 부모 태그가 한 단계 위에 있는 태그이고 자식 태그가 한 단계 아래에 있는 태그겠죠. 단계로 구분하면 간단하겠네요!

자손 태그와 조상 태그

<div>
  <p>
    <a href="#">링크</a>
  </p>
</div>

그럼 두 단계 이상 차이나는 경우는 어떨까요? 위의 코드처럼 세개의 태그가 사용되었고 자식 태그의 안에 또 자식 태그가 있다면 말이죠. div태그의 입장에서 a태그는 무엇일까요? 정답은 자손 태그입니다. 영어로 Descendant라고 합니다. a태그 입장에서는 div태그가 조상 태그겠죠.

자식 태그와 자손 태그는 비슷하기 때문에 많이들 착각하는 부분입니다. 이럴 때에는 간단하게 한 단계 차이가 나면 부모 자식 관계이고 두 단계 이상 차이가 나면 조상, 자손 태그라고 생각하면 되겠습니다. CSS에서도 자식 태그와 자손 태그를 구분하기 때문에 알아둬야 합니다.

형제 태그

<div>아이유</div>
<div>아이유 동생</div>

위 코드처럼 같은 단계에 있는 태그들은 형제 태그라고 부릅니다. 영어로는 Sibling이라고 합니다. 형제 중 하나에게 자식이 있든 자손이 있든 상관 없습니다. 같은 부모 태그 한 단계 아래에 있다면 전부 형제 태그입니다.

여기까지 부모 태그와 자식 태그, 형제 태그 그리고 자손에 대해서 알아보았습니다. 이해가 잘 안될 수도 있습니다. 충분히 그럴 수 있거든요. 이해가 잘 안되는 부분은 여러번 읽어보면 이해가 될 겁니다. 이번 글로 알 수 있는 내용은 첫째로 태그들은 단계에 따라서 호칭이 존재한다는 것이 있죠. 둘째로 자식 태그들은 들여쓰기를 한다는 점이 있습니다.

HTML의 문법도 알게 되었고 태그의 특징도 알게 되었고 태그들간의 관계에 대해서도 알게 되었습니다. 이제 정말 기본적인 사전 지식은 전부 알게 되었습니다. 이제부터 우리는 본격적으로 HTML을 시작해볼 겁니다. 다음 글에서는 개발환경을 갖추는 것을 진행해보도록 합시다.

다음 글을 보기 전에 이번 글의 내용을 여러번 복습하고 되새겨보는 시간을 가지면 좋을 것 같습니다.