CSS의 list-style-type 속성을 사용하면 목록 앞에 표시되는 마커(불릿)의 모양과 스타일을 자유롭게 변경할 수 있습니다. 기본적으로 순서 없는 목록(ul)은 검은 원형 불릿(disc)이 표시되지만, 이 속성을 활용하면 동그라미, 사각형, 로마 숫자 등 다양한 형태로 바꿀 수 있습니다.
list-style-type 주요 값
- disc – 채워진 원형(기본값)
- circle – 빈 원형
- square – 채워진 사각형
- decimal – 1, 2, 3처럼 아라비아 숫자
- lower-roman / upper-roman – 소문자/대문자 로마 숫자
- lower-alpha / upper-alpha – 소문자/대문자 알파벳
- none – 마커를 표시하지 않음
사용 예제
아래 코드는 list-style-type 속성에 circle 값을 적용하여 목록 마커를 빈 원형으로 변경하는 예제입니다.
<html> <head> </head> <body> <ul style = "list-style-type:circle;"> <li>India</li> <li>Australia</li> </ul> </body> </html>
위 코드를 실행하면 각 항목 앞에 빈 원형 마커가 나타나는 것을 확인할 수 있습니다. 인라인 스타일 대신 CSS 파일이나 <style> 태그에서 클래스를 정의하여 적용하는 방식도 가능합니다.
ul.custom-list {
list-style-type: square;
}정리
list-style-type 속성은 웹 페이지에서 목록의 시각적 표현을 조절하는 가장 기본적인 도구입니다. 디자인 의도에 맞게 다양한 마커 스타일을 조합해 사용하면 콘텐츠의 가독성과 완성도를 높일 수 있습니다.