CSS의 list-style-type 속성을 사용하면 순서 있는 목록(ordered list)에서 번호 매기기 기호의 모양과 스타일을 자유롭게 제어할 수 있습니다. 이 속성 하나만으로 아라비아 숫자, 알파벳, 로마 숫자 등 다양한 형식의 번호를 간단히 적용할 수 있습니다.
list-style-type 속성이란?
list-style-type은 <ol> 또는 <ul> 요소에 적용할 수 있는 CSS 속성으로, 목록 항목 앞에 표시되는 마커(marker)의 종류를 결정합니다. 순서 있는 목록에서는 이 속성을 통해 번호 매기기 방식을 변경할 수 있습니다.
예제
<html> <head> </head> <body> <ol style = "list-style-type:decimal;"> <li>인도</li> <li>미국</li> <li>영국</li> </ol> </body> </html>
위 예제에서는 list-style-type:decimal;을 적용하여 목록 항목이 1, 2, 3 형태의 일반적인 아라비아 숫자로 표시됩니다.
자주 사용되는 주요 값
- decimal: 1, 2, 3, 4… (아라비아 숫자)
- upper-alpha: A, B, C, D… (대문자 알파벳)
- lower-alpha: a, b, c, d… (소문자 알파벳)
- upper-roman: I, II, III, IV… (대문자 로마 숫자)
- lower-roman: i, ii, iii, iv… (소문자 로마 숫자)
이처럼 상황에 맞는 값을 선택하면 문서의 성격에 어울리는 목록 스타일을 손쉽게 구현할 수 있습니다.