::marker 가상 요소 선택자

::marker 가상 요소 선택자는
<li>나 <summary>처럼 display 속성의 값이 list-item인 요소에 자동으로 생성된 리스트 마커를 선택하는 선택자입니다.
이 리스트 마커는 글머리 기호나 숫자 등이 포함된 가상의 요소를 말합니다.

::marker 가상 요소 선택자를 활용하면 리스트 마커를 다양하게 스타일링할 수 있습니다.

HTML 
<style>
    li::marker {
        color: red; /* 마커 색상 */
        font-size: 0.8em; /* 마커 크기 */
    }
</style>
<ul>
    <li>라면</li>
    <li>김밥</li>
    <li>돈까스</li>
</ul>
실제 적용된 모습

리스트 마커

리스트 마커(마커 상자라고도 불리우는)는 리스트 아이템 앞에 자동으로 생성된 글머리 기호나 숫자 등을 의미합니다.

리스트 아이템 앞에 자동으로 생성된 리스트 마커

여기에서 눈여겨볼 것은 <summary>에도 리스트 마커가 있다는 것입니다.
<summary>에 생성된 리스트 마커는 ►로 표시되어 있습니다. <summary>는 display 속성의 값이 list-item입니다.

HTML <summary> 태그

display 속성의 값이 list-item인 모든 요소에는 리스트 마커가 자동으로 생성됩니다.
이렇게 자동으로 생성된 리스트 마커는 ::marker 가상 요소 선택자를 활용해서 다양하게 스타일링할 수 있습니다.

<summary> 리스트 마커의 브라우저 호환성 주의: Safari 브라우저

데스크탑의 Safari 브라우저와 모바일용 Safari에서는 <summary>의 display 속성의 값을 list-item으로 지원하지 않습니다.

따라서, 데스크탑의 Safari 브라우저와 모바일용 Safari에서는 <summary>에 ::marker 가상 요소 선택자를 사용할 수 없습니다.

하지만, 데스크탑의 Safari 브라우저와 모바일용 Safari에서는 <summary>의 리스트 마커에 적용할 수 있는 선택자가 별도로 있습니다.

데스크탑의 Safari 브라우저와 모바일용 Safari에서는 <summary>에 ::-webkit-details-marker 가상 요소 선택자를 사용하세요!

::-webkit-details-marker 가상 요소 선택자는 비표준 가상 요소 선택자이지만 데스크탑의 Safari 브라우저와 모바일용 Safari에서는 리스트 마커를 제어할 때 사용하면 됩니다.

리스트 마커 스타일링하기

::marker 가상 요소 선택자를 활용해서 리스트 마커를 스트일링하는 데모 예시입니다.

마커 스타일링 - 1

HTML 
<style>
    li::marker {
        content: "- "; /* 마커 내용 */
    }
</style>
<ul>
    <li>라면</li>
    <li>김밥</li>
    <li>돈까스</li>
</ul>
실제 적용된 모습

::marker 가상 요소 선택자에 content 속성을 사용해서 마커 내용을 변경할 수 있습니다. content 속성은 해당하는 CSS 가상 요소 선택자(::before, ::after, ::marker)로 생성하는 가상 요소의 콘텐츠를 지정하는 속성입니다.

CSS content 속성

마커 스타일링 - 2

HTML 
<style>
    li::marker {
        content: "😃 ";
        font-size: 0.8em;
    }
</style>
<ul>
    <li>라면</li>
    <li>김밥</li>
    <li>돈까스</li>
</ul>
웹 페이지에서 이모지(이모티콘) 사용하기
실제 적용된 모습

::marker 가상 요소 선택자로 적용할 수 있는 속성

::marker 가상 요소 선택자로 적용할 수 있는 속성은 정해져 있습니다. 다음은 ::marker 가상 요소 선택자로 적용할 수 있는 속성 리스트입니다.

  • content
  • font-size
  • color

위 속성들은 모든 브라우저에서 지원합니다.
하지만, 다른 속성들은 브라우저 호환성을 보장할 수 없습니다.

예를 들어, animation이나 transiton 속성의 경우 대부분의 브라우저에서는 지원하지만 Safari 브라우저에서는 지원하지 않습니다.

Safari 지원은 content와 color 및 font-size로 제한됩니다.

명세서에는 향후 추가 CSS 속성이 지원될 수 있다고 명시되어 있습니다.

리스트 마커 스타일링의 유용한 활용 팁!

리스트 마커를 커스텀으로 스타일링하는 유용한 활용 팁과 정보가 있습니다.
다음의 링크를 참조하세요!

브라우저 호환성

::marker 가상 요소 선택자의 브라우저 호환성
선택자
데스크탑 Chrome
Chrome
데스크탑데스크탑 Edge
Edge
데스크탑 Firefox
Firefox
Safari
Safari
::marker 86 86 68 11.1

caniuse.com에서 더 자세한 정보를 확인해 보세요.

명세서

::marker 가상 요소 선택자의 명세서 사양
명세서 사양
::marker CSS Pseudo-Elements Module Level 4
#marker-pseudo

참고문헌

같이 보기