AAtomic CSS

list-style-type

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

클래스 목록

클래스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: 설정 열기
  2. 단계 2: 옵션 선택
  3. 단계 3: 저장

ul에 decimal 적용 — lsde

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

실전 예시

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

<!-- 커스텀 네비게이션 메뉴 -->
<nav>
  <ul class="lsn p0 m0 df fdc gap4px">
    <li class="py8px px16px br8px hover-bg18181B cp">
      <a class="cFAFAFA tdn fs14px">대시보드</a>
    </li>
    <li class="py8px px16px br8px hover-bg18181B cp">
      <a class="cFAFAFA tdn fs14px">설정</a>
    </li>
    <li class="py8px px16px br8px hover-bg18181B cp">
      <a class="cFAFAFA tdn fs14px">프로필</a>
    </li>
  </ul>
</nav>

<!-- 리스트 초기화 + flex 조합 -->
<ul class="lsn p0 m0 df fww gap8px">
  <li class="bg27272A py4px px12px br4px cFAFAFA fs14px">태그 1</li>
  <li class="bg27272A py4px px12px br4px cFAFAFA fs14px">태그 2</li>
  <li class="bg27272A py4px px12px br4px cFAFAFA fs14px">태그 3</li>
</ul>

클래스별 상세

lsnlist-style-type: none

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

<!-- 기본 불릿 제거 -->
<ul class="lsn p0 m0">
  <li>불릿이 없는 항목</li>
  <li>깔끔한 리스트</li>
  <li>커스텀 스타일 적용 가능</li>
</ul>

<!-- 네비게이션 메뉴 -->
<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의 기본값입니다. 채워진 원형 불릿을 표시합니다. 기본 불릿을 명시적으로 복원하고 싶을 때 사용합니다.

<!-- disc 불릿 명시 -->
<ul class="lsd pl2rem">
  <li>기본 원형 불릿</li>
  <li>ul의 기본값과 동일</li>
  <li>명시적 복원에 사용</li>
</ul>

lsclist-style-type: circle

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

<!-- circle 불릿 -->
<ul class="lsc pl2rem">
  <li>빈 원형 불릿</li>
  <li>중첩 리스트 2단계에 적합</li>
  <li>disc보다 가벼운 느낌</li>
</ul>

lssqlist-style-type: square

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

<!-- square 불릿 -->
<ul class="lssq pl2rem">
  <li>사각형 불릿</li>
  <li>디자인 변화를 줄 때</li>
  <li>시각적으로 강조</li>
</ul>

lsdelist-style-type: decimal

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

<!-- 순서형 리스트 -->
<ol class="lsde pl2rem">
  <li>첫 번째 단계</li>
  <li>두 번째 단계</li>
  <li>세 번째 단계</li>
</ol>

<!-- 절차 가이드 -->
<ol class="lsde pl2rem df fdc gap8px">
  <li>프로젝트 생성</li>
  <li>의존성 설치</li>
  <li>개발 서버 실행</li>
  <li>배포</li>
</ol>

팁 & 주의사항

리스트 초기화 패턴

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

중첩 리스트에서 마커 구분

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

접근성 주의

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

list-style-positionlist-style-image