CSS에서 목록의 스타일 유형을 변경하려면 list-style-type 속성을 사용합니다. 이 속성을 활용하면 순서 없는 목록(ul)의 불릿 모양이나 순서 있는 목록(ol)의 번호 형식을 자유롭게 지정할 수 있습니다.
주요 list-style-type 값
- disc – 기본값으로 채워진 원형 불릿
- circle – 빈 원형 불릿
- square – 사각형 불릿
- decimal – 1, 2, 3… 형식의 숫자
- lower-roman / upper-roman – 로마자 소문자(i, ii, iii) 또는 대문자(I, II, III)
- lower-alpha / upper-alpha – 알파벳 소문자(a, b, c) 또는 대문자(A, B, C)
- none – 목록 마커 제거
예제 1: 순서 없는 목록(ul)에 스타일 적용하기
다음 예제에서는 순서 없는 목록에 list-style-type: square;를 적용하여 사각형 불릿으로 표시합니다.
<!DOCTYPE html>
<html>
<head>
<style>
ul {
list-style-type: square;
}
</style>
</head>
<body>
<h2>Teams</h2>
<ul>
<li>India</li>
<li>Australia</li>
<li>England</li>
<li>West Indies</li>
<li>South Africa</li>
<li>Srilanka</li>
</ul>
</body>
</html>실행 결과
예제 2: 순서 있는 목록(ol)에 스타일 적용하기
이번에는 순서 있는 목록에 list-style-type: upper-roman;을 적용하여 대문자 로마 숫자(I, II, III…)로 번호가 매겨지도록 설정합니다.
<!DOCTYPE html>
<html>
<head>
<style>
ol {
list-style-type: upper-roman;
}
</style>
</head>
<body>
<h2>Teams</h2>
<ol>
<li>India</li>
<li>Australia</li>
<li>England</li>
<li>West Indies</li>
<li>South Africa</li>
<li>Srilanka</li>
</ol>
</body>
</html>실행 결과
정리
list-style-type 속성은 ul과 ol 요소 모두에 적용할 수 있으며, 개별 li 요소에도 지정할 수 있습니다. 웹 페이지의 디자인 톤에 맞게 목록 마커를 조절하면 가독성과 완성도를 높일 수 있습니다.