HTML에서 순서 있는 목록(Ordered List)을 만들려면 <ol> 태그를 사용합니다. 순서 목록은 <ol> 태그로 시작하고, 각 목록 항목은 <li> 태그로 작성됩니다. 목록 항목에는 기본적으로 숫자가 붙지만, 필요에 따라 소문자 알파벳, 대문자 알파벳, 로마 숫자 등 다양한 형식으로 표시할 수 있습니다.
type 속성으로 소문자 로마 숫자 지정하기
소문자 로마 숫자(i, ii, iii...)로 번호가 매겨진 순서 목록을 만들려면 <ol> 태그의 type 속성을 사용합니다. type 속성 값에 "i"를 지정하면 목록 항목 앞에 소문자 로마 숫자가 자동으로 붙습니다.
예를 들어 <ol type="i">와 같이 작성하면, 목록 전체가 소문자 로마 숫자로 번호가 매겨집니다.
참고로 type 속성에 사용할 수 있는 주요 값은 다음과 같습니다.
- 1 – 기본값, 아라비아 숫자(1, 2, 3...)
- A – 대문자 알파벳(A, B, C...)
- a – 소문자 알파벳(a, b, c...)
- I – 대문자 로마 숫자(I, II, III...)
- i – 소문자 로마 숫자(i, ii, iii...)
예제 코드
아래 코드를 실행하면 월드컵 참가 팀 목록이 소문자 로마 숫자로 번호가 매겨져 표시되는 것을 확인할 수 있습니다.
<!DOCTYPE html> <html> <head> <title>World Cup Teams</title> </head> <body> <h1>월드컵 참가 팀 목록</h1> <ol type = "i"> <li>인도</li> <li>호주</li> <li>남아프리카공화국</li> <li>뉴질랜드</li> <li>파키스탄</li> <li>스리랑카</li> <li>서인도제도</li> <li>방글라데시</li> </ol> </body> </html>
실행 결과
위 코드를 브라우저에서 열면 다음과 같이 각 팀 이름 앞에 i, ii, iii, iv... 형식의 소문자 로마 숫자가 순서대로 표시됩니다.
이처럼 <ol> 태그의 type 속성만 변경하면 별도의 CSS 없이도 간단하게 목록 번호 스타일을 바꿀 수 있습니다. 더 세밀한 스타일링이 필요한 경우 CSS의 list-style-type 속성을 활용하는 것도 좋은 방법입니다.