AAtomic CSS

list-style-position

리스트 항목의 불릿(마커) 위치를 제어합니다. lspi는 불릿을 콘텐츠 흐름 안에 배치하고, lspo는 콘텐츠 바깥에 배치합니다.

클래스 목록

클래스CSS설명
lspilist-style-position: inside불릿을 콘텐츠 흐름 안에 배치
lspolist-style-position: outside불릿을 콘텐츠 바깥에 배치 (기본값)

시각적 비교

inside와 outside의 불릿 위치 차이를 비교합니다.

inside — lspi

  • 불릿이 콘텐츠 안에 위치
  • 텍스트와 같은 흐름
  • 줄바꿈 시 불릿 아래로 텍스트 정렬

outside — lspo

  • 불릿이 콘텐츠 바깥에 위치
  • 기본값 (default)
  • 줄바꿈 시 텍스트가 불릿과 정렬

클래스별 상세

lspilist-style-position: inside

불릿을 리스트 항목 콘텐츠 흐름 안에 배치합니다. 불릿이 텍스트의 첫 번째 줄에 인라인으로 포함되며, 줄바꿈 시 불릿 아래로 텍스트가 이어집니다.

<!-- 불릿이 콘텐츠 안에 위치 -->
<ul class="lsd lspi pl0">
  <li>불릿이 텍스트와 같은 줄에 위치합니다</li>
  <li>padding-left: 0으로 깔끔하게 정렬</li>
  <li>카드 안 리스트에 적합</li>
</ul>

lspolist-style-position: outside

기본값입니다. 불릿을 리스트 항목 콘텐츠 바깥에 배치합니다. 줄바꿈 시 텍스트가 불릿 옆에 정렬되어 가독성이 좋습니다.

<!-- 불릿이 콘텐츠 바깥에 위치 (기본값) -->
<ul class="lsd lspo pl2rem">
  <li>불릿이 텍스트 바깥에 위치합니다</li>
  <li>줄바꿈 시 텍스트가 불릿과 정렬</li>
  <li>일반 문서 리스트에 적합</li>
</ul>

팁 & 주의사항

inside + padding-left 조합

lspi 사용 시 pl0을 적용하면 불릿이 콘텐츠 영역 안에서 깔끔하게 정렬됩니다.

list-style-type