CSS의 list-style-type 속성을 사용하면 순서 없는 목록(unordered list)의 마커 모양과 스타일을 자유롭게 제어할 수 있습니다. 기본적으로 원형(disc)으로 표시되는 불릿 마커를 사각형, 속이 빈 원 등 다양한 형태로 변경할 수 있습니다.
주요 list-style-type 값
- disc – 기본값으로, 채워진 원형 마커
- circle – 속이 빈 원형 마커
- square – 채워진 사각형 마커
- none – 마커를 표시하지 않음
예제 코드
아래 예제는 인라인 스타일로 list-style-type 속성에 square(사각형) 값을 적용하여 목록 마커를 사각형으로 변경한 것입니다.
<html> <head> </head> <body> <ul style = "list-style-type:square;"> <li>India</li> <li>UK</li> <li>US</li> </ul> </body> </html>
실행 결과
위 코드를 브라우저에서 실행하면 각 목록 항목 앞에 기본 원형 대신 ■ 사각형 마커가 표시됩니다.
참고 사항
인라인 스타일뿐만 아니라 CSS 클래스나 외부 스타일시트를 통해서도 동일하게 적용할 수 있습니다.
ul.custom-list {
list-style-type: square;
}마커의 위치까지 조정하고 싶다면 list-style-position 속성을 함께 사용하면 되고, 마커 이미지를 직접 지정하려면 list-style-image 속성을 활용하면 됩니다. 이 세 가지 속성은 list-style 단축 속성으로 한 번에 설정할 수도 있습니다.