CSS에서 list-style-type 속성을 사용하면 목록 앞에 표시되는 마커(글머리 기호)의 모양과 형태를 자유롭게 제어할 수 있습니다. 이 속성은 순서 없는 목록(<ul>)뿐만 아니라 순서 있는 목록(<ol>)에도 적용할 수 있습니다.
주요 마커 스타일 값
list-style-type 속성에 사용할 수 있는 대표적인 값은 다음과 같습니다.
- disc – 기본값인 채워진 원형(●)
- circle – 속이 빈 원형(○)
- square – 채워진 사각형(■)
- none – 마커를 표시하지 않음
예제 코드
아래 예제는 인라인 스타일로 list-style-type 속성을 적용하여 순서 없는 목록의 마커를 빈 원형(circle)으로 변경한 코드입니다.
<html> <head> </head> <body> <ul style = "list-style-type:circle;"> <li>Apple</li> <li>Mango</li> <li>Grapes</li> </ul> </body> </html>
실행 결과
위 코드를 브라우저에서 실행하면 사과(Apple), 망고(Mango), 포도(Grapes) 항목 앞에 기본 채워진 원형 대신 빈 원형(○) 마커가 표시됩니다.
추가 팁
마커의 위치까지 조절하고 싶다면 list-style-position 속성을 함께 사용하면 됩니다. 또한 세 가지 목록 관련 속성(list-style-type, list-style-position, list-style-image)을 한 번에 지정하려면 단축 속성인 list-style을 활용하는 것이 좋습니다.