CSS를 활용해 소문자 로마 숫자(i, ii, iii)가 매겨진 순서 목록(ordered list)의 스타일을 지정하는 방법을 알아보세요.
HTML에서 순서 목록을 만들 때는 다음 두 가지 태그를 사용합니다.
<ol>태그: 순서 목록 요소 자체를 정의합니다.<li>태그: 목록 안의 각 항목을 정의합니다.
기본적인 작성 예시는 다음과 같습니다.
<ol>
<li>List item</li>
<li>List item</li>
<li>List item</li>
</ol>별도의 스타일을 지정하지 않으면 순서 목록 항목은 일반적인 아라비아 숫자(1, 2, 3)로 표시됩니다.
- List item
- List item
- List item
이러한 기본 아라비아 숫자 스타일은 모든 브라우저에 내장된 사용자 에이전트 스타일시트(User-Agent Stylesheet, UAS)에서 비롯된 것입니다. 내부적으로는 다음과 같은 CSS 속성으로 정의되어 있습니다.
list-style-type: decimal;CSS로 소문자 로마 숫자 적용하기
소문자 로마 숫자가 매겨진 목록을 만들려면 CSS 속성 list-style-type을 사용해 기본 아라비아 숫자 스타일을 재정의하면 됩니다.
ol {
list-style-type: lower-roman;
}위 코드를 적용하면 목록 항목이 다음과 같이 소문자 로마 숫자로 표시됩니다.
- List item
- List item
- List item