이제 <ul> 또는 <ol>를 사용할 때 숫자나 글머리기호의 색상, 크기 또는 유형을 간단하게 맞춤설정할 수 있습니다.
Bloomberg의 후원을 받는 Igalia의 도움으로 드디어 스타일 지정 목록을 위한 유용한 정보를 대체할 수 있게 되었습니다. 보세요!
CSS ::marker 덕분에 콘텐츠와 글머리기호 및 숫자의 일부 스타일을 변경할 수 있습니다.
브라우저 호환성
::marker는 데스크톱 및 Android용 Firefox, 데스크톱 Safari 및 iOS Safari (color 및 font-* 속성만 해당, 버그 204163 참고), Chromium 기반 데스크톱 및 Android 브라우저에서 지원됩니다.
유사 요소
다음과 같은 필수적인 HTML의 순서가 지정되지 않은 목록을 살펴보세요.
<ul>
<li>Lorem ipsum dolor sit amet consectetur adipisicing elit</li>
<li>Dolores quaerat illo totam porro</li>
<li>Quidem aliquid perferendis voluptates</li>
<li>Ipsa adipisci fugit assumenda dicta voluptates nihil reprehenderit consequatur alias facilis rem</li>
<li>Fuga</li>
</ul>
그 결과 다음과 같은 예기치 않은 렌더링이 발생합니다.
각 <li> 항목의 시작 부분에 있는 점은 무료입니다. 브라우저에서 마커 상자를 그리고 생성합니다.
오늘은 브라우저에서 만드는 글머리기호 요소의 스타일을 지정할 수 있는 ::marker pseudo-element에 관해 알아봅니다.
마커 만들기
::marker 유사 요소 마커 상자는 모든 목록 항목 요소 내에서 실제 콘텐츠와 ::before 유사 요소 앞에 자동으로 생성됩니다.
li::before {
content: "::before";
background: lightgray;
border-radius: 1ch;
padding-inline: 1ch;
margin-inline-end: 1ch;
}
일반적으로 목록 항목은 <li> HTML 요소이지만 다른 요소도 display: list-item를 사용하여 목록 항목이 될 수 있습니다.
<dl>
<dt>Lorem</dt>
<dd>Lorem ipsum dolor sit amet consectetur adipisicing elit</dd>
<dd>Dolores quaerat illo totam porro</dd>
<dt>Ipsum</dt>
<dd>Quidem aliquid perferendis voluptates</dd>
</dl>
dd {
display: list-item;
list-style-type: "🤯";
padding-inline-start: 1ch;
}
마커 스타일 지정
::marker까지는 list-style-type 및 list-style-image를 사용하여 목록의 스타일을 지정하고 CSS 한 줄로 목록 항목 기호를 변경할 수 있습니다.
li {
list-style-image: url(/right-arrow.svg);
/* OR */
list-style-type: '👉';
padding-inline-start: 1ch;
}
편리한 기능이지만 더 많은 기능이 필요합니다. 색상, 크기, 간격 등을 변경하면 어떻게 되나요? 이때 ::marker님이 구해야 합니다. CSS에서 다음과 같은 유사 요소의 개별 및 전역 타겟팅이 가능합니다.
li::marker {
color: hotpink;
}
li:first-child::marker {
font-size: 5rem;
}
list-style-type 속성은 매우 제한된 스타일 지정 가능성을 제공합니다. ::marker 의사 요소를 사용하면 마커 자체를 타겟팅하여 스타일을 직접 적용할 수 있습니다. 이를 통해 훨씬 더 많은 제어가 가능합니다.
하지만 ::marker에서 모든 CSS 속성을 사용할 수는 없습니다. 허용되는 속성과 허용되지 않는 속성의 목록이 사양에 명확하게 명시되어 있습니다. 이 pseudo-element로 흥미있는 요소를 시도했는데 효과가 없는 경우, 아래 목록은 CSS로 할 수 있는 작업과 할 수 없는 작업을 안내합니다.
허용되는 CSS ::marker 속성
animation-*transition-*colordirectionfont-*contentunicode-bidiwhite-space
::marker의 콘텐츠 변경은 list-style-type가 아닌 content를 사용하여 이루어집니다. 다음 예에서 첫 번째 항목은 list-style-type를 사용하여 스타일이 지정되고 두 번째 항목은 ::marker를 사용하여 스타일이 지정됩니다. 첫 번째 경우의 속성은 마커뿐만 아니라 전체 목록 항목에 적용됩니다. 즉, 텍스트는 마커뿐만 아니라 텍스트도 애니메이션 처리됩니다. ::marker를 사용하면 텍스트가 아닌 마커 상자만 타겟팅할 수 있습니다.
또한 허용되지 않은 background 속성은 아무런 영향을 미치지 않습니다.
li:nth-child(1) {
list-style-type: '?';
font-size: 2rem;
background: hsl(200 20% 88%);
animation: color-change 3s ease-in-out infinite;
}
마커와 목록 항목 간 결과 혼합
li:nth-child(2)::marker {
content: '!';
font-size: 2rem;
background: hsl(200 20% 88%);
animation: color-change 3s ease-in-out infinite;
}
마커와 목록 항목 간의 포커스 결과
마커 콘텐츠 변경
다음은 마커의 스타일을 지정할 수 있는 몇 가지 방법입니다.
모든 목록 항목 변경
li {
list-style-type: "😍";
}
/* OR */
li::marker {
content: "😍";
}
목록 항목 1개만 변경
li:last-child::marker {
content: "😍";
}
목록 항목을 SVG로 변경
li::marker {
content: url(/heart.svg);
content: url(#heart);
content: url("data:image/svg+xml;charset=UTF-8,<svg xmlns='http://www.w3.org/2000/svg' version='1.1' height='24' width='24'><path d='M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z' fill='none' stroke='hotpink' stroke-width='3'/></svg>");
}
번호 매기기 목록 변경
그런데 <ol>는 어떨까요? 순서가 지정된 목록 항목의 마커는 기본적으로 글머리기호가 아닌 숫자입니다. CSS에서는 카운터라고 하며 매우 강력합니다. 숫자의 시작과 끝을 설정하고 재설정하거나 로마 숫자로 전환하는 속성도 있습니다. 그 스타일을 지정할 수 있을까요? 네, 그리고 마커 콘텐츠 값을 사용하여 자체 번호 매기기 프레젠테이션을 만들 수도 있습니다.
li::marker {
content: counter(list-item) "› ";
color: hotpink;
}
디버깅
Chrome DevTools를 사용하면 ::marker 유사 요소에 적용되는 스타일을 검사, 디버그, 수정할 수 있습니다.
향후 유사 요소 스타일 지정
다음에서 ::marker에 대해 자세히 알아볼 수 있습니다.
어려웠던 스타일도 이용할 수 있게 되어 반가웠습니다. 자동으로 생성된 다른 요소의 스타일을 지정할 수도 있습니다. 여러 브라우저에서 동일한 방식으로 구현되지 않는 <details> 또는 검색 입력 자동 완성 표시기가 마음에 들지 않을 수 있습니다. 필요한 것을 공유하는 한 가지 방법은 https://webwewant.fyi에서 원하는 항목을 만드는 것입니다.