HTML 순서가 있는 목록 생성 방법 - 웹 개발 튜토리얼

소개

HTML 에서 <ol> 태그를 사용하여 순서가 있는 목록을 만들 수 있습니다. 순서가 있는 목록은 특정 순서로 번호가 매겨진 항목의 목록입니다. <ol> 태그는 순서가 있는 목록을 생성하는 데 사용되며, <li> 태그는 목록의 각 항목을 정의하는 데 사용됩니다.

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

이것은 가이드 실험입니다. 학습과 실습을 돕기 위한 단계별 지침을 제공합니다.각 단계를 완료하고 실무 경험을 쌓기 위해 지침을 주의 깊게 따르세요. 과거 데이터에 따르면, 이것은 초급 레벨의 실험이며 완료율은 100%입니다.학습자들로부터 100%의 긍정적인 리뷰율을 받았습니다.

HTML 파일 설정

이 단계에서는 기본적인 HTML 파일을 생성하고 <ol> 태그를 설정합니다. "index.html" 파일을 열고 다음 코드를 입력하십시오:

<!doctype html>
<html>
  <head>
    <title>Ordered list Example</title>
  </head>
  <body>
    <h1>Ordered List Example</h1>
    <ol>
      <li>Item 1</li>
      <li>Item 2</li>
    </ol>
  </body>
</html>

목록에 항목 추가

이 단계에서는 순서가 있는 목록에 더 많은 항목을 추가합니다. 이렇게 하려면 여는 <ol> 태그와 닫는 <ol> 태그 사이에 더 많은 <li> 태그를 추가하기만 하면 됩니다:

<!doctype html>
<html>
  <head>
    <title>Ordered list Example</title>
  </head>
  <body>
    <h1>Ordered List Example</h1>
    <ol>
      <li>Item 1</li>
      <li>Item 2</li>
      <li>Item 3</li>
      <li>Item 4</li>
      <li>Item 5</li>
    </ol>
  </body>
</html>

숫자 타입 변경

이 단계에서는 순서가 있는 목록에서 사용되는 숫자 매기기 유형을 변경합니다. 기본적으로 순서가 있는 목록은 십진수 숫자 매기기를 사용합니다. 그러나 로마 숫자나 문자와 같은 다른 숫자 유형으로 변경할 수 있습니다. 숫자 매기기 유형을 변경하려면 <ol> 태그에서 type 속성을 사용하십시오. 예를 들어:

<!doctype html>
<html>
  <head>
    <title>Ordered list Example</title>
  </head>
  <body>
    <h1>Ordered List Example</h1>
    <ol type="I">
      <li>Item 1</li>
      <li>Item 2</li>
      <li>Item 3</li>
      <li>Item 4</li>
      <li>Item 5</li>
    </ol>
  </body>
</html>

위의 코드에서는 type 속성을 대문자 로마 숫자인 I로 설정했습니다.

특정 숫자부터 시작하는 번호 매기기

이 단계에서는 순서가 있는 목록 항목의 시작 숫자를 변경합니다. 기본적으로 순서가 있는 목록의 첫 번째 항목은 "1"로 시작합니다. 그러나 특정 숫자부터 시작하도록 변경할 수 있습니다. 시작 숫자를 변경하려면 <ol> 태그에서 start 속성을 사용하십시오. 예를 들어:

<!doctype html>
<html>
  <head>
    <title>Ordered list Example</title>
  </head>
  <body>
    <h1>Ordered List Example</h1>
    <ol start="3">
      <li>Item 3</li>
      <li>Item 4</li>
      <li>Item 5</li>
    </ol>
  </body>
</html>

위의 코드에서는 start 속성을 3으로 설정했습니다. 즉, 순서가 있는 목록의 첫 번째 항목은 "3"으로 번호가 매겨집니다.

요약

이 랩에서는 <ol> 태그를 사용하여 HTML 에서 순서가 있는 목록을 만드는 방법을 배웠습니다. 또한 목록에 항목을 추가하고, 숫자 매기기 유형을 변경하고, 특정 숫자부터 숫자 매기기를 시작하는 방법도 배웠습니다. 이 지식을 통해 웹 페이지에서 전문적인 모습의 목록을 만들 수 있습니다.