list-style-type 속성에서 순서 없는 목록 앞에 붙는 불릿의 유형이 단조로운 편입니다. 불릿의 모양을 더 다양하게 사용하고 싶다면 list-style-image 속성을 이용해 불릿을 원하는 이미지로 바꿀 수 있습니다.
list-style-image
list-style-image로 이미지를 <ul>,
<ol> 등의 목록의 마커로 사용할 수 있습니다.
기본형
list-style-image : none | url
- none : 이미지가 없습니다.
- url : 사용할 이미지의 URL을 입력합니다.
예제
다음은 순서 없는 목록에서 항목 앞의 불릿를 이미지로 바꾼 예제입니다.
<ul class="fit">
<li>Lorem ipsum dolor sit amet</li>
<li>Aenean nec mollis nulla.</li>
</ul>
<ul class="unfit">
<li>Lorem ipsum dolor sit amet</li>
<li>Aenean nec mollis nulla.</li>
</ul>
ul.fit {
list-style-image: url( "https://bit.ly/2GqYPc7" );
font-size: 38px;
}
ul.unfit {
list-style-image: url( "https://bit.ly/2GqYPc7" );
font-size: 16px;
}
이미지는 원본 크기 그대로 나옵니다. 따라서 글자 크기에 맞는 이미지를 만들어야 합니다.