웹 페이지에서 목록을 만들다 보면 글머리 기호(bullet)의 색상만 따로 바꾸고 싶은 경우가 있습니다. 이럴 때 유용하게 사용할 수 있는 것이 바로 CSS의 ::marker 선택자입니다. ::marker 선택자를 사용하면 텍스트 색상과 별개로 목록 항목 앞에 붙는 마커(글머리 기호)의 색상을 손쉽게 지정할 수 있습니다.
::marker 선택자 문법
CSS ::marker 선택자의 기본 문법은 다음과 같습니다.
선택자::marker {
속성: /*값*/;
}예제 1: 원형 글머리 기호의 색상 변경
아래 예제는 ul 요소에 circle 스타일의 목록을 적용하고, li::marker 선택자로 글머리 기호의 색상을 초록색으로 변경하는 코드입니다.
<!DOCTYPE html>
<html>
<head>
<style>
ul {
list-style: circle;
font-size: 1.2em;
}
li::marker {
color: green;
}
</style>
</head>
<body>
<h2><strong>TMNT</strong></h2>
<ul>
<li>Raphael</li>
<li>Donatello</li>
<li>Michaelangelo</li>
<li>Leonardo</li>
</ul>
</body>
</html>위 코드를 실행하면 목록의 텍스트는 기본 색상을 유지한 채, 각 항목 앞의 원형 글머리 기호만 초록색으로 표시됩니다.
예제 2: 사각형 글머리 기호와 레이아웃 활용
다음 예제에서는 square 스타일의 목록에 ::marker 선택자를 적용하고, float와 box-shadow 속성을 함께 사용해 가로 배치된 카드 형태의 목록을 만들어 보겠습니다.
<!DOCTYPE html>
<html>
<head>
<style>
ul {
list-style: square;
overflow: hidden;
}
li::marker {
color: green;
}
li {
width: 15%;
margin: 2%;
float: left;
box-shadow: inset 2px 0px 10px lightblue;
}
</style>
</head>
<body>
<ul>
<li>ting</li>
<li>tong</li>
<li>ding</li>
<li>dong</li>
</ul>
</body>
</html>실행 결과를 확인하면 각 목록 항목이 옅은 파란색 그림자 효과가 있는 박스로 가로 정렬되고, 사각형 글머리 기호만 초록색으로 강조되어 표시됩니다.
정리
::marker 선택자는 목록의 시각적 완성도를 높이는 데 매우 간편한 도구입니다. color 속성 외에도 font-size, font-weight 등 일부 타이포그래피 관련 속성을 마커에 적용할 수 있으므로, 디자인 의도에 맞게 목록 스타일을 세밀하게 조정해 보시기 바랍니다.