CSS로 순서 없는 목록(ul)과 순서 있는 목록(ol) 스타일링하기

웹 페이지에서 목록을 더 보기 좋게 만들고 싶다면 CSS의 list-style-type, list-style-image, list-style-position 속성을 활용하면 됩니다. 이 세 가지 속성만 잘 조합해도 순서 없는 목록(ul)과 순서 있는 목록(ol)의 불릿 기호와 번호 형식을 자유롭게 바꿀 수 있습니다.

1. list-style-type으로 불릿 모양 변경하기

list-style-type 속성은 목록 항목 앞에 표시되는 기호나 번호의 종류를 결정합니다. 아래 예제는 순서 없는 목록(ul)의 불릿을 사각형(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>

위 코드를 실행하면 기본 원형(disc) 대신 사각형 불릿이 각 항목 앞에 표시됩니다.

2. list-style-type으로 번호 형식 변경하기

순서 있는 목록(ol)에서도 같은 속성을 사용할 수 있습니다. 아래 예제는 번호를 대문자 로마숫자(upper-roman)로 표시하는 코드입니다.

예제 코드

<!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>

실행 결과를 보면 I, II, III처럼 로마숫자가 순서대로 붙어 있는 것을 확인할 수 있습니다. 그 외에도 lower-alpha(소문자 알파벳), decimal(숫자), lower-roman(소문자 로마숫자) 등 다양한 값을 사용할 수 있습니다.

3. list-style-image로 이미지 불릿 적용하기

기본 기호 대신 원하는 이미지를 불릿으로 사용하고 싶다면 list-style-image 속성에 이미지 URL을 지정하면 됩니다. 아래 예제에서는 순서 없는 목록과 순서 있는 목록 모두에 동일한 이미지를 불릿으로 적용했습니다.

예제 코드

<!DOCTYPE html>
<html>
<head>
<style>
ul.demo1 {
    list-style-image: url('https://www.tutorialspoint.com/images/Swift.png');
}
ol.demo2 {
    list-style-image: url('https://www.tutorialspoint.com/images/Swift.png');
}
</style>
</head>
<body>
<h2>Teams</h2>
<ul class="demo1">
<li>India - Qualified for WordCup</li>
<li>Australia - Qualified for WordCup</li>
<li>England - Qualified for WordCup</li>
</ul>
<h2>Players</h2>
<ol class="demo2">
<li>Virat Kohli</li>
<li>David Warner</li>
<li>Steve Smith</li>
</ol>
</body>
</html>

이처럼 클래스를 나누어 적용하면 ul과 ol에 서로 다른 이미지를 지정할 수도 있습니다. 브랜드 아이콘이나 체크 표시 등을 불릿으로 활용하면 디자인 완성도를 한층 높일 수 있습니다.

정리

list-style-type: 불릿 기호 또는 번호 형식 지정 (square, circle, upper-roman 등)
list-style-image: 이미지 파일을 불릿으로 사용
list-style-position: 불릿의 위치를 안(inside) 또는 밖(outside)으로 조절

세 속성을 하나의 축약 속성인 list-style로 한 번에 작성할 수도 있으니, 실무에서 코드를 간결하게 유지하고 싶다면 함께 익혀두는 것이 좋습니다.