HTML에서 순서가 지정된 목록(ordered list)을 만들려면 <ol> 태그를 사용합니다. 순서 목록은 <ol> 태그로 시작하며, 각 목록 항목은 <li> 태그로 작성합니다. 목록 항목 앞에는 숫자, 영문 소문자(a, b, c), 영문 대문자(A, B, C), 로마 숫자(i, ii, iii) 등 다양한 기호가 붙을 수 있으며, 별도의 설정을 하지 않으면 기본적으로 숫자가 표시됩니다.
type 속성으로 숫자 번호 지정하기
숫자로 번호가 매겨진 순서 목록을 만들려면 <ol> 태그의 type 속성을 활용합니다. 이 속성에 "1" 값을 지정하면 목록 항목이 1, 2, 3…과 같은 숫자 형식으로 번호가 매겨집니다.
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…)
예제
다음 코드를 실행하면 월드컵 참가 국가 목록이 숫자로 번호가 매겨진 순서 목록으로 화면에 표시됩니다.
<!DOCTYPE html> <html> <head> <title>World Cup Teams</title> </head> <body> <h1>List of teams for World Cup</h1> <ol type = "1"> <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>
참고: CSS를 활용한 최신 방식
HTML5에서도 type 속성은 여전히 동작하지만, 웹 표준 관점에서는 CSS의 list-style-type 속성을 사용하는 것이 권장됩니다. 예를 들어 <ol style="list-style-type: decimal;">처럼 작성하면 동일하게 숫자 번호가 적용되며, 스타일과 구조를 분리해 관리할 수 있어 유지보수에 더 유리합니다.