웹 페이지에서 기본 불릿(bullet)이나 숫자 대신 이미지를 목록 마커로 사용하고 싶다면, CSS의 list-style-image 속성을 활용하면 됩니다. 이 속성은 <ul>과 <ol> 모두에 적용할 수 있어, 순서 없는 목록과 순서 있는 목록 모두에서 원하는 이미지를 마커로 표시할 수 있습니다.
기본 문법
list-style-image: url('이미지 경로');예제
다음 예제는 ul 목록과 ol 목록에 각각 동일한 이미지를 마커로 적용한 사례입니다.
<!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.demo1 클래스가 적용된 팀 목록과 ol.demo2 클래스가 적용된 선수 목록에서 동일하게 확인할 수 있습니다.
참고 사항
list-style-image 속성은 이미지 크기를 직접 조절할 수 없으므로, 마커로 사용할 이미지는 미리 적절한 크기(보통 16×16px 내외)로 준비하는 것이 좋습니다. 또한 이미지 로딩에 실패할 경우를 대비해 list-style-type 속성을 함께 지정해 두면 폴백(fallback) 마커를 설정할 수 있습니다.