[HTML5] 목록을 만들어 주는 <ol>and</ol>, <li>and</li>

2023. 10. 3. 19:08HTML5

`<ol>` 요소는 순서 있는 목록(ordered list)을 생성하는 데 사용됩니다. 순서 있는 목록은 각 항목이 번호 또는 다른 순서 지시자(예: 알파벳, 로마 숫자)로 표시되며 항목 간에 순서가 중요한 경우에 사용됩니다. 

아래는 `<ol>` 요소의 기본 사용법 및 주요 특징을 설명한 예제입니다:

<ol>
  <li>첫 번째 항목</li>
  <li>두 번째 항목</li>
  <li>세 번째 항목</li>
</ol>

 

  1. 첫 번째 항목
  2. 두 번째 항목
  3. 세 번째 항목

위의 코드에서 `<ol>` 요소는 순서 있는 목록을 시작하며 `<li>` (list item) 요소는 각 항목을 정의합니다. 브라우저는 목록 항목을 자동으로 번호로 표시할 것입니다.

`<ol>` 요소의 몇 가지 중요한 특징은 다음과 같습니다:

1. 자동 번호링: `<ol>` 요소의 자식 `<li>` 요소는 자동으로 숫자로 번호가 매겨집니다. 기본값은 1부터 시작하며 순서대로 증가합니다.

2. 순서 지시자 변경: `<ol>` 요소의 `type` 속성을 사용하여 순서 지시자(기본값은 "1")를 변경할 수 있습니다. 예를 들어, `type="A"`를 설정하면 알파벳 대문자(A, B, C...)로 번호가 매겨집니다.

   <ol type="A">
     <li>첫 번째 항목</li>
     <li>두 번째 항목</li>
   </ol>
  1. 첫 번째 항목
  2. 두 번째 항목



3. 리스트 스타일: 순서 있는 목록은 브라우저에서 기본 스타일을 가집니다. 이 스타일을 CSS를 사용하여 변경하거나 사용자 정의할 수 있습니다.

4. 중첩된 목록: `<ol>` 요소 내에 다른 `<ol>` 요소나 `<ul>`(순서 없는 목록) 요소를 중첩하여 복잡한 리스트 구조를 만들 수 있습니다.

5. 세부 정보: `<ol>` 요소의 `start` 속성을 사용하여 시작 번호를 지정할 수 있습니다. 예를 들어, `start="5"`로 설정하면 목록이 5부터 시작합니다.

   <ol start="5">
     <li>다섯 번째 항목</li>
     <li>여섯 번째 항목</li>
   </ol>
  1. 다섯 번째 항목
  2. 여섯 번째 항목


순서 있는 목록은 문서의 구조화와 가독성을 높이는 데 유용하며 목록 항목 간의 상대적인 중요성이나 순서를 표현하는 데 사용됩니다.