CSS의 list-style-image 속성은 목록 항목(list item) 앞에 표시되는 마커를 기본 불릿 대신 원하는 이미지로 설정할 때 사용합니다. 이 속성을 활용하면 단조로운 점이나 숫자 대신 아이콘, 로고 등 다양한 이미지로 목록을 꾸밀 수 있어 디자인의 완성도를 높일 수 있습니다.
문법(Syntax)
CSS list-style-image 속성의 기본 문법은 다음과 같습니다.
Selector {
list-style-image: /*값*/
}값으로는 url('이미지 경로') 형태로 이미지를 지정하며, 마커를 제거하고 싶을 때는 none을 사용합니다.
예제 1
다음 예제는 list-style-image 속성을 사용하여 목록 마커를 이미지로 설정하는 방법을 보여줍니다.
<!DOCTYPE html>
<html>
<head>
<style>
ul {
width: 150px;
list-style-image: url("https://www.tutorialspoint.com/images/Servlets.png");
background: goldenrod;
}
li {
text-align: center;
background: lavenderblush;
margin: 5px 30px;
}
</style>
</head>
<body>
<h2>Servlets</h2>
<ul>
<li>Client Request</li>
<li>Server Response</li>
<li>Cookies Handling</li>
<li>Session Tracking</li>
</ul>
</body>
</html>실행 결과
위 코드를 실행하면 각 목록 항목 앞에 지정한 이미지가 마커로 표시되는 것을 확인할 수 있습니다.
예제 2
이번에는 글꼴 크기와 여백을 조절하여 이미지 마커가 더 잘 어울리도록 스타일링한 예제입니다.
<!DOCTYPE html>
<html>
<head>
<style>
ul {
margin-left: 20px;
list-style-image: url("https://www.tutorialspoint.com/images/hibernate.png");
}
li {
font-size: 1.3em;
text-align: center;
background: burlywood;
margin: 3px;
}
</style>
</head>
<body>
<h2>Hibernate Tutorial</h2>
<ul>
<li>Sessions</li>
<li>Persistent Class</li>
<li>Mapping Files</li>
<li>Mapping Types</li>
<li>Annotations</li>
</ul>
</body>
</html>실행 결과
위 코드를 실행하면 하이버네이트 아이콘이 목록 마커로 적용된 모습을 확인할 수 있습니다.
정리
list-style-image 속성을 사용하면 ul, ol 목록의 기본 마커를 손쉽게 이미지로 교체할 수 있습니다. 다만 이미지 크기 조절이 어렵다는 단점이 있으므로, 세밀한 제어가 필요하다면 background-image와 함께 사용하거나 최신 CSS에서 지원하는 ::marker 가상 요소를 활용하는 것도 좋은 방법입니다.