타이포그래피
list-style-position
리스트의 불릿과 숫자 위치를 조절하는 유틸리티입니다.
| Class | Styles |
|---|---|
list-inside | list-style-position: inside; |
list-outside | list-style-position: outside; |
예제
기본 예제
list-inside와 list-outside 같은 유틸리티를 사용하여 목록에서 마커의 위치와 텍스트 들여쓰기를 제어할 수 있습니다:
list-inside
- 5 cups chopped Porcini mushrooms
- 1/2 cup of olive oil
- 3lb of celery
list-outside
- 5 cups chopped Porcini mushrooms
- 1/2 cup of olive oil
- 3lb of celery
<ul class="list-inside"> <li>5 cups chopped Porcini mushrooms</li> <!-- ... --></ul><ul class="list-outside"> <li>5 cups chopped Porcini mushrooms</li> <!-- ... --></ul>반응형 디자인
접두사 a list-style-position 유틸리티 를 md:와 같은 브레이크포인트 변형과 함께 사용하면 medium 화면 크기 이상에서만 유틸리티가 적용됩니다:
<ul class="list-outside md:list-inside ..."> <!-- ... --></ul>변형 사용에 대해 더 알아보려면 변형 문서를 참고하세요.
