list-style-image

리스트 항목의 마커로 사용할 이미지를 설정합니다. 이미지 마커는 URL이 필요하므로 Atomic CSS는 이미지 제거(none) 클래스만 제공하며, URL 지정은 프로젝트 CSS에서 직접 작성합니다.

클래스 목록

클래스	CSS	설명
`lsin`	list-style-image: none	리스트 마커 이미지 제거. 기본 마커(disc 등)로 복귀

마커 비교

세 목록의 마커가 어떻게 다른지 확인해 보세요. 가운데는 이미지 마커를 제거해 list-style-type의 기본 마커로 되돌아간 상태이고, 오른쪽은 마커 자체를 없애고 각 행에 이미지를 직접 넣은 방식입니다.

기본 마커

항목 1
항목 2
항목 3

list-style-type의 disc 마커. 이미지 마커가 설정되지 않은 평범한 목록입니다.

이미지 마커 제거

항목 1
항목 2
항목 3

lsin으로 이미지 마커를 끄면 list-style-type에 지정된 마커로 되돌아갑니다.

행마다 이미지 삽입

항목 1
항목 2
항목 3

마커를 없애고 각 행에 직접 이미지를 넣은 방식. 크기와 색을 자유롭게 다룰 수 있습니다.

이미지 마커는 원본 크기 그대로 그려지고 CSS로 크기를 조절할 수 없기 때문에, 실무에서는 세 번째 방식이나 마커 유사요소를 쓰는 경우가 많습니다.

클래스별 상세

`lsin`list-style-image: none

이미지 마커를 사용하지 않습니다. 초기값이기도 하지만, 테마나 리셋 스타일시트가 상위에서 이미지 마커를 지정해 둔 상황을 특정 목록에서만 되돌릴 때 실질적인 쓸모가 생깁니다.

<!-- Drop an image marker inherited from a theme or reset stylesheet -->
<ul class="lsin lsd">
  <li>Falls back to the disc marker</li>
  <li>The image marker from the ancestor rule is ignored</li>
</ul>

<!-- No image marker and no text marker at all -->
<ul class="lsin lsn">
  <li>Completely clean list</li>
  <li>Ready for a custom icon per row</li>
</ul>

제거하면 무엇이 남는가

list-style-image가 none이면 마커는 list-style-type이 결정합니다. 마커를 완전히 없애려면 lsn을 함께 지정하세요.

이미지 마커 지정하기

URL 값은 클래스명으로 표현할 수 없으므로 프로젝트 CSS에 직접 작성합니다. 외부 파일과 데이터 URI 모두 사용할 수 있습니다.

/* Atomic CSS only ships the none value, because an image marker needs a URL.
   Write the URL variant in your own stylesheet. */

.check-list {
  list-style-image: url("/icons/check.svg");
}

/* Inline SVG as a data URI, no extra request */
.check-list {
  list-style-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Ccircle cx='7' cy='7' r='5' fill='%236366F1'/%3E%3C/svg%3E");
}

/* The marker is drawn at the image's intrinsic size and cannot be resized,
   so the ::marker or flex approach below is usually easier to control. */
.check-list li::marker {
  color: #6366f1;
}

사용 예시

<!-- Remove list marker image -->
<ul class="lsin">
  <li>Shows the default disc marker instead of an image marker</li>
  <li>Useful for clearing image markers set by external CSS</li>
</ul>

<!-- Combined with list-style-type -->
<ul class="lsin lsn">
  <li>No image marker and no default marker</li>
  <li>Completely clean list</li>
</ul>

실전 예시: 요금제 카드의 기능 목록

마커를 없애고 행마다 아이콘을 직접 배치한 구성입니다. 항목마다 다른 아이콘을 쓰거나 비활성 항목을 흐리게 처리하는 등 이미지 마커로는 불가능한 표현이 가능합니다.

<!-- Feature list on a pricing card.
     lsn strips the built-in marker, and each row carries its own icon,
     which can be sized, coloured, and swapped per item -
     none of which list-style-image allows. -->
<div class="w32rem p2rem bg0F0F17 b1pxsolid27272A br8px">
  <h3 class="fs2rem fw700 cFAFAFA mb16px">Pro</h3>

  <ul class="lsin lsn pl0 df fdc gap12px fs14px cFAFAFA">
    <li class="df aic gap8px">
      <img src="/icons/check.svg" alt="" class="fs0 w14px h14px">
      <span>Unlimited projects</span>
    </li>
    <li class="df aic gap8px">
      <img src="/icons/check.svg" alt="" class="fs0 w14px h14px">
      <span>Priority support</span>
    </li>
    <li class="df aic gap8px o50">
      <img src="/icons/lock.svg" alt="" class="fs0 w14px h14px">
      <span>SSO (Enterprise only)</span>
    </li>
  </ul>
</div>

주의사항

URL이 있어야 이미지 마커가 생깁니다

list-style-image는 그림 파일이나 그라디언트 같은 이미지 값을 받습니다. 값이 none이거나 URL을 불러오지 못하면 조용히 list-style-type의 마커로 되돌아갑니다.

마커 크기를 조절할 수 없습니다

이미지는 원본 크기 그대로 그려지고 width나 background-size 같은 속성이 통하지 않습니다. 크기를 맞추려면 이미지 파일 자체를 원하는 크기로 준비하거나, 다른 방식으로 마커를 만드세요.

list-style 단축 속성이 값을 덮어씁니다

나중에 선언된 list-style 단축 속성은 생략된 부분을 초기값으로 되돌리므로, 애써 지정한 이미지 마커가 사라질 수 있습니다. 순서를 확인하세요.

마커는 스크린 리더가 읽지 않습니다

마커 이미지에는 대체 텍스트를 붙일 수 없습니다. 아이콘이 의미를 전달해야 한다면 마커 대신 본문 안의 이미지로 넣고 alt 텍스트를 제공하세요. 장식용이라면 alt를 빈 값으로 두면 됩니다.

list-style-type list-style-position