웹 페이지에서 목록을 만들 때 기본적으로 제공되는 원형이나 사각형 글머리 기호 대신, 자신만의 이미지를 사용하고 싶은 경우가 있습니다. 이럴 때 CSS의 list-style-image 속성을 사용하면 원하는 이미지를 글머리 기호로 지정할 수 있습니다.
list-style-image 속성이란?
list-style-image는 <ul> 또는 <ol> 태그의 목록 항목 앞에 표시되는 글머리 기호를 이미지로 대체하는 CSS 속성입니다. url() 함수를 통해 이미지 파일의 경로를 지정하면, 해당 이미지가 각 목록 항목 앞에 나타납니다.
사용 예제
아래 코드는 list-style-image 속성을 인라인 스타일로 적용하여, GIF 이미지를 글머리 기호로 사용하는 예제입니다.
<html> <head> </head> <body> <ul style = "list-style-image: url(/images/bullet.gif);"> <li>축구</li> <li>크리켓</li> </ul> </body> </html>
실행 결과
위 코드를 브라우저에서 실행하면 '축구'와 '크리켓' 항목 앞에 지정한 bullet.gif 이미지가 글머리 기호로 표시됩니다.
활용 팁
- 이미지 경로는 절대 경로 또는 상대 경로 모두 사용할 수 있습니다.
- 이미지 크기가 너무 크면 목록의 줄 간격이 어색해질 수 있으므로, 작은 크기의 아이콘(보통 16px 내외)을 사용하는 것이 좋습니다.
- 최신 CSS에서는 배경 이미지(background-image)와 padding을 조합하는 방식으로 더 세밀하게 위치를 조정할 수도 있습니다.