[HTML/CSS] li 리스트의 점 색깔 바꾸기 (::marker)

 

CSS에서

<li> 태그를 사용하여 목록을 만들면

목록 앞에 점 또는 숫자가 보여집니다.

(<ul> 태그와 사용하면 점, <ol> 태그와 함께 사용하면 숫자)

이 점 또는 숫자의 색깔을 바꾸기 위해서

CSS의 ::marker 가상 요소를 사용할 수 있습니다.

 

::marker

::marker는 리스트 아이템 앞에 오는 마커를 선택하는 가상 요소입니다.

 

 

 

리스트의 점 색깔 바꾸기 

<ul>
  <li>하나</li>
  <li>둘</li>
  <li>셋</li>
</ul>

li::marker {
  color: red;
}

li::marker { color: red; }

::marker 가상 요소로 li의 마커를 선택하여 마커의 색깔을 변경하였습니다.

 

 

 

리스트의 점 대신 하트로 바꾸기

<ul>
  <li>하나</li>
  <li>둘</li>
  <li>셋</li>
</ul>

li::marker {
  content: '❤ ';
  color: pink;
}

li::marker { ... }

::marker 가상 요소로 li 앞의 마커를 선택하여, 

기존의 점 모양을 하트로 변경하고,

색상도 변경하였습니다.