Intermediate HTML: 중첩과 들여쓰기 (Nesting and Indentation)

HTML에서는 목록을 작성할 때, 목록 안에 또 다른 목록을 포함시키는 중첩(Nesting) 이 가능하다. 이를 통해 더 복잡한 계층적 구조를 만들 수 있다. 또한, 들여쓰기(Indentation) 는 코드의 가독성을 높이고, 오류를 쉽게 발견할 수 있도록 도와준다.

---

목록 중첩(Nesting Lists)

1. HTML에서는 순서 없는 목록(Unordered List, <ul>)과 순서 있는 목록(Ordered List, <ol>)을 작성할 수 있다.
2. 하나의 <li>(목록 항목) 내부에 또 다른 <ul>이나 <ol>을 포함시킬 수 있다.
3. 중첩된 목록은 화면에서 계층적으로 보이도록 들여쓰기 형태로 나타난다.
4. 기본 구조:

<ul>
  <li>첫 번째 항목</li>
  <li>두 번째 항목
    <ul> <!-- 중첩된 목록 -->
      <li>두 번째 항목 안의 첫 번째 항목</li>
      <li>두 번째 항목 안의 두 번째 항목</li>
    </ul>
  </li>
  <li>세 번째 항목</li>
</ul>

 

위 코드는 화면에 다음과 같이 렌더링된다:

---

중첩 시 주의사항

중첩된 목록이 포함된 <li>는 목록의 내용이 끝난 이후에 닫는다.

• 예를 들어:

<li>두 번째 항목
  <ul>
    <li>내용</li>
  </ul>
</li>

 

중첩된 목록은 코드 작성 시 들여쓰기로 구조를 명확히 표현해야 한다.

---

들여쓰기(Indentation)

1. HTML 코드를 작성할 때, 들여쓰기는 가독성을 높이고 구조를 쉽게 이해할 수 있도록 돕는다.
2. Visual Studio Code(VS Code)와 같은 IDE는 저장 시 자동으로 들여쓰기를 정리해준다.
   • 단축키:
     • Mac: Command + S
     • Windows: Ctrl + S
3. 들여쓰기를 올바르게 적용하지 않을 경우:
   • 코드의 구조가 복잡할수록 가독성이 떨어지고, 에러를 발견하기 어려워진다.
   • 예시:

<ul>
<li>첫 번째 항목</li>
<li>두 번째 항목
<ul>
<li>두 번째 항목 안의 첫 번째 항목</li>
<li>두 번째 항목 안의 두 번째 항목</li>
</ul>
</li>
<li>세 번째 항목</li>
</ul>

 

위 코드는 들여쓰기가 맞지 않아, 구조를 한눈에 파악하기 어렵다.

---

결론

중첩과 들여쓰기는 HTML 코드의 가독성과 유지보수성을 높이는 핵심 요소이다. 이를 통해 복잡한 구조의 목록도 간결하고 명확하게 표현할 수 있다. 다음 강의에서는 앵커 태그(Anchor Elements)와 하이퍼링크(Hyperlinks)를 배우며, 웹 페이지 간 이동을 구현해볼 것이다.