List Style Position
List Style Position
목록 마커의 위치와 텍스트 들여쓰기를 정해주는 유틸리티예요. 마커가 텍스트 안쪽에 오는지 바깥쪽에 오는지를 결정해요.
출처: 문서
본문
ClassStyles
| Class | Properties |
|---|---|
list-inside |
list-style-position: inside; |
list-outside |
list-style-position: outside; |
예시 (Examples)
기본 예시 (Basic example)
list-inside와 list-outside 같은 유틸리티를 사용하면 목록에서 마커의 위치와 텍스트 들여쓰기를 제어할 수 있어요.
<ul class="list-inside">
<li>5 cups chopped Porcini mushrooms</li>
<!-- ... -->
</ul>
<ul class="list-outside">
<li>5 cups chopped Porcini mushrooms</li>
<!-- ... -->
</ul>
반응형 디자인 (Responsive design)
list-style-position 유틸리티 앞에 md: 같은 브레이크포인트 변형을 붙이면 중간 크기 화면 이상에서만 유틸리티가 적용되게 만들 수 있어요.
<ul class="list-outside md:list-inside ...">
<!-- ... -->
</ul>
변형(variant) 사용법에 대해 더 알아보려면 variants 문서를 확인해 보세요.