그림 이모티콘으로 목록 글머리 기호 스타일 지정

HTML 비순차 목록<ul>에 사용할 수 있는 글머리 기호 스타일은 제한적입니다. CSS를 사용하면 이모티콘과 같이 더 흥미로운 것으로 변경할 수 있습니다! 🎉👯‍♂️✨

이 게시물에서는 이를 대체할 수 있는 두 가지 방법을 보여 드리겠습니다. 간결하고 유연한 (그러나 귀하의 브라우저는 아마도 지원하지 않을 것입니다) @counter-style를 사용하는 더 검증된 기술입니다. ) 의사 요소.

스타일이 지정되지 않은 카운터가 있는 순서 지정되지 않은 목록을 다음과 같이 변환합니다.



이에:



참고: 다음 코드 예제는 코드를 짧게 유지하기 위해 중첩을 활용하기 위해 Sass로 작성되었습니다.

방법 1: ::규칙 이전

CSS at-rules는 @counter-style , @import 또는 @font-face 와 같이 CSS에 동작 방법을 지시하는 문입니다.

@media at-rule은 HTML 목록의 기존 글머리 기호 스타일 세트에 더 많은 옵션과 기능을 제공하기 위해 제안되었습니다.

@counter-style is a level 3 proposal , 후보 추천 단계에서 이는 사양이 브라우저에서 구현될 만큼 충분히 안정적임을 의미합니다. 그러나 2019년 4월 현재 Firefox에서만 지원됩니다( caniuse stats for @counter-style ). 이 게시물의 예제 출력은 이미지로 제공되지만 모든 예제의 코드는 CodePen at the bottom of the page 에서 사용할 수 있습니다.

카운터 스타일 규칙 예

카운터 스타일을 사용하려면 규칙을 작성한 다음 is를 @counter-style 또는 list-style-type 태그의 <ul> CSS property 값으로 선언합니다. 카운터 스타일 규칙의 구문에는 MDN documentation page 에 나열된 여러 선택적 설명자가 있습니다. MDN은 또한 interactive demo 다양한 카운터 스타일 변형을 제공합니다(Firefox와 같이 지원되는 브라우저에서 가장 잘 표시됨).

글머리 기호를 이모티콘으로 바꾸려면 "시스템", "기호"및 "접미사"설명자에 옵션을 제공해야 합니다. "순환"시스템을 선택하고 원하는 이모티콘 기호에 대한 유니코드 코드 포인트를 제공합니다. 문자뿐만 아니라 이모티콘을 나타내려면 유니코드 코드 포인트를 사용해야 합니다. 🐱 대신 "\1F431". 전체 목록 찾기on the unicode website . "suffix"를 ""로 설정하면 마침표와 같은 다른 문자가 카운터 뒤에 나타나지 않습니다.

"기호"설명자는 공백으로 구분된 기호 집합을 허용할 수 있습니다. "순환"시스템 옵션과 결합하면 최종 글머리 기호 디자인이 제공된 모든 기호를 통해 회전한다는 의미입니다.

@counter-style repeating-emoji {
  system: cyclic;
  symbols: "\1F431" "\1F436" "\1F984"; // unicode code point
  suffix: " ";
}

// Add this class to the ul or ol element
.repeating-counter-rule {
  list-style-type: repeating-emoji;
}

방법 2: <ol> 의사 요소

이 방법은 이모티콘뿐만 아니라 표준 디스크를 이미지로 교체하는 데 사용할 수 있습니다. 단점은 ::before 의 유연성을 제공하지 않는다는 것입니다.

상위 목록 요소@counter-style 또는 list-style: none에서 <ul>를 설정한 다음 목록 항목 요소<ol>의 패딩 및 여백을 조정하여 시작합니다. 글머리 기호에 사용되는 아이콘은 <li> 의사 요소를 사용하여 추가됩니다.

기본 디스크를 동일한 이모티콘으로 교체하려면 다음 코드를 사용할 수 있습니다. 여기서 ::before 클래스는 single-before 요소에 추가됩니다.

.single-before {
  list-style: none;
  padding: 0;
  margin: 0;

  li {
    padding-left: 1rem;
    text-indent: -0.7rem;
  }

  li::before {
    content: "🐻 ";
  }
}

위의 카운터 스타일 예에서 세 개의 이모티콘 글머리 기호의 반복 패턴을 복제하려면 <ul> 의사 클래스를 사용해야 합니다. 예를 들어 다음 :nth-child 클래스를 .repeating-before에 추가합니다.

.repeating-before {
  list-style: none;
  padding: 0;
  margin: 0;

  li {
    padding-left: 1rem;
    text-indent: -0.7rem;
  }

  li:nth-child(3n+1)::before {
    content: "🐱 ";
  }

  li:nth-child(3n+2)::before {
    content: "🐶 ";
  }

  li:nth-child(3n)::before {
    content: "🦄 ";
  }
}

처음에는 간단하지만 이 방법은 구현할 이모지의 패턴에 따라 더 복잡해질 수 있습니다. 그러나 이 기술은 well-supported across browsers 이라는 이점이 있습니다.

결론

<ul> at-규칙은 목록 카운터의 스타일을 지정할 때 많은 유연성을 제공하지만 제한적인 브라우저 지원으로 인해 대부분의 프로덕션 사이트에 적합하지 않습니다. 의사 요소를 사용하는 것은 안정적이지만 더 복잡한 레이아웃의 경우 번거롭습니다. 그러나 목록 글머리 기호의 스타일이 페이지 디자인의 중요한 부분이 아니라 선택적 디자인 기능인 경우 @counter-style를 @counter-style at-rule과 결합하는 것을 고려하고 의사 요소를 사용하여 허용 가능한 대체 디자인을 제공합니다.

Emoji Bullet Point CodePen 예제