List Style Image

List Style Image

목록 항목의 마커(marker)로 사용할 이미지를 정해주는 유틸리티예요. 기본 원형 마커 대신 원하는 이미지를 표시할 수 있어요.

출처: 문서

본문

ClassStyles

예시 (Examples)

기본 예시 (Basic example)

list-image-[<value>] 문법을 사용하면 목록 항목의 마커 이미지를 제어할 수 있어요.

<ul class="list-image-[url(/img/checkmark.png)]">
  <li>5 cups chopped Porcini mushrooms</li>
  <!-- ... -->
</ul>

CSS 변수 사용하기 (Using a CSS variable)

list-image-(<custom-property>) 문법을 사용하면 CSS 변수로 목록 항목의 마커 이미지를 제어할 수 있어요.

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

이것은 list-image-[var(<custom-property>)]의 줄임말로, var() 함수를 자동으로 붙여주는 것뿐이에요.

마커 이미지 제거하기 (Removing a marker image)

list-image-none 유틸리티를 사용하면 목록 항목에 적용된 기존 마커 이미지를 제거할 수 있어요.

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

반응형 디자인 (Responsive design)

list-style-image 유틸리티 앞에 md: 같은 브레이크포인트 변형을 붙이면 중간 크기 화면 이상에서만 유틸리티가 적용되게 만들 수 있어요.

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

변형(variant) 사용법에 대해 더 알아보려면 variants 문서를 확인해 보세요.

더 알아보기 (Learn more)