HTML에서 순서 있는 목록(ordered list)을 만들려면 <ol> 태그를 사용합니다. 목록 전체는 <ol> 태그로 감싸고, 각 항목은 <li> 태그로 작성합니다. 목록 항목 앞에는 숫자, 영문 소문자·대문자, 로마 숫자 등 다양한 기호가 붙을 수 있으며, 별도의 설정이 없으면 기본적으로 일반 숫자(1, 2, 3…)가 표시됩니다.
대문자 로마 숫자로 번호를 매긴 순서 있는 목록을 만들려면 <ol> 태그의 type 속성을 활용합니다. type 속성 값으로 "I"를 지정하면 다음과 같이 작성되며, 이 경우 목록 항목에 I, II, III처럼 대문자 로마 숫자가 차례로 붙습니다.
<ol type="I">
<li>첫 번째 항목</li>
<li>두 번째 항목</li>
</ol>예제
아래 코드를 실행하면 HTML에서 대문자 로마 숫자로 번호가 매겨진 목록 항목으로 구성된 순서 있는 목록을 확인할 수 있습니다.
<!DOCTYPE html> <html> <head> <title>World Cup Teams</title> </head> <body> <h1>List of teams for World Cup</h1> <ol type = "I"> <li>India</li> <li>Australia</li> <li>South Africa</li> <li>New Zealand</li> <li>Pakistan</li> <li>Srilanka</li> <li>West Indies</li> <li>Bangladesh</li> </ol> </body> </html>
참고: type 속성의 주요 값
- type="1" : 숫자 (1, 2, 3…)
- type="A" : 대문자 알파벳 (A, B, C…)
- type="a" : 소문자 알파벳 (a, b, c…)
- type="I" : 대문자 로마 숫자 (I, II, III…)
- type="i" : 소문자 로마 숫자 (i, ii, iii…)