CSS @counter-style 규칙

정의 및 사용법

CSS @counter-style 규칙은 사용자 정의 카운터 스타일을 정의하는 데 사용됩니다.

기본 스타일이 필요에 맞지 않을 때@counter-style 규칙은 사용자 정의 카운터 스타일을 정의할 수 있도록 합니다.

예제

리스트에 사용자 정의 카운터 스타일 지정하다:

@counter-style crown {
  system: cyclic;
  symbols: "\1F451";
  suffix: " ";
}
ul {
  list-style: crown;
}

직접 시험해 보세요

CSS 문법

@counter-style countername {
  하나 이상의 설명자
}

속성 값

값 설명
countername

계수기 스타일의 대소문자 구분을 하는 이름을 정의합니다.

주의: 계수기 이름은 none, decimal, disc, square, circle, disclosure-open 또는 disclosure-closed 일 수 없습니다.
system

계수기의 정수 값을 문자열로 변환하는 알고리즘을 정의합니다.

system이 cyclic, numeric, alphabetic, symbolic 또는 fixed로 설정되면 symbols 설명자가 필요합니다.

system이 additive로 설정되면 additive-symbols 설명자가 필요합니다.
symbols

태그에 사용할 기호(문자열, 이미지 또는 사용자 정의 식별자)를 정의합니다.

system 설명자가 cyclic, numeric, alphabetic, symbolic 또는 fixed로 설정되면 필수입니다.

HTML UTF-8 기호.
additive-symbols

추가 시스템의 추가 표현을 정의합니다.

추가 계수기 시스템(예: 로마数字)은加权 기호의 시리즈로 구성됩니다.

가중치 내림차순으로 정렬된 계수기 기호 및 비음수 정수 가중치의 목록입니다.

system 설명자가 추가로 설정되면 필수입니다.
negative 값이 음수일 때, 태그 표시에 추가되어야 할 프리كس 또는 스플릿 기호를 정의합니다.
prefix 태그 표시에 추가되어야 할 프리كس 기호를 정의합니다.
suffix 태그 표시에 추가되어야 할 후缀 기호를 정의합니다.
range

계수기 스타일의 값 범위를 정의합니다.

계수기 값이 범위를 초과할 경우, 대체 스타일로 복귀합니다.
pad

태그가 최소 길이를 가져야 하는 경우, 이 설명자를 사용합니다.

예를 들어, 계수기가 01부터 시작하여 02, 03, 04 등으로 순차적으로 진행되기를 원한다면, pad 설명자를 사용합니다.

지정된 pad 값보다 큰 계수기의 경우, 태그가 정상적으로 구축됩니다.
speak-as

음성合成기가 계수기 스타일을 어떻게 읽어야 하는지 정의합니다.

예를 들어, 순서 있는 목록의 경우 숫자나 알파벳으로 읽어줍니다; 순서 없는 목록의 경우 오디오 알림으로 읽어줍니다.
fallback

시스템이 태그를 구축할 수 없거나 지정된 범위를 초과할 때, 복귀하는 계수기 이름을 정의합니다.

대체 계수기나 대체 시스템이 계수기 값을 표현할 수 없는 경우, 십진수 스타일로 복귀합니다.

브라우저 지원

표의 숫자는 @ 규칙을 완전히 지원하는 첫 번째 브라우저 버전을 나타냅니다.

크롬 에지 파이어폭스 사파리 오페라
91 91 33 17 77