HTML의 순서 없는 목록(<ul>)과 순서 있는 목록(<ol>)의 스타일을 CSS로 커스터마이즈할 수 있습니다. list-style 속성은 리스트 항목의 마커(불렛 또는 번호)를 스타일링하는 데 사용되는 단축 속성입니다. 다음 세 가지 개별 속성을 포함합니다.

• list-style-type: 마커의 유형을 지정합니다.
• list-style-position: 마커의 위치를 지정합니다.
• list-style-image: 마커로 사용할 이미지를 지정합니다.

1. list-style-type

마커의 모양을 변경합니다. 주요 값으로는 다음과 같은 것들이 있습니다.

• disc: 채워진 원 (기본값)
• circle: 빈 원
• square: 채워진 사각형
• decimal: 숫자
• lower-alpha: 소문자 알파벳
• upper-roman: 대문자 로마 숫자
• 텍스트: 사용자가 지정하는 텍스트

아래 CSS 코드에서 list-style-type 속성을 바꿔보세요.

<ul class="custom-list">
  <li>사과</li>
  <li>바나나</li>
  <li>오렌지</li>
</ul>

.custom-list {
  list-style-type: square;
}

2. list-style-position

마커의 위치를 지정합니다.

• outside: 리스트 항목의 텍스트 블록 외부에 마커를 배치 (기본값)
• inside: 리스트 항목의 텍스트 블록 내부에 마커를 배치

list-style-position 속성은 리스트 항목의 들여쓰기와 줄바꿈 동작에도 영향을 미칩니다. outside로 설정하면 마커가 리스트 항목의 왼쪽 여백에 위치하며, 텍스트가 줄바꿈될 때 마커 아래로 텍스트가 흐르지 않습니다. 반면 inside로 설정하면 마커가 텍스트 블록 내부에 포함되어, 텍스트가 줄바꿈될 때 마커 아래로도 텍스트가 배치됩니다. 특히 리스트에 배경색이나 테두리를 적용할 때 이 차이가 명확하게 드러납니다. outside에서는 마커가 배경색 영역 밖에 위치하고, inside에서는 마커도 배경색 영역 안에 포함됩니다.

아래 CSS 코드에서 list-style-position 속성의 주석을 풀어보세요.

<ol class="outside">
  <li>첫 번째 항목</li>
  <li>두 번째 항목</li>
  <li>세 번째 항목</li>
  <li>항목이 길어지면 줄바꿈은 어떻게 일어날까요?</li>
</ol>

<ol class="inside">
  <li>첫 번째 항목</li>
  <li>두 번째 항목</li>
  <li>세 번째 항목</li>
  <li>항목이 길어지면 줄바꿈은 어떻게 일어날까요?</li>
</ol>

ol {
  background: pink;
  width: 150px;
}

.inside {
  list-style-position: inside;
}

3. list-style-image

list-style-image 속성은 기본 리스트 마커(점이나 숫자) 대신 사용자 지정 이미지를 사용할 수 있게 해줍니다. URL로 외부 이미지 파일을 지정하거나, 아래 예제처럼 Data URI 형식으로 SVG 이미지를 직접 삽입할 수도 있습니다.

이미지 마커 사용 시 주의할 점은 이미지 크기가 자동으로 조정되지 않기 때문에, 적절한 크기의 이미지를 준비해야 합니다. 또한 이미지 마커의 위치 조정이 제한적이므로, 더 정밀한 제어가 필요한 경우 list-style-type: none;으로 설정하고 ::before나 ::marker 가상 요소를 사용하는 방법이 사용되기도 했습니다. 최신 트렌드는 ::marker 가상요소를 활용하여 리스트 스타일링을 설정합니다.

(::marker에 관련한 내용은 챕터 11.4 가상 클래스와 가상 요소 에서 더 자세하게 다룰 예정입니다.)

<ul class="image-list">
  <li>밥 먹기</li>
  <li>산책 하기</li>
  <li>CSS 복습하기</li>
</ul>

.image-list {
  list-style-image: url("data:image/svg+xml;charset=UTF-8,<svg xmlns='http://www.w3.org/2000/svg' height='20' width='20' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2'><polyline points='20 6 9 17 4 12'></polyline></svg>");
}

4. @counter-style

@counter-style 규칙을 사용하면 사용자 정의 카운터 스타일을 만들 수 있습니다. 이를 통해 더 복잡하고 독특한 리스트 마커를 만들 수 있습니다.

이 규칙을 사용하면 카운터의 형식, 숫자 체계, 접두사/접미사 등을 세밀하게 제어할 수 있어 매우 다양한 리스트 스타일을 구현할 수 있습니다.

@counter-style 규칙의 주요 속성

• system: 카운팅 시스템 유형 (cyclic, numeric, alphabetic, fixed 등)
• symbols: 카운터에 사용할 기호 목록
• suffix: 각 카운터 뒤에 추가할 문자 (기본값은 '. ')
• range: 카운터가 적용될 범위
• fallback: 지정된 범위를 벗어났을 때 사용할 스타일

아래 예제에서는 이모지 숫자를 사용한 카운터 스타일을 정의했습니다.

<ol class="custom-counter">
  <li>첫 번째 항목</li>
  <li>두 번째 항목</li>
  <li>세 번째 항목</li>
</ol>

@counter-style emoji-numbers {
  system: fixed;
  symbols: '0️⃣' '1️⃣' '2️⃣' '3️⃣' '4️⃣' '5️⃣' '6️⃣' '7️⃣' '8️⃣' '9️⃣';
  suffix: ' ';
}

.custom-counter {
  list-style-type: emoji-numbers;
}