HTML 목록 항목

소개

HTML 목록은 항목을 목록으로 표시하는 데 사용되며, 웹 개발에서 중요한 역할을 합니다. HTML li 태그는 목록의 항목을 정의하는 데 사용됩니다. li 태그는 ul 또는 ol 태그와 함께 사용되며, 순서가 없는 목록과 순서가 있는 목록을 만드는 데 완벽합니다. 이 랩에서는 li 태그를 사용하여 HTML 목록을 만드는 방법에 대한 단계별 지침을 제공합니다.

참고: index.html에서 코딩을 연습할 수 있으며, Visual Studio Code 에서 HTML 을 작성하는 방법을 배울 수 있습니다. 웹 서비스를 포트 8080 에서 실행하려면 오른쪽 하단의 'Go Live'를 클릭하십시오. 그런 다음 Web 8080 탭을 새로 고쳐 웹 페이지를 미리 볼 수 있습니다.

순서 없는 목록 만들기

HTML ul 태그를 사용하여 순서가 없는 목록을 만들 수 있습니다. 목록에 항목을 추가하려면 li 태그를 사용해야 합니다. 세 개의 항목이 있는 순서가 없는 목록을 만들어 보겠습니다.

<!-- index.html -->

<ul>
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
</ul>

위의 코드에서 ul 태그를 사용하여 순서가 없는 목록을 만들고, li 태그를 사용하여 목록의 각 항목을 정의했습니다.

순서 있는 목록 만들기

순서가 있는 목록을 만드는 것은 순서가 없는 목록을 만드는 것과 매우 유사하며, 유일한 차이점은 ul 태그 대신 ol 태그를 사용한다는 것입니다. 세 개의 항목이 있는 순서가 있는 목록을 만들어 보겠습니다.

<!-- index.html -->

<ol>
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
</ol>

위의 코드에서 ol 태그를 사용하여 순서가 있는 목록을 만들고, li 태그를 사용하여 목록의 각 항목을 정의했습니다.

li 태그에 속성 추가하기

li 태그는 목록 항목의 글머리 기호 스타일을 수정하는 데 사용할 수 있는 여러 속성을 지원합니다. 일반적으로 사용되는 속성은 목록 항목의 글머리 기호를 변경하는 데 사용할 수 있는 type 속성입니다. 1 단계에서 만든 순서가 없는 목록을 type 속성을 사용하여 업데이트해 보겠습니다.

<!-- index.html -->

<ul>
  <li type="circle">Item 1</li>
  <li type="disc">Item 2</li>
  <li type="square">Item 3</li>
</ul>

위의 코드에서 type 속성을 사용하여 목록 항목에 서로 다른 글머리 기호를 추가했습니다. circle 값을 사용하여 글머리 기호를 채워지지 않은 원으로 만들고, disc 값을 사용하여 글머리 기호를 채워진 원으로 만들고, square 값을 사용하여 글머리 기호를 채워진 사각형으로 만들었습니다.

목록 중첩

단일 목록 안에 여러 목록을 중첩할 수 있습니다. 순서가 있는 목록을 만들고, 순서가 있는 목록의 두 번째 항목 안에 순서가 없는 목록을 추가해 보겠습니다.

<!-- index.html -->

<ol>
  <li>Item 1</li>
  <li>
    Item 2
    <ul>
      <li>Sub-item 1</li>
      <li>Sub-item 2</li>
    </ul>
  </li>
  <li>Item 3</li>
</ol>

위의 코드에서 ul 태그를 사용하여 순서가 없는 목록을 만들고, li 태그를 사용하여 목록의 각 항목을 정의했습니다. 또한 순서가 있는 목록의 두 번째 항목 안에 순서가 없는 목록을 중첩했습니다.

요약

이 랩에서는 li 태그를 사용하여 HTML 목록을 만드는 방법을 배웠습니다. ul 태그와 li 태그를 사용하여 순서가 없는 목록을 만드는 것으로 시작했습니다. 그런 다음 ol 태그와 li 태그를 사용하여 순서가 있는 목록을 만들었습니다. 또한 li 태그에 속성을 추가하여 목록 항목 글머리 기호의 스타일을 수정하는 방법도 배웠습니다. 마지막으로, 단일 목록 안에 여러 목록을 중첩하는 방법을 배웠습니다.