HTML 순서 리스트(Ordered Lists)

HTML <ol> 태그는 순서 리스트를 정의한다. 순서 리스트는 숫자 또는 알파벳 순일 수 있다.

HTML 순서 리스트

순서 리스트는 <ol> 태그로 시작한다. 각 리스트 항목은 <li> 태그로 시작한다.
리스트 항목은 기본적으로 숫자로 표시된다:

<!DOCTYPE html>
<html>
<body>

<h2>순서 리스트</h2>

<ol>
  <li>커피</li>
  <li>차</li>
  <li>우유</li>
</ol>

</body>
</html>

HTML 순서 리스트 - type 속성

<ol> 태그의 type 속성은 리스트 항목 마커의 유형을 정의한다:

type	설명
type="1"	리스트 항목의 번호는 숫자로 지정됩니다(기본값)
type="A"	리스트 항목에는 대문자로 번호가 매겨집니다
type="a"	리스트 항목에는 소문자로 번호가 매겨집니다
type="I"	리스트 항목에는 대문자 로마자 번호가 지정됩니다
type="i"	리스트 항목에는 소문자 로마자 번호가 지정됩니다

<!DOCTYPE html>
<html>
<body>

<h2>숫자 순서 리스트</h2>

<ol type="1">
  <li>커피</li>
  <li>차</li>
  <li>우유</li>
</ol>

</body>
</html>

<!DOCTYPE html>
<html>
<body>

<h2>대문자 순서 리스트</h2>

<ol type="A">
  <li>커피</li>
  <li>차</li>
  <li>우유</li>
</ol>

</body>
</html>

<!DOCTYPE html>
<html>
<body>

<h2>소문자 순서 리스트</h2>

<ol type="a">
  <li>커피</li>
  <li>차</li>
  <li>우유</li>
</ol>

</body>
</html>

<!DOCTYPE html>
<html>
<body>

<h2>대문자 로마숫자 순서 리스트</h2>

<ol type="I">
  <li>커피</li>
  <li>차</li>
  <li>우유</li>
</ol>

</body>
</html>

<!DOCTYPE html>
<html>
<body>

<h2>소문자 로마숫자 순서 리스트</h2>

<ol type="i">
  <li>커피</li>
  <li>차</li>
  <li>우유</li>
</ol>

</body>
</html>

제어 리스트 계산(Control List counting)

기본적으로 순서가 지정된 리스트는 1부터 계산하기 시작한다. 지정된 숫자부터 카운트를 시작하려면 start 특성을 사용할 수 있다:

<!DOCTYPE html>
<html>
<body>

<h2>start 속성</h2>
<p>기본적으로 순서가 지정된 목록은 1부터 계산하기 시작합니다. 시작 속성을 사용하여 지정된 숫자부터 카운트 시작:</p>

<ol start="50">
  <li>커피</li>
  <li>차</li>
  <li>우유</li>
</ol>

<ol type="I" start="50">
  <li>커피</li>
  <li>차</li>
  <li>우유</li>
</ol>

</body>
</html>

HTML 중첩 리스트

리스트는 중첩될 수 있다.(리스트 내에 리스트)

<!DOCTYPE html>
<html>
<body>

<h2>중첩 리스트</h2>
<p>리스트는 중첩될 수 있다.(리슽Lists can be nested (list inside list):</p>

<ol>
  <li>커피</li>
  <li>차
    <ol>
      <li>홍차</li>
      <li>녹차</li>
    </ol>
  </li>
  <li>우유</li>
</ol>

</body>
</html>

참고: 리스트 항목(<li>)은 새 리스트와 이미지 및 링크 등의 기타 HTML 요소를 포함할 수 있다.

마무리

HTML <ol> 요소를 사용하여 정렬된 리스트를 정의한다
HTML type 속성을 사용하여 번호 유형 정의
HTML <li> 요소를 사용하여 목록 항목 정의
리스트는 중첩될 수 있다
리스트 항목은 다른 HTML 요소를 포함할 수 있다

출처 : 이 글의 출처는 w3schools사이트를 참고하였으며 필자가 추가하여 정리한 글입니다.

저작자표시 비영리 변경금지 (새창열림)

'HTML > HTML 기본문법' 카테고리의 다른 글

HTML 블록 및 인라인 요소 (0)	2023.05.17
HTML 기타 리스트 (0)	2023.05.16
HTML 리스트(Lists) (0)	2023.05.14
HTML 순서가 지정되지 않은 리스트(Unordered Lists) (0)	2023.05.13
HTML 테이블 Colgroup (0)	2023.05.12

enjoyCoding

HTML 순서 리스트(Ordered Lists)