List Style Type

List Style Type

목록의 마커 스타일을 정해주는 유틸리티예요. 원형(disc), 숫자(decimal), 없음(none) 등 다양한 마커 스타일을 선택할 수 있어요.

출처: 문서

본문

ClassStyles

예시 (Examples)

기본 예시 (Basic example)

list-disc, list-decimal 같은 유틸리티를 사용하면 목록에서 마커의 스타일을 제어할 수 있어요.

<ul class="list-disc">
  <li>Now this is a story all about how, my life got flipped-turned upside down</li>
  <!-- ... -->
</ul>

<ol class="list-decimal">
  <li>Now this is a story all about how, my life got flipped-turned upside down</li>
  <!-- ... -->
</ol>

<ul class="list-none">
  <li>Now this is a story all about how, my life got flipped-turned upside down</li>
  <!-- ... -->
</ul>

사용자 정의 값 사용하기 (Using a custom value)

list-[<value>] 문법을 사용하면 완전히 사용자 정의한 값으로 마커를 정할 수 있어요.

<ol class="list-[upper-roman] ...">
  <!-- ... -->
</ol>

CSS 변수를 사용할 때는 list-(<custom-property>) 문법도 쓸 수 있어요.

<ol class="list-(--my-marker) ...">
  <!-- ... -->
</ol>

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

반응형 디자인 (Responsive design)

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

<ul class="list-none md:list-disc ...">
  <!-- ... -->
</ul>

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

더 알아보기 (Learn more)