CSS의 list-style-type 속성은 목록 항목 앞에 표시되는 마커(기호)의 모양을 지정하는 데 사용됩니다. 이 속성은 순서 없는 목록(<ul>)과 순서 있는 목록(<ol>) 모두에 적용할 수 있으며, 원이나 사각형 같은 기호부터 로마 숫자, 그리스 문자, 데바나가리 숫자 등 다양한 값으로 목록의 표시 방식을 자유롭게 변경할 수 있습니다.
문법(Syntax)
CSS list-style-type 속성의 기본 문법은 다음과 같습니다.
Selector {
list-style-type: /*값*/
}대표적인 값으로는 disc(채운 원), circle(빈 원), square(사각형), decimal(아라비아 숫자), lower-roman(소문자 로마 숫자), upper-alpha(대문자 알파벳) 등이 있으며, 필요에 따라 none을 지정해 마커를 아예 제거할 수도 있습니다.
예제 1 – 소문자 로마 숫자와 circle 마커 활용
다음 예제는 순서 있는 목록에는 소문자 로마 숫자를 적용하고, 마지막 목록 항목에는 빈 원(circle) 마커와 이탤릭체를 함께 사용한 예입니다.
<!DOCTYPE html>
<html>
<head>
<style>
ol li {
padding: 5px;
list-style-type: lower-roman;
}
li:last-child {
font-size: 1.2em;
font-style: italic;
list-style-type: circle;
}
</style>
</head>
<body>
<ol>
<li>demo1</li>
<li>
demo 2
<ul>
<li>demo a</li>
<li>demo b</li>
</ul>
</li>
<li>demo 3</li>
</ol>
</body>
</html>실행 결과
위 코드를 실행하면 다음과 같은 화면을 확인할 수 있습니다.
예제 2 – devanagari, lower-latin 등 다양한 마커 스타일
다음 예제는 목록 항목에 배경 그라디언트와 테두리를 추가하고, list-style-type 값을 devanagari로 지정한 뒤 마지막 항목만 lower-latin으로 변경한 예입니다.
<!DOCTYPE html>
<html>
<head>
<style>
ol li {
width: 50%;
margin: 5px;
font-size: 1.2em;
list-style-type: devanagari;
border: thin solid;
background: linear-gradient(to right, lightgreen, pink, lightblue);
}
li:last-child {
font-style: italic;
list-style-type: lower-latin;
}
</style>
</head>
<body>
<ol>
<li>Eh!?</li>
<li>
demo one
<ol>
<li>What!?</li>
<li>demo two</li>
</ol>
</li>
<li>demo 3</li>
<li>demo four</li>
</ol>
</body>
</html>실행 결과
위 코드를 실행하면 각 목록 항목마다 서로 다른 번호 체계가 적용된 것을 확인할 수 있습니다.
정리
list-style-type 속성 하나만으로도 목록의 시각적 인상을 크게 바꿀 수 있습니다. 특히 :last-child 같은 CSS 선택자와 조합하면 특정 항목만 다른 스타일로 강조하는 것도 가능합니다. 웹 페이지의 콘텐츠 성격에 맞게 다양한 마커 스타일을 활용해 보세요.