요소 중첩 - by. UXKM

요약 설명

요소 중첩(Nesting)은 HTML 문서에서 한 요소가 다른 요소 내에 포함되는 것을 의미합니다. 이러한 중첩을 통해 HTML 요소는 논리적인 계층 구조를 형성하며, 디자인에 맞는 레이아웃을 구현할 수 있습니다.
올바른 중첩은 문서의 가독성과 유지보수성을 높입니다.

요소 중첩의 기본 규칙

  1. 올바른 계층 구조
    • 블록 요소는 다른 블록 요소나 인라인 요소를 포함할 수 있습니다.
      단, <p> 요소는 블록 요소이지만 다른 블록 요소가 포함될 수 없고, 인라인 요소만 포함될 수 있습니다.
    • 인라인 요소는 다른 인라인 요소를 포함할 수 있지만, 블록 요소를 포함할 수는 없습니다.
  2. 닫는(폐쇄) 태그
    • 모든 HTML 요소는 올바르게 닫혀야 합니다. 중첩된 요소가 있는 경우, 닫는 태그는 열리는 태그의 반대 순서로 닫아야 합니다.
    • 단, <meta>, <a>, <img>, <br>, <hr> 같은 단일 요소는 닫는 태그 없이 사용 가능합니다.

부모 요소와 자식 요소

HTML 요소 중첩에서 부모와 자식 관계는 HTML 문서의 구조를 이해하는 데 중요한 개념입니다.
부모와 자식 관계를 통해 문서의 계층 구조를 정의하고, 요소 간의 관계를 명확하게 할 수 있습니다.

  1. 부모 요소 (Parent Element)
    • 다른 요소를 포함하는 요소를 부모 요소라고 합니다.
    • 부모 요소는 자식 요소를 감싸고 있으며, 자식 요소의 바로 상위 계층에 위치합니다.
  2. 자식 요소 (Child Element)
    • 다른 요소 안에 포함된 요소를 자식 요소라고 합니다.
    • 자식 요소는 부모 요소에 포함되며, 부모 요소의 바로 하위 계층에 위치합니다.
  3. 부모와 자식 관계의 시각화 
    <div class="nesting">        <!-- 부모 요소 -->
  <h1>UXKM</h1>              <!-- 자식 요소 -->
  <div class="el">           <!-- 자식 요소 & 부모 요소 -->
    <p>여러분을 환영합니다.</p>   <!-- 자식 요소 -->
  </div>
</div>
    div elements - 탭 메뉴 code example - create ❤ by uxkm
    • 위 예제에서 <div class="nesting">는 최상위 부모 요소입니다.
    • <h1>, <div class="el">, <p> 모두 <div class="nesting">의 자식 요소입니다.
    • <div class="el">은 <div class="nesting">의 자식 요소이자, 동시에 <p> 요소의 부모 요소입니다.

요소 중첩의 잘못된 예와 올바른 예

요소의 중첩이 잘못되면 레이아웃 전체가 망가질 수 있으므로, 마크업 시 요소가 적절히 중첩되었는지 확인해야 합니다.
아래는 요소 중첩의 잘못된 예와 올바른 예입니다.

문단과 강조

  • 잘못된 예

    첫 번째 예제는 열린 태그의 반대 순서로 닫아야 하는 규칙을 지키지 않았고,
    두 번째 예제는 인라인 요소 안에 블록 요소가 들어갈 수 없는 규칙을 지키지 않았습니다. 

    <!-- 닫는 태그의 순서가 잘못된 예 -->
<p>
  블록 요소(단락) 안에 <strong>인라인 요소(강조)</p>가 중첩되어 있습니다.
</span>

<!-- 인라인 요소에 블록 요소가 잘못 중첩된 예 -->
<span>
  <p>블록 요소(단락) 안에 <strong>인라인 요소(강조)</strong>가 중첩되어 있습니다.</p>
</span>
    문단과 강조 - 요소 중첩의 잘못된 예 code example - create ❤ by uxkm
  • 올바른 예 
    <p>
  블록 요소(단락) 안에 <strong>인라인 요소(강조)</strong>가 중첩되어 있습니다.
</p>
    문단과 강조 - 요소 중첩의 올바른 예 code example - create ❤ by uxkm

리스트와 링크

  • 잘못된 예

    첫 번째 예제는 필수 요소가 누락되었습니다. <ul> 요소의 직계 자식(한 단계 밑)으로 <li> 요소가 반드시 있어야 합니다.
    두 번째 예제는 <a>요소를 단지 않았습니다. 

    <!-- ul 요소의 필수 직계 자식 요소인 li 요소를 누락한 예 -->
<ul>
  <a href="#home">홈</a>
  <a href="#about">소개</a>
  <a href="#contact">연락처</a>
</ul>

<!-- a 요소를 닫지 않은 예 -->
<ul>
  <li><a href="#home">홈</li>
  <li><a href="#about">소개</li>
  <li><a href="#contact">연락처</li>
</ul>
    리스트와 링크 - 요소 중첩의 잘못된 예 code example - create ❤ by uxkm
  • 올바른 예 
    <ul>
  <li><a href="#home">홈</a></li>
  <li><a href="#about">소개</a></li>
  <li><a href="#contact">연락처</a></li>
</ul>
    리스트와 링크 - 요소 중첩의 올바른 예 code example - create ❤ by uxkm

표 데이터

  • 잘못된 예 
    <!-- 잘못된 중첩: tr 요소가 td 요소 안에 직접 중첩됨 -->
<table>
  <tr>
    <td>첫 번째 셀</td>
    <tr>
      <td>잘못된 행</td>
    </tr>
  </tr>
</table>

<!-- 잘못된 중첩: td 요소 안에 또 다른 td 요소가 중첩됨 -->
<table>
  <tr>
    <td>첫 번째 셀</td>
    <td>두 번째 셀
      <td>잘못된 셀</td>
    </td>
  </tr>
</table>

<!-- 잘못된 중첩: thead 요소 안에 tbody 요소가 중첩됨 -->
<table>
  <thead>
    <tr>
      <th>헤더 셀</th>
      <tbody>
        <tr>
          <td>본문 셀</td>
        </tr>
      </tbody>
    </tr>
  </thead>
</table>
    표 데이터 - 요소 중첩의 잘못된 예 code example - create ❤ by uxkm
  • 올바른 예 
    <table>
  <thead>
    <tr>
      <th>헤더 셀</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>본문 셀</td>
    </tr>
  </tbody>
</table>
    표 데이터 - 요소 중첩의 올바른 예 code example - create ❤ by uxkm

시멘틱 레이아웃

  • 잘못된 예

    제목 요소 안에 블록 요소를 포함하는 것은 권장되지 않습니다.
    제목 요소(<h1>, <h2>, <h3>, 등)는 인라인 텍스트 콘텐츠를 포함하도록 설계되었기 때문에, 블록 요소를 포함하면 시맨틱 구조가 어긋나고, 브라우저의 기본 동작을 방해할 수 있습니다. 

    <body>
  <h1>
    웹사이트 제목
    <!-- 잘못된 중첩: h1 요소 안에 nav 요소가 중첩됨 -->
    <nav>
      <ul>
        <li><a href="#home">홈</a></li>
        <li><a href="#about">소개</a></li>
        <li><a href="#contact">연락처</a></li>
      </ul>
    </nav>
  </h1>

  <main>
    <article>
      <h3>첫 번째 독립된 콘텐츠 제목</h3>
      <p>첫 번째 독립된 콘텐츠 내용</p>
    </section> <!-- 잘못된 중첩: article 요소로 시작했으나 section 요소로 닫힘 -->
    <article>
      <h3>두 번째 독립된 콘텐츠 제목</h3>
      <p>두 번째 독립된 콘텐츠 내용</p>
    </article>
    </article> <!-- 잘못된 중첩: article 요소가 두번 닫힘 -->
  </main>

  <footer>
    <p>저작권 © 2019</p>
  </footer>
</body>
    시멘틱 레이아웃 - 요소 중첩의 잘못된 예 code example - create ❤ by uxkm
  • 올바른 예 
    <body>
  <header>
    <h1>웹사이트 제목</h1>
    <nav>
      <ul>
        <li><a href="#home">홈</a></li>
        <li><a href="#about">소개</a></li>
        <li><a href="#contact">연락처</a></li>
      </ul>
    </nav>
  </header>

  <main>
    <h2>콘텐츠 제목</h2>
    <article>
      <h3>첫 번째 독립된 콘텐츠 제목</h3>
      <p>첫 번째 독립된 콘텐츠 내용</p>
    </article>
    <article>
      <h3>두 번째 독립된 콘텐츠 제목</h3>
      <p>두 번째 독립된 콘텐츠 내용</p>
    </article>
  </main>

  <footer>
    <p>저작권 © 2019</p>
  </footer>
</body>
    시멘틱 레이아웃 - 요소 중첩의 올바른 예 code example - create ❤ by uxkm