thinkNote

■ 요약

▶ HTML <ol> 요소를 사용하여 정렬된 목록을 정의한다.

▶ HTML "type" 속성을 사용하여 번호 매김 유형을 정의한다.

▶ HTML <li> 요소를 사용하여 목록의 항목을 정의한다.

▶ 목록은 정렬될 수 있다.

▶ 목록의 항목은 다른 HTML 요소를 포함할 수 있다.

▶ HTML <ol> 태그는 정렬된 목록을 정의한다.

▶ 정렬된 목록은 숫자 또는 알파벳 순일 수 있다.

■ 정렬된 목록

▶ 정렬된 목록은 <ol> 태그로 시작한다.

▶ 각 목록의 항목은 <li> 태그로 시작한다.

▶ 목록의 항목은 기본적으로 숫자로 표시된다.

<ol>
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ol>

실습 : https://www.w3schools.com/html/tryit.asp?filename=tryhtml_lists_ordered2 

■ 정렬된 목록 - "type" 속성

▶ <ol> 태그의 "type" 속성은 목록의 항목 표시 유형을 정의한다.

▷ type="1" : (기본) 숫자로 번호가 매겨진다.

<ol type="1">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ol>

실습 : https://www.w3schools.com/html/tryit.asp?filename=tryhtml_lists_ordered_numbers 

▷ type="A" : 대문자 알파벳으로 번호가 매겨진다.

<ol type="A">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ol>

실습 : https://www.w3schools.com/html/tryit.asp?filename=tryhtml_lists_ordered_ucase 

▷ type="a" : 소문자 알파벳으로 번호가 매겨진다.

<ol type="a">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ol>

실습 : https://www.w3schools.com/html/tryit.asp?filename=tryhtml_lists_ordered_lcase 

▷ type="I" (대문자 i): 대문자 로마 숫자로 번호가 매겨진다.

<ol type="I">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ol>

실습 : https://www.w3schools.com/html/tryit.asp?filename=tryhtml_lists_ordered_roman_ucase 

▷ type="i" : 소문자 로마 숫자로 번호가 매겨진다.

<ol type="i">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ol>

실습 : https://www.w3schools.com/html/tryit.asp?filename=tryhtml_lists_ordered_roman_lcase 

■ 목록 카운트 제어

▶ 기본적으로 정렬된 목록은 1 부터 카운트를 시작한다.

▶ 지정된 숫자로 카운트를 시작하고 싶다면 "start" 속성을 사용할 수 있다.

<ol start="50">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ol>

실습 : https://www.w3schools.com/html/tryit.asp?filename=tryhtml_lists_start 

■ 중첩된 목록

▶ 목록은 중첩될 수 있다.

<ol>
  <li>Coffee</li>
  <li>Tea
    <ol>
      <li>Black tea</li>
      <li>Green tea</li>
    </ol>
  </li>
  <li>Milk</li>
</ol>

실습 : https://www.w3schools.com/html/tryit.asp?filename=tryhtml_lists_nested_ol 

※ 목록의 항목(<li>)은 이미지와 링크 등 다른 HTML 요소와 새 목록을 포함할 수있다.

출처 : https://www.w3schools.com/html/html_lists_ordered.asp