AAtomic CSS

list-style-position

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

클래스 목록

<tr> <th class="tal py12px px16px bg18181B bb2pxsolid27272A cA1A1AA fw600 ttu fs12px ls0-05em">클래스CSS설명
lspilist-style-position: inside불릿을 콘텐츠 흐름 안에 배치
lspolist-style-position: outside불릿을 콘텐츠 바깥에 배치 (기본값)

시각적 비교

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

inside — lspi

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

outside — lspo

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

클래스별 상세

lspilist-style-position: inside

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

<!-- Bullet inside content -->
<ul class="lsd lspi pl0">
  <li>Bullet is on the same line as text</li>
  <li>Clean alignment with padding-left: 0</li>
  <li>Suitable for lists inside cards</li>
</ul>

lspolist-style-position: outside

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

<!-- Bullet outside content (default) -->
<ul class="lsd lspo pl2rem">
  <li>Bullet is positioned outside the text</li>
  <li>Text aligns with bullet on line wrap</li>
  <li>Suitable for document lists</li>
</ul>

팁 & 주의사항

inside + padding-left 조합

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

list-style-type