WeniVooks

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

5. 가상 요소를 사용한 리스트 스타일링

리스트 스타일을 더욱 세밀하게 제어하고 싶다면, ::before 가상 요소를 사용하여 마커를 직접 만들 수 있습니다. 이 방법은 더 많은 유연성을 제공하며, 브라우저 호환성 문제도 피할 수 있습니다.

이러한 다양한 방법을 사용하여 리스트의 스타일을 원하는 대로 커스터마이즈할 수 있습니다. 각 방법의 장단점을 고려하여 프로젝트에 가장 적합한 방식을 선택하세요.