AAtomic CSS

list-style-type

리스트 항목의 불릿(마커) 스타일을 제어합니다. lsn이 가장 많이 사용되며, 기본 불릿을 제거하고 커스텀 리스트를 만들 때 필수입니다.

클래스 목록

<tr> <th class="tal py12px px16px bg18181B bb2pxsolid27272A cA1A1AA fw600 ttu fs12px ls0-05em">클래스CSS설명
lsnlist-style-type: none불릿 제거. 커스텀 리스트의 시작점
lsdlist-style-type: disc채워진 원형 불릿 (ul 기본값)
lsclist-style-type: circle비어 있는 원형 불릿
lssqlist-style-type: square채워진 사각형 불릿
lsdelist-style-type: decimal숫자 마커 (ol 기본값)

시각적 비교

각 불릿 스타일이 리스트 항목에 어떻게 표시되는지 비교합니다.

None — lsn

  • 첫 번째 항목
  • 두 번째 항목
  • 세 번째 항목

Disc — lsd

  • 첫 번째 항목
  • 두 번째 항목
  • 세 번째 항목

Circle — lsc

  • 첫 번째 항목
  • 두 번째 항목
  • 세 번째 항목

Square — lssq

  • 첫 번째 항목
  • 두 번째 항목
  • 세 번째 항목

순서형 리스트 (decimal)

lsde는 숫자 마커를 사용합니다. ol 태그의 기본값이지만, ul에도 적용할 수 있습니다.

ol 기본 — lsde

  1. 단계 1: Settings 열기
  2. 단계 2: 옵션 선택
  3. 단계 3: 저장

ul에 decimal 적용 — lsde

  • 비순서형이지만 숫자 표시
  • 마커 스타일 변경 가능
  • 유연한 사용

실전 예시

lsn으로 기본 불릿을 제거하고 커스텀 스타일을 적용하는 패턴입니다.

<!-- Custom navigation menu -->
<nav>
  <ul class="lsn p0 m0 df fdc gap4px">
    <li class="py8px px16px br8px hover-bg18181B cp">
      <a class="cFAFAFA tdn fs14px">Dashboard</a>
    </li>
    <li class="py8px px16px br8px hover-bg18181B cp">
      <a class="cFAFAFA tdn fs14px">Settings</a>
    </li>
    <li class="py8px px16px br8px hover-bg18181B cp">
      <a class="cFAFAFA tdn fs14px">Profile</a>
    </li>
  </ul>
</nav>

<!-- List reset + flex combination -->
<ul class="lsn p0 m0 df fww gap8px">
  <li class="bg27272A py4px px12px br4px cFAFAFA fs14px">Tag 1</li>
  <li class="bg27272A py4px px12px br4px cFAFAFA fs14px">Tag 2</li>
  <li class="bg27272A py4px px12px br4px cFAFAFA fs14px">Tag 3</li>
</ul>

클래스별 상세

lsnlist-style-type: none

리스트의 기본 불릿/숫자 마커를 완전히 제거합니다. 네비게이션, 카드 목록, 사이드바 메뉴 등 커스텀 리스트를 만들 때 가장 많이 사용됩니다.

<!-- Remove default bullets -->
<ul class="lsn p0 m0">
  <li>Item without bullet</li>
  <li>Clean list</li>
  <li>Can apply custom styles</li>
</ul>

<!-- Navigation Menu -->
<ul class="lsn p0 m0 df gap2rem">
  <li><a href="#">Home</a></li>
  <li><a href="#">About</a></li>
  <li><a href="#">Contact</a></li>
</ul>

자주 쓰는 조합

lsn p0 m0리스트 스타일 완전 초기화
lsn p0 m0 df gap2rem가로 네비게이션 메뉴
lsn p0 m0 df fdc gap4px세로 사이드바 메뉴
lsn p0 m0 df fww gap8px태그/뱃지 목록

lsdlist-style-type: disc

ul의 기본값입니다. 채워진 원형 불릿을 표시합니다. 기본 불릿을 명시적으로 복원하고 싶을 때 사용합니다.

<!-- Explicit disc bullets -->
<ul class="lsd pl2rem">
  <li>Default circle bullet</li>
  <li>Same as ul default</li>
  <li>Used for explicit restoration</li>
</ul>

lsclist-style-type: circle

비어 있는 원형 불릿을 표시합니다. 중첩 리스트에서 하위 단계를 구분할 때 주로 사용합니다.

<!-- Circle bullets -->
<ul class="lsc pl2rem">
  <li>Hollow circle bullets</li>
  <li>Suitable for nested list level 2</li>
  <li>Lighter feel than disc</li>
</ul>

lssqlist-style-type: square

채워진 사각형 불릿을 표시합니다. 디자인 변화를 줄 때 사용합니다.

<!-- Square bullets -->
<ul class="lssq pl2rem">
  <li>Square bullets</li>
  <li>For design variation</li>
  <li>Visual emphasis</li>
</ul>

lsdelist-style-type: decimal

ol의 기본값입니다. 숫자(1, 2, 3...)로 항목 순서를 표시합니다. 절차, 단계별 가이드 등에 적합합니다.

<!-- Ordered list -->
<ol class="lsde pl2rem">
  <li>Step one</li>
  <li>Step two</li>
  <li>Step three</li>
</ol>

<!-- Procedure guide -->
<ol class="lsde pl2rem df fdc gap8px">
  <li>Create project</li>
  <li>Install dependencies</li>
  <li>Run dev server</li>
  <li>Deploy</li>
</ol>

팁 & 주의사항

리스트 초기화 패턴

lsn p0 m0를 조합하면 브라우저 기본 리스트 스타일을 완전히 제거할 수 있습니다. 커스텀 네비게이션, 메뉴를 만들 때 기본 세팅으로 추천합니다.

중첩 리스트에서 마커 구분

1단계는 lsd(disc), 2단계는 lsc(circle), 3단계는 lssq(square)로 사용하면 계층을 시각적으로 구분할 수 있습니다.

접근성 주의

lsn을 적용해도 스크린리더는 리스트 구조를 인식합니다. 시맨틱 마크업(ul/ol)을 유지하는 것이 중요합니다.

list-style-positionlist-style-image