list-style-image

리스트 항목의 마커 이미지를 제어하는 유틸리티입니다.

Class Styles

Class	Styles
`list-image-[<value>]`	`list-style-image: <value>;`
`list-image-(<custom-property>)`	`list-style-image: var(<custom-property>);`
`list-image-none`	`list-style-image: none;`

list-image-[<value>]

list-style-image: <value>;

list-image-(<custom-property>)

list-style-image: var(<custom-property>);

list-image-none

list-style-image: none;

예제

list-image-[<value>] 구문을 사용하여 리스트 아이템의 마커 이미지를 제어할 수 있습니다:

<ul class="list-image-[url(/img/checkmark.png)]">  <li>5컵 다진 표고버섯</li>  <!-- ... --></ul>

리스트 아이템의 마커 이미지를 CSS 변수로 제어하려면 list-image-(<custom-property>) 구문을 사용하세요:

<ul class="list-image-(--my-list-image)">  <!-- ... --></ul>

이 구문은 list-image-[var(<custom-property>)]의 축약형으로, 자동으로 var() 함수를 추가해 줍니다.

리스트 아이템에서 기존 마커 이미지를 제거하려면 list-image-none 유틸리티를 사용하세요:

<ul class="list-image-none">  <!-- ... --></ul>

접두사 a list-style-image 유틸리티 를 md:와 같은 브레이크포인트 변형과 함께 사용하면 medium 화면 크기 이상에서만 유틸리티가 적용됩니다:

<div class="list-image-none md:list-image-[url(/img/checkmark.png)] ...">  <!-- ... --></div>

변형 사용에 대해 더 알아보려면 변형 문서를 참고하세요.