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
: 리스트 항목의 텍스트 블록 내부에 마커를 배치
아래 CSS 코드에서 list-style-position
속성을 바꿔보세요.
3. list-style-image
마커로 사용할 이미지를 지정합니다.
4. @counter-style
@counter-style
규칙을 사용하면 사용자 정의 카운터 스타일을 만들 수 있습니다. 이를 통해 더 복잡하고 독특한 리스트 마커를 만들 수 있습니다.
@counter-style
은 일부 브라우저(예: Safari)에서 지원되지 않을 수 있습니다.
5. 가상 요소를 사용한 리스트 스타일링
리스트 스타일을 더욱 세밀하게 제어하고 싶다면, ::before 가상 요소를 사용하여 마커를 직접 만들 수 있습니다. 이 방법은 더 많은 유연성을 제공하며, 브라우저 호환성 문제도 피할 수 있습니다.
이러한 다양한 방법을 사용하여 리스트의 스타일을 원하는 대로 커스터마이즈할 수 있습니다. 각 방법의 장단점을 고려하여 프로젝트에 가장 적합한 방식을 선택하세요.
list-style - MDN Web Docs@counter-style - MDN Web Docs