CSS로 정렬된 목록에 대문자 로마 숫자 스타일 적용하는 방법

CSS의 list-style-type 속성을 활용하면 정렬된 목록(ordered list)의 번호를 대문자 로마 숫자(I, II, III…)로 손쉽게 변경할 수 있습니다. 이 글에서는 그 구현 방법을 예제와 함께 자세히 살펴봅니다.

HTML에서 정렬된 목록 만들기

HTML에서 정렬된 목록을 작성할 때는 다음 두 가지 태그를 사용합니다.

• <ol>: 정렬된 목록 요소 전체를 정의합니다.
• <li>: 목록 안의 각 항목을 정의합니다.

기본적인 작성 예시는 다음과 같습니다.

<ol>
  <li>List item</li>
  <li>List item</li>
  <li>List item</li>
</ol>

별도의 스타일을 지정하지 않으면 각 항목 앞에 일반 아라비아 숫자(1, 2, 3…)가 자동으로 붙습니다.

1. List item
2. List item
3. List item

이러한 기본 스타일은 모든 브라우저에 내장되어 있는 사용자 에이전트 스타일시트(User-Agent Stylesheet, UAS)에서 제공됩니다. CSS 관점에서 보면 list-style-type: decimal; 값이 기본적으로 적용되어 있는 것입니다.

CSS로 대문자 로마 숫자 적용하기

대문자 로마 숫자 목록을 만들려면 브라우저의 기본 decimal 스타일을 list-style-type 속성으로 덮어쓰면 됩니다.

ol {
  list-style-type: upper-roman;
}

위 코드를 적용한 결과는 다음과 같습니다.

1. List item
2. List item
3. List item

참고로 소문자 로마 숫자(i, ii, iii…)를 사용하고 싶다면 값을 lower-roman으로만 바꾸면 됩니다. 이처럼 list-style-type 속성 하나만으로 목록 번호 스타일을 자유롭게 제어할 수 있습니다.