HTML 리스트 생성 <ol> 태그 - 순서가 존재하는 목록 생성

OL 태그란?

OL (Ordered List) 태그는 정렬된 목록을 생성하는 도구입니다. <ul> 태그가 마커로 정렬하는 것과 달리 <ol>은 순서대로 정렬하는 태그입니다. 기본값은 숫자이지만 알파벳을 이용할 수도 있지요. <ol> 태그 역시 li (List) 태그와 항상 함께 다닙니다.

 

사용법

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

• <ol> 태그를 엽니다. 앞으로 순서가 존재하는 리스트를 만들거라고 선언한거죠
• 다음 줄에 들여쓰기를 한 뒤 <li> 태그를 만듭니다. 원하는 만큼 만들면 됩니다.
• <li> </li> 태그 사이에 원하는 목록을 추가합니다.
• </ol> 태그를 써서 닫습니다.

 

예시

See the Pen OL by 40's Programmer (@40sProgrammer) on CodePen.

 

UL 태그의 속성

ol 태그에서 자주 사용하는 2가지 속성 type, start에 대해 알아보겠습니다.

 

사용법

<ol type="A" start="1">
    <li>List 1</li>
    <li>List 2</li>
    <li>List 3</li>
</ol>

• type은 목록의 순서를 어떤 형태로 보여줄지 지정하는 속성입니다
  • "1": 숫자로 표현된 순서를 사용합니다
  • "A": 대문자 알파벳으로 표현된 순서를 사용합니다
  • "a": 소문자 알파벳으로 표현된 순서를 사용합니다
  • "I": 대문자 로마 숫자로 표현된 순서를 사용합니다
  • "i": 소문자 로마 숫자로 표현된 순서를 사용합니다
• start는 시작하는 숫자를 지정하는 속성입니다. 기본값은 1입니다.

 

예시

See the Pen OL by 40's Programmer (@40sProgrammer) on CodePen.

저는 로마자로 변경하고, 2부터 시작하는 걸로 변경해봤어요.