1. 태그의 관계

HTML 문서의 구조는 트리(tree) 형태로 이루어져 있으며, 각 요소들은 부모-자식, 형제 관계를 가집니다. 이러한 관계를 이해하는 것은 HTML 문서를 효과적으로 작성하고 스타일을 적용하는 데 매우 중요합니다.

<html>
  <head></head>
  <body>
    <section>
      <h1>
        <strong></strong>
      </h1>
      <img />
      <div>
        <p><strong></strong></p>
        <p><strong></strong></p>
        <p><strong></strong></p>
      </div>
    </section>
  </body>
</html>

<html>
  <head></head>
  <body>
    <section>
      <h1>
        <strong></strong>
      </h1>
      <img />
      <div>
        <p><strong></strong></p>
        <p><strong></strong></p>
        <p><strong></strong></p>
      </div>
    </section>
  </body>
</html>

관계	설명	예시
부모(Parent)	다른 요소를 포함하는 요소	`<section>`은 `<h1>`, `<img>`, `<div>`의 부모
자식(Child)	다른 요소 내부에 직접 포함된 요소	`<h1>`, `<img>`, `<div>`는 `<section>`의 자식
형제(Sibling)	같은 부모를 가진 요소들	`<h1>`, `<img>`, `<div>`는 서로 형제
자손(Descendant)	요소 내부의 모든 요소 (자식의 자식 포함)	`<strong>`은 `<section>`의 자손

1.1 부모(Parent) 요소

부모 요소는 다른 요소를 포함하는 요소를 말합니다. 위 예제에서 <section> 태그는 <h1>, <img>, <div> 태그의 부모 요소입니다.

1.2 자식(Child) 요소

자식 요소는 다른 요소 내부에 직접 포함된 요소를 말합니다. 위 예제에서 <h1>, <img>, <div> 태그는 <section> 태그의 자식 요소입니다.

1.3 형제(Sibling) 요소

형제 요소는 같은 부모 요소를 가지는 요소들을 말합니다. 위 예제에서 <h1>, <img>, <div> 태그는 서로 형제 관계에 있습니다.

1.4 자손(Descendant) 요소

자손 요소는 어떤 요소의 내부에 포함된 모든 요소를 말합니다. 자식 요소뿐만 아니라 자식의 자식 요소까지 포함합니다. 위 예제에서 <strong> 태그는 <section> 태그의 자손 요소입니다.

<html>
  <head></head>
 
  <body>
    <section>
      <h1>
        <strong>제목</strong>
      </h1>
      <img src="https://weniv.link/static/img/2_chilli.svg" alt="이미지" />
      <div>
        <p><strong>단락 1</strong></p>
        <p><strong>단락 2</strong></p>
        <p><strong>단락 3</strong></p>
      </div>
    </section>
  </body>
</html>

<html>
  <head></head>
 
  <body>
    <section>
      <h1>
        <strong>제목</strong>
      </h1>
      <img src="https://weniv.link/static/img/2_chilli.svg" alt="이미지" />
      <div>
        <p><strong>단락 1</strong></p>
        <p><strong>단락 2</strong></p>
        <p><strong>단락 3</strong></p>
      </div>
    </section>
  </body>
</html>

위 예제 코드에서 요소들의 관계를 정리하면 다음과 같습니다.

<html>은 <head>와 <body>의 부모 요소입니다.
<head>와 <body>는 형제 관계에 있습니다.
<body>는 <section>의 부모 요소입니다.
<section>은 <h1>, <img>, <div>의 부모 요소입니다.
<h1>, <img>, <div>는 형제 관계에 있습니다.
<h1>은 <strong>의 부모 요소입니다.
<div>는 세 개의 <p> 요소의 부모 요소입니다.
세 개의 <p> 요소는 형제 관계에 있습니다.
각 <p> 요소는 <strong> 요소의 부모 요소입니다.

1.5 요소 간 관계의 중요성

요소 간 관계를 이해하는 것은 CSS를 사용하여 스타일을 적용할 때 특히 중요합니다. CSS 선택자를 사용하여 특정 요소를 선택하고 스타일을 적용할 수 있는데, 이때 요소 간 관계를 활용하여 더 정확하고 효율적으로 선택할 수 있습니다.

선택자 유형	문법	설명
자손 선택자	`A B`	A 내부의 모든 B 선택
자식 선택자	`A > B`	A의 직접 자식 B만 선택
인접 형제 선택자	`A + B`	A 바로 뒤의 형제 B 선택
일반 형제 선택자	`A ~ B`	A 뒤의 모든 형제 B 선택

예를 들어, <section> 내부의 모든 <p> 요소에 스타일을 적용하고 싶다면 다음과 같이 자손 선택자를 사용할 수 있습니다.

section p {
  color: blue;
}

section p {
  color: blue;
}

이렇게 하면 <section> 내부에 있는 모든 <p> 요소의 글자 색상이 파란색으로 변경됩니다.

또한, 인접 형제 선택자를 사용하여 특정 요소 바로 뒤에 오는 형제 요소를 선택할 수도 있습니다.

h1 + img {
  border: 1px solid black;
}

h1 + img {
  border: 1px solid black;
}

위 예제에서는 <h1> 요소 바로 뒤에 오는 <img> 요소에 검은색 테두리를 적용합니다.

HTML/CSS 베이스캠프

태그의 관계