CSS의 list-style-image 속성은 목록 항목 앞에 표시되는 기본 불릿(bullet)이나 숫자 대신 원하는 이미지를 마커로 지정할 수 있는 기능입니다. 이 속성을 활용하면 웹사이트의 디자인 테마에 어울리는 커스텀 아이콘이나 그래픽으로 목록을 꾸밀 수 있어 시각적인 통일감을 높일 수 있습니다.
list-style-image 속성 기본 문법
기본 사용법은 다음과 같습니다:
list-style-image: url('이미지 경로');url() 함수 안에 마커로 사용할 이미지 파일의 경로를 지정하면 됩니다. GIF, PNG, SVG 등 웹에서 지원되는 이미지 형식을 모두 사용할 수 있습니다.
예제 코드
다음 예제는 list-style-image 속성을 인라인 스타일로 적용하여 첫 번째 목록 항목에만 커스텀 이미지 마커를 표시하는 방법을 보여줍니다:
<html> <head> </head> <body> <ul> <li style = "list-style-image: url(/images/bullet.gif);">Karnataka</li> <li>Hyderabad</li> </ul> </body> </html>
실행 결과
위 코드를 실행하면 'Karnataka' 항목 앞에는 지정한 bullet.gif 이미지가 마커로 표시되고, 두 번째 항목인 'Hyderabad'에는 기본 불릿 포인트가 그대로 나타납니다.
참고 사항
모든 목록 항목에 동일한 이미지 마커를 적용하려면 개별 li 요소가 아닌 ul 요소에 한 번만 스타일을 지정하는 것이 효율적입니다. 또한 이미지 크기가 너무 크면 목록 레이아웃이 깨질 수 있으므로, 작은 크기의 아이콘(보통 16px~24px)을 사용하는 것이 좋습니다.