HTML 목록 항목 (`<li>`)과 중첩 목록

HTML 목록 항목 (<li>)과 중첩 목록

HTML에서 목록을 작성할 때, 각 항목을 나타내는 요소로 <li> 태그를 사용합니다. <li> 태그는 리스트의 각 항목을 감싸는 데에 사용되며, 순서 없는 목록(<ul>)과 순서 있는 목록(<ol>)에서 모두 사용됩니다. 이번 글에서는 <li> 태그의 역할과 사용법, 그리고 중첩 목록에 대해 자세히 알아보겠습니다.

<li> 태그

<li> 태그는 리스트의 각 항목을 나타내는 요소로 사용됩니다. 순서 없는 목록(<ul>)이나 순서 있는 목록(<ol>) 안에서 사용될 때, 각 항목은 <li> 태그로 감싸집니다. <li> 태그는 시작 태그(<li>)와 종료 태그(</li>)로 이루어져 있습니다.

아래는 <li> 태그의 사용 예시입니다:

<ul>
  <li>항목 1</li>
  <li>항목 2</li>
  <li>항목 3</li>
</ul>

<ol>
  <li>항목 1</li>
  <li>항목 2</li>
  <li>항목 3</li>
</ol>

위의 예시에서는 <ul> 태그와 <ol> 태그 내에 각각의 목록 항목을 <li> 태그로 감싸서 나열했습니다.

중첩 목록

HTML에서는 중첩 목록을 생성할 수 있습니다. 중첩 목록은 목록 내에 또 다른 목록을 포함하는 형태입니다. 중첩 목록은 기존 목록(<ul> 또는 <ol>)의 <li> 태그 안에 또 다른 목록을 작성하여 구현할 수 있습니다.

아래는 중첩 목록의 사용 예시입니다:

<ul>
  <li>항목 1</li>
  <li>항목 2
    <ul>
      <li>하위 항목 1</li>
      <li>하위 항목 2</li>
    </ul>
  </li>
  <li>항목 3</li>
</ul>

위의 예시에서는 <ul> 태그 내에 중첩된 <ul> 태그를 작성하여 하위 항목을 만들었습니다.

마무리

HTML에서는 <li> 태그를 사용하여 목록의 각 항목을 작성합니다. 순서 없는 목록(<ul>)과 순서 있는 목록(<ol>)에서 모두 사용되며, <li> 태그는 시작 태그(<li>)와 종료 태그(</li>)로 이루어져 있습니다. 중첩 목록을 생성할 수 있어 복잡한 목록 구조를 표현할 수 있습니다. 이러한 목록 태그를 활용하여 웹 페이지의 구조를 체계적으로 정리하고 내용을 효과적으로 전달해보세요. 다음 글에서는 HTML의 다른 유용한 요소들에 대해 다루어보겠습니다. 기대해주세요!