list-style
HTML의 순서 없는 목록(<ul>)과 순서 있는 목록(<ol>)의 스타일을 CSS로 커스터마이즈할 수 있습니다. list-style 속성은 리스트 항목의 마커(불렛 또는 번호)를 스타일링하는 데 사용되는 단축 속성입니다.
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 속성을 바꿔보세요.
2. list-style-position
마커의 위치를 지정합니다.
outside: 리스트 항목의 텍스트 블록 외부에 마커를 배치 (기본값)inside: 리스트 항목의 텍스트 블록 내부에 마커를 배치
list-style-position 속성은 리스트 항목의 들여쓰기와 줄바꿈 동작에도 영향을 미칩니다. outside로 설정하면 마커가 리스트 항목의 왼쪽 여백에 위치하며, 텍스트가 줄바꿈될 때 마커 아래로 텍스트가 흐르지 않습니다. 반면 inside로 설정하면 마커가 텍스트 블록 내부에 포함되어, 텍스트가 줄바꿈될 때 마커 아래로도 텍스트가 배치됩니다.
특히 리스트에 배경색이나 테두리를 적용할 때 이 차이가 명확하게 드러납니다. outside에서는 마커가 배경색 영역 밖에 위치하고, inside에서는 마커도 배경색 영역 안에 포함됩니다.
아래 CSS 코드에서 list-style-position 속성의 주석을 풀어보세요.
3. list-style-image
마커로 사용할 이미지를 지정합니다.
list-style-image 속성은 기본 리스트 마커(점이나 숫자) 대신 사용자 지정 이미지를 사용할 수 있게 해줍니다. URL로 외부 이미지 파일을 지정하거나, 아래 예제처럼 Data URI 형식으로 SVG 이미지를 직접 삽입할 수도 있습니다.
이미지 마커 사용 시 주의할 점은 이미지 크기가 자동으로 조정되지 않기 때문에, 적절한 크기의 이미지를 준비해야 합니다. 또한 이미지 마커의 위치 조정이 제한적이므로, 더 정밀한 제어가 필요하다면 대신 list-style-type: none;으로 설정하고 ::before 가상 요소를 사용하는 방법이 권장됩니다.
(아래 5. 가상 요소를 사용한 리스트 스타일링 챕터를 참고해주세요.)
4. @counter-style
@counter-style 규칙을 사용하면 사용자 정의 카운터 스타일을 만들 수 있습니다. 이를 통해 더 복잡하고 독특한 리스트 마커를 만들 수 있습니다.
이 규칙을 사용하면 카운터의 형식, 숫자 체계, 접두사/접미사 등을 세밀하게 제어할 수 있어 매우 다양한 리스트 스타일을 구현할 수 있습니다.
@counter-style 규칙의 주요 속성
- system: 카운팅 시스템 유형 (cyclic, numeric, alphabetic, fixed 등)
- symbols: 카운터에 사용할 기호 목록
- negative: 음수 값을 표시하는 방법
- prefix: 각 카운터 앞에 추가할 문자
- suffix: 각 카운터 뒤에 추가할 문자 (기본값은 '. ')
- range: 카운터가 적용될 범위
- fallback: 지정된 범위를 벗어났을 때 사용할 스타일
아래 예제에서는 이모지 숫자를 사용한 카운터 스타일을 정의했습니다.
@counter-style은 일부 브라우저(예: Safari)에서 지원되지 않을 수 있습니다.
5. 가상 요소를 사용한 리스트 스타일링
리스트 스타일을 더욱 세밀하게 제어하고 싶다면, ::before 가상 요소를 사용하여 마커를 직접 만들 수 있습니다. 이 방법은 더 많은 유연성을 제공하며, 브라우저 호환성 문제도 피할 수 있습니다.
이러한 다양한 방법을 사용하여 리스트의 스타일을 원하는 대로 커스터마이즈할 수 있습니다. 각 방법의 장단점을 고려하여 프로젝트에 가장 적합한 방식을 선택하세요.
list-style - MDN Web Docs@counter-style - MDN Web Docs