CSS Rules

Editing

@counter-style

카운터의 스타일을 문자열 표현 방식으로 직접 정의할 수 있다.

설명

디스크립터에 따라 웹브라우저별 지원 현황은 아직 완전하지 않으므로 반드시 각 웹브라우저의 지원 여부를 참고하도록 한다.

선언

<@counter-style>

DEVDIC-Specified Data Types

@counter-style 앳룰(at-rules)의 구문 형식을 나타낸다.

  • CSS Counter Styles Level 3
    @counter-style <counter-style-name> { [ system: <counter-system>; ]? [ symbols: <counter-symbols>  | additive-symbols: <additive-symbols> ]; [ negative: <negative>; ] || [ prefix: <prefix>; ] || [ suffix: <suffix>; ] || [ range: <range>; ] || [ pad: <pad>; ] || [ speak-as: <speak-as>; ] || [ fallback: <fallback>; ]}

포함된 타입

아래 유형에서 지원하는 모든 키워드와 단위를 사용하지 않을 수도 있다.

  • <counter-style-name>

    트리 범위(tree-scoped)의 이름이며 ASCII 대소문자를 구분하지 않는 <custom-ident> 이다.

    Details

    포함된 타입

    • <custom-ident>

      임의의 사용자 정의 문자열을 나타낸다.

      Details

      동일한 타입을 사용하는 관련 속성

      모든 속성을 표시하지 않을 수도 있다.

      • animation-name

        애니메이션으로 사용할 미리 정의된 키프레임 셋의 이름을 설정한다.

      • grid-column-end

        그리드 항목이 몇 개의 열(column)로 확장되는지 또는 항목이 끝나는 열(column)의 줄의 위치를 정의한다.

      • grid-column-start

        그리드 항목이 시작되는 열(column)의 줄의 위치를 정의한다.

      • grid-row-end

        그리드 항목이 몇 개의 행(row)으로 확장되는지 또는 그리드 항목이 끝나는 행(row)의 위치를 정의한다.

      • grid-row-start

        그리드 항목이 시작될 행(row)의 위치를 정의한다.

      • counter-increment

        하나 이상의 CSS 카운터 값을 늘리거나 줄인다.

      • counter-reset

        하나 이상의 CSS 카운터를 만들거나 재설정한다.

      • list-style-type

        목록의 마커의 모양을 설정한다.

사용 가능한 디스크립터 및 특성

[사용 가능한 값]은 설정 가능한 모든 값을 나열하지 않을 수도 있다. 자세한 사항은 각 항목의 추가 정보를 확인하라.

additive-symbols 

symbols 디스크립터는 system 디스크립터가 지정한 마커 구성 알고리즘에서 사용하는 심벌을 지정한다.

systemadditive 경우 additive-symbols 디스크립터로 하나 이상의 유효한 심벌을 지정해야 한다.

사용되는 타입

<additive-symbols>

  • CSS Counter Styles Level 3
    [ <integer [0,∞]> && <symbol> ]# 

    <integer> 값은 내림차순으로 작성되어야 한다. 그렇지 않을 경우 무시된다.

    Example

사용되는 타입

아래 유형에서 지원하는 모든 키워드와 단위를 사용하지 않을 수도 있다.

  • <integer>

    <number-token> 유형 플래그가 'integer'인 소숫점이 없는 정수를 표현한다.

    • [HYPHEN-MINUS]?[0-9]

      0에서 9까지의 숫자로 구성된다. 선택적으로 음수 기호(U+002D HYPHEN-MINUS)가 앞에 올 수 있다.

    Details

    포함된 타입

    • <number-token>

      Number Token Railroad Diagrams

      + - digit . digit digit . digit e E + - digit
  • <symbol>

    CSS에서 사용되는 기호를 나타낸다. 이미지(<image>)를 사용하는 경우 기본 개체의 크기는 1em x 1em의 정사각형이다.

    • CSS Counter Styles Level 3
      <string> | <image> | <custom-ident>
    Details

    포함된 타입

    • <custom-ident>

      임의의 사용자 정의 문자열을 나타낸다.

      Details

      동일한 타입을 사용하는 관련 속성

      모든 속성을 표시하지 않을 수도 있다.

      • animation-name

        애니메이션으로 사용할 미리 정의된 키프레임 셋의 이름을 설정한다.

      • grid-column-end

        그리드 항목이 몇 개의 열(column)로 확장되는지 또는 항목이 끝나는 열(column)의 줄의 위치를 정의한다.

      • grid-column-start

        그리드 항목이 시작되는 열(column)의 줄의 위치를 정의한다.

      • grid-row-end

        그리드 항목이 몇 개의 행(row)으로 확장되는지 또는 그리드 항목이 끝나는 행(row)의 위치를 정의한다.

      • grid-row-start

        그리드 항목이 시작될 행(row)의 위치를 정의한다.

      • counter-increment

        하나 이상의 CSS 카운터 값을 늘리거나 줄인다.

      • counter-reset

        하나 이상의 CSS 카운터를 만들거나 재설정한다.

      • list-style-type

        목록의 마커의 모양을 설정한다.

    • <image>

      2차원 이미지를 나타낸다.

      • CSS Images Module Level 4
        <url> | <image()> | <image-set()> | <cross-fade()> | <element()> | <gradient>

        <url>로 외부의 리소스를 연결하거나 <image-set()>, <cross-fade()>, <element()> 값으로 생성된다. 또한 그라디언트도 가능하다.

        현재 image()는 지원하지 않는다.

      Details

      포함된 타입

      • <gradient>

        두 가지 이상의 색상 간 점진적인 전환으로 구성된 특수한 유형의 이미지를 나타낸다.

        • background: linear-gradient(to right, #FF0000, #00FF00, #FFFF00);

          선형 그라데이션

          Example
        • background: radial-gradient(#FF0000, #00FF00, #FFFF00);

          원형 그라데이션

          Example
        Details

        관련 함수

        모든 함수를 표시하지 않을 수도 있다.

        동일한 타입을 사용하는 관련 속성

        모든 속성을 표시하지 않을 수도 있다.

        • background

          요소의 배경과 관련된 모든 속성을 한 번에 설정하는 속기 속성이다.

        • background-image

          선택자를 갖는 요소에 배경 이미지를 설정한다.

      • <url>

        이미지나 글꼴 등 리소스를 가리키는 문자열을 나타낸다.

        • CSS Values and Units Module Level 4
          <url()> | <src()>
        Details

        포함된 타입

        • <src()>

          src() 함수의 매개변수를 나타낸다.

          • CSS Values and Units Module Level 4
            src( <string> <url-modifier>* )
          Details

          포함된 타입

          • <string>

            따옴표로 감싸진 데이터 유형을 표현한다.

            • "this is a 'string'."
            Details

            동일한 타입을 사용하는 관련 속성

            모든 속성을 표시하지 않을 수도 있다.

            • font-family

              글꼴을 지정한다.

            • content

              가상 요소로 생성할 콘텐츠를 설정한다.

            • quotes

              인용 부호의 유형을 설정한다.

          • <url-modifier>

            URL의 의미나 해석을 어떻게든 변경하는 타입이다.

        • <url()>

          url() 함수의 매개변수를 나타낸다.

          • CSS Values and Units Module Level 4
            url( <string> <url-modifier>*| <url-token>
          Details

          포함된 타입

          • <url-token>

            URL Token Railroad Diagrams

            <ident-token "url"> ( ws* not " ' ( ) \ ws or non-printable escape ws* )
          • <string>

            따옴표로 감싸진 데이터 유형을 표현한다.

            • "this is a 'string'."
            Details 기능이 없다면 사용되는 타입이 동일한 타입을 사용하는 다른 항목에서 설명하거나 없는 경우이다.
            타입에 대한 자세한 설명은 다음 링크를 참조하라.[<string>]
          • <url-modifier>

            URL의 의미나 해석을 어떻게든 변경하는 타입이다.

            Details 기능이 없다면 사용되는 타입이 동일한 타입을 사용하는 다른 항목에서 설명하거나 없는 경우이다.
            타입에 대한 자세한 설명은 다음 링크를 참조하라.[<url-modifier>]

        관련 함수

        모든 함수를 표시하지 않을 수도 있다.

        동일한 타입을 사용하는 관련 속성

        모든 속성을 표시하지 않을 수도 있다.

        • background-image

          선택자를 갖는 요소에 배경 이미지를 설정한다.

        • clip-path

          요소의 클리핑 범위를 설정한다.

      관련 함수

      모든 함수를 표시하지 않을 수도 있다.

    • <string>

      따옴표로 감싸진 데이터 유형을 표현한다.

      • "this is a 'string'."
      Details

      동일한 타입을 사용하는 관련 속성

      모든 속성을 표시하지 않을 수도 있다.

      • font-family

        글꼴을 지정한다.

      • content

        가상 요소로 생성할 콘텐츠를 설정한다.

      • quotes

        인용 부호의 유형을 설정한다.

fallback 

현재 카운터 스타일이 지정된 카운터 값에 대한 표현을 생성할 수 없거나 카운터의 값이 지정된 범위를 벗어난 경우 사용할 폴백(fallback) 카운터 스타일을 지정한다. 폴백 시스템이 없거나 폴백 시스템 체인이 카운터 값을 나타낼 수 없는 경우 최종적으로 소수(decimal) 스타일로 폴백된다.

사용 가능한 값

소수(decimal) 스타일 

사용되는 타입

<fallback>

  • CSS Counter Styles Level 3
    <counter-style-name>
    Example

사용되는 타입

아래 유형에서 지원하는 모든 키워드와 단위를 사용하지 않을 수도 있다.

  • <counter-style-name>

    트리 범위(tree-scoped)의 이름이며 ASCII 대소문자를 구분하지 않는 <custom-ident> 이다.

    Details

    포함된 타입

    • <custom-ident>

      임의의 사용자 정의 문자열을 나타낸다.

      Details

      동일한 타입을 사용하는 관련 속성

      모든 속성을 표시하지 않을 수도 있다.

      • animation-name

        애니메이션으로 사용할 미리 정의된 키프레임 셋의 이름을 설정한다.

      • grid-column-end

        그리드 항목이 몇 개의 열(column)로 확장되는지 또는 항목이 끝나는 열(column)의 줄의 위치를 정의한다.

      • grid-column-start

        그리드 항목이 시작되는 열(column)의 줄의 위치를 정의한다.

      • grid-row-end

        그리드 항목이 몇 개의 행(row)으로 확장되는지 또는 그리드 항목이 끝나는 행(row)의 위치를 정의한다.

      • grid-row-start

        그리드 항목이 시작될 행(row)의 위치를 정의한다.

      • counter-increment

        하나 이상의 CSS 카운터 값을 늘리거나 줄인다.

      • counter-reset

        하나 이상의 CSS 카운터를 만들거나 재설정한다.

      • list-style-type

        목록의 마커의 모양을 설정한다.

negative 

카운터 값이 음수일 때 표현을 변경하는 방법의 정의한다.

사용 가능한 값

"\2D" ("-" hyphen-minus) 

..

사용되는 타입

<negative>

  • CSS Counter Styles Level 3
    <symbol> <symbol>?

    카운터 값이 음수인 경우 값의 첫 번째 <symbol>이 카운터 표현 앞에 추가된다. 두 번째 <symbol>(지정된 경우)은 카운터 값이 음수일 때 표현 뒤에 추가된다.

    Example

사용되는 타입

아래 유형에서 지원하는 모든 키워드와 단위를 사용하지 않을 수도 있다.

  • <symbol>

    CSS에서 사용되는 기호를 나타낸다. 이미지(<image>)를 사용하는 경우 기본 개체의 크기는 1em x 1em의 정사각형이다.

    • CSS Counter Styles Level 3
      <string> | <image> | <custom-ident>
    Details

    포함된 타입

    • <custom-ident>

      임의의 사용자 정의 문자열을 나타낸다.

      Details

      동일한 타입을 사용하는 관련 속성

      모든 속성을 표시하지 않을 수도 있다.

      • animation-name

        애니메이션으로 사용할 미리 정의된 키프레임 셋의 이름을 설정한다.

      • grid-column-end

        그리드 항목이 몇 개의 열(column)로 확장되는지 또는 항목이 끝나는 열(column)의 줄의 위치를 정의한다.

      • grid-column-start

        그리드 항목이 시작되는 열(column)의 줄의 위치를 정의한다.

      • grid-row-end

        그리드 항목이 몇 개의 행(row)으로 확장되는지 또는 그리드 항목이 끝나는 행(row)의 위치를 정의한다.

      • grid-row-start

        그리드 항목이 시작될 행(row)의 위치를 정의한다.

      • counter-increment

        하나 이상의 CSS 카운터 값을 늘리거나 줄인다.

      • counter-reset

        하나 이상의 CSS 카운터를 만들거나 재설정한다.

      • list-style-type

        목록의 마커의 모양을 설정한다.

    • <image>

      2차원 이미지를 나타낸다.

      • CSS Images Module Level 4
        <url> | <image()> | <image-set()> | <cross-fade()> | <element()> | <gradient>

        <url>로 외부의 리소스를 연결하거나 <image-set()>, <cross-fade()>, <element()> 값으로 생성된다. 또한 그라디언트도 가능하다.

        현재 image()는 지원하지 않는다.

      Details

      포함된 타입

      • <gradient>

        두 가지 이상의 색상 간 점진적인 전환으로 구성된 특수한 유형의 이미지를 나타낸다.

        • background: linear-gradient(to right, #FF0000, #00FF00, #FFFF00);

          선형 그라데이션

          Example
        • background: radial-gradient(#FF0000, #00FF00, #FFFF00);

          원형 그라데이션

          Example
        Details

        관련 함수

        모든 함수를 표시하지 않을 수도 있다.

        동일한 타입을 사용하는 관련 속성

        모든 속성을 표시하지 않을 수도 있다.

        • background

          요소의 배경과 관련된 모든 속성을 한 번에 설정하는 속기 속성이다.

        • background-image

          선택자를 갖는 요소에 배경 이미지를 설정한다.

      • <url>

        이미지나 글꼴 등 리소스를 가리키는 문자열을 나타낸다.

        • CSS Values and Units Module Level 4
          <url()> | <src()>
        Details

        포함된 타입

        • <src()>

          src() 함수의 매개변수를 나타낸다.

          • CSS Values and Units Module Level 4
            src( <string> <url-modifier>* )
          Details

          포함된 타입

          • <string>

            따옴표로 감싸진 데이터 유형을 표현한다.

            • "this is a 'string'."
            Details

            동일한 타입을 사용하는 관련 속성

            모든 속성을 표시하지 않을 수도 있다.

            • font-family

              글꼴을 지정한다.

            • content

              가상 요소로 생성할 콘텐츠를 설정한다.

            • quotes

              인용 부호의 유형을 설정한다.

          • <url-modifier>

            URL의 의미나 해석을 어떻게든 변경하는 타입이다.

        • <url()>

          url() 함수의 매개변수를 나타낸다.

          • CSS Values and Units Module Level 4
            url( <string> <url-modifier>*| <url-token>
          Details

          포함된 타입

          • <url-token>

            URL Token Railroad Diagrams

            <ident-token "url"> ( ws* not " ' ( ) \ ws or non-printable escape ws* )
          • <string>

            따옴표로 감싸진 데이터 유형을 표현한다.

            • "this is a 'string'."
            Details 기능이 없다면 사용되는 타입이 동일한 타입을 사용하는 다른 항목에서 설명하거나 없는 경우이다.
            타입에 대한 자세한 설명은 다음 링크를 참조하라.[<string>]
          • <url-modifier>

            URL의 의미나 해석을 어떻게든 변경하는 타입이다.

            Details 기능이 없다면 사용되는 타입이 동일한 타입을 사용하는 다른 항목에서 설명하거나 없는 경우이다.
            타입에 대한 자세한 설명은 다음 링크를 참조하라.[<url-modifier>]

        관련 함수

        모든 함수를 표시하지 않을 수도 있다.

        동일한 타입을 사용하는 관련 속성

        모든 속성을 표시하지 않을 수도 있다.

        • background-image

          선택자를 갖는 요소에 배경 이미지를 설정한다.

        • clip-path

          요소의 클리핑 범위를 설정한다.

      관련 함수

      모든 함수를 표시하지 않을 수도 있다.

    • <string>

      따옴표로 감싸진 데이터 유형을 표현한다.

      • "this is a 'string'."
      Details

      동일한 타입을 사용하는 관련 속성

      모든 속성을 표시하지 않을 수도 있다.

      • font-family

        글꼴을 지정한다.

      • content

        가상 요소로 생성할 콘텐츠를 설정한다.

      • quotes

        인용 부호의 유형을 설정한다.

pad 

패드 값보다 짧은 표현에 특정 <symbol>이 덧대어지는 고정 너비 카운터 스타일을 지정할 수 있다. 지정된 패드 값보다 큰 표현은 정상적으로 구성된다. 패드는 심벌이 차지하는 공간을 의미한다.

사용 가능한 값

0 "" 

사용되는 타입

<pad>

  • CSS Counter Styles Level 3
    <integer [0,∞]> && <symbol>

    <integer>는 모든 카운터 표현이 도달해야 하는 최소 길이(공간의 너비)를 지정한다. 카운터 표현이 지정된 너비보다 차이가 발생할 경우 0보다 크면 지정된 <symobl>의 복사본을 그 차이만큼 카운터 표현의 앞에 추가한다.

    Example

사용되는 타입

아래 유형에서 지원하는 모든 키워드와 단위를 사용하지 않을 수도 있다.

  • <integer>

    <number-token> 유형 플래그가 'integer'인 소숫점이 없는 정수를 표현한다.

    • [HYPHEN-MINUS]?[0-9]

      0에서 9까지의 숫자로 구성된다. 선택적으로 음수 기호(U+002D HYPHEN-MINUS)가 앞에 올 수 있다.

    Details

    포함된 타입

    • <number-token>

      Number Token Railroad Diagrams

      + - digit . digit digit . digit e E + - digit
  • <symbol>

    CSS에서 사용되는 기호를 나타낸다. 이미지(<image>)를 사용하는 경우 기본 개체의 크기는 1em x 1em의 정사각형이다.

    • CSS Counter Styles Level 3
      <string> | <image> | <custom-ident>
    Details

    포함된 타입

    • <custom-ident>

      임의의 사용자 정의 문자열을 나타낸다.

      Details

      동일한 타입을 사용하는 관련 속성

      모든 속성을 표시하지 않을 수도 있다.

      • animation-name

        애니메이션으로 사용할 미리 정의된 키프레임 셋의 이름을 설정한다.

      • grid-column-end

        그리드 항목이 몇 개의 열(column)로 확장되는지 또는 항목이 끝나는 열(column)의 줄의 위치를 정의한다.

      • grid-column-start

        그리드 항목이 시작되는 열(column)의 줄의 위치를 정의한다.

      • grid-row-end

        그리드 항목이 몇 개의 행(row)으로 확장되는지 또는 그리드 항목이 끝나는 행(row)의 위치를 정의한다.

      • grid-row-start

        그리드 항목이 시작될 행(row)의 위치를 정의한다.

      • counter-increment

        하나 이상의 CSS 카운터 값을 늘리거나 줄인다.

      • counter-reset

        하나 이상의 CSS 카운터를 만들거나 재설정한다.

      • list-style-type

        목록의 마커의 모양을 설정한다.

    • <image>

      2차원 이미지를 나타낸다.

      • CSS Images Module Level 4
        <url> | <image()> | <image-set()> | <cross-fade()> | <element()> | <gradient>

        <url>로 외부의 리소스를 연결하거나 <image-set()>, <cross-fade()>, <element()> 값으로 생성된다. 또한 그라디언트도 가능하다.

        현재 image()는 지원하지 않는다.

      Details

      포함된 타입

      • <gradient>

        두 가지 이상의 색상 간 점진적인 전환으로 구성된 특수한 유형의 이미지를 나타낸다.

        • background: linear-gradient(to right, #FF0000, #00FF00, #FFFF00);

          선형 그라데이션

          Example
        • background: radial-gradient(#FF0000, #00FF00, #FFFF00);

          원형 그라데이션

          Example
        Details

        관련 함수

        모든 함수를 표시하지 않을 수도 있다.

        동일한 타입을 사용하는 관련 속성

        모든 속성을 표시하지 않을 수도 있다.

        • background

          요소의 배경과 관련된 모든 속성을 한 번에 설정하는 속기 속성이다.

        • background-image

          선택자를 갖는 요소에 배경 이미지를 설정한다.

      • <url>

        이미지나 글꼴 등 리소스를 가리키는 문자열을 나타낸다.

        • CSS Values and Units Module Level 4
          <url()> | <src()>
        Details

        포함된 타입

        • <src()>

          src() 함수의 매개변수를 나타낸다.

          • CSS Values and Units Module Level 4
            src( <string> <url-modifier>* )
          Details

          포함된 타입

          • <string>

            따옴표로 감싸진 데이터 유형을 표현한다.

            • "this is a 'string'."
            Details

            동일한 타입을 사용하는 관련 속성

            모든 속성을 표시하지 않을 수도 있다.

            • font-family

              글꼴을 지정한다.

            • content

              가상 요소로 생성할 콘텐츠를 설정한다.

            • quotes

              인용 부호의 유형을 설정한다.

          • <url-modifier>

            URL의 의미나 해석을 어떻게든 변경하는 타입이다.

        • <url()>

          url() 함수의 매개변수를 나타낸다.

          • CSS Values and Units Module Level 4
            url( <string> <url-modifier>*| <url-token>
          Details

          포함된 타입

          • <url-token>

            URL Token Railroad Diagrams

            <ident-token "url"> ( ws* not " ' ( ) \ ws or non-printable escape ws* )
          • <string>

            따옴표로 감싸진 데이터 유형을 표현한다.

            • "this is a 'string'."
            Details 기능이 없다면 사용되는 타입이 동일한 타입을 사용하는 다른 항목에서 설명하거나 없는 경우이다.
            타입에 대한 자세한 설명은 다음 링크를 참조하라.[<string>]
          • <url-modifier>

            URL의 의미나 해석을 어떻게든 변경하는 타입이다.

            Details 기능이 없다면 사용되는 타입이 동일한 타입을 사용하는 다른 항목에서 설명하거나 없는 경우이다.
            타입에 대한 자세한 설명은 다음 링크를 참조하라.[<url-modifier>]

        관련 함수

        모든 함수를 표시하지 않을 수도 있다.

        동일한 타입을 사용하는 관련 속성

        모든 속성을 표시하지 않을 수도 있다.

        • background-image

          선택자를 갖는 요소에 배경 이미지를 설정한다.

        • clip-path

          요소의 클리핑 범위를 설정한다.

      관련 함수

      모든 함수를 표시하지 않을 수도 있다.

    • <string>

      따옴표로 감싸진 데이터 유형을 표현한다.

      • "this is a 'string'."
      Details

      동일한 타입을 사용하는 관련 속성

      모든 속성을 표시하지 않을 수도 있다.

      • font-family

        글꼴을 지정한다.

      • content

        가상 요소로 생성할 콘텐츠를 설정한다.

      • quotes

        인용 부호의 유형을 설정한다.

prefix 

마커 표현 앞에 추가되는 심벌<symbol>을 지정한다. 접두사는 음수 부호 앞에 온다.

사용 가능한 값

the empty string 

빈 문자열을 기본값으로 갖는다.

사용되는 타입

<prefix>

  • CSS Counter Styles Level 3
    <symbol>
    Example

사용되는 타입

아래 유형에서 지원하는 모든 키워드와 단위를 사용하지 않을 수도 있다.

  • <empty-string>

    빈 문자열을 나타낸다.

    Details

    포함된 타입

    • <string>

      따옴표로 감싸진 데이터 유형을 표현한다.

      • "this is a 'string'."
      Details

      동일한 타입을 사용하는 관련 속성

      모든 속성을 표시하지 않을 수도 있다.

      • font-family

        글꼴을 지정한다.

      • content

        가상 요소로 생성할 콘텐츠를 설정한다.

      • quotes

        인용 부호의 유형을 설정한다.

  • <symbol>

    CSS에서 사용되는 기호를 나타낸다. 이미지(<image>)를 사용하는 경우 기본 개체의 크기는 1em x 1em의 정사각형이다.

    • CSS Counter Styles Level 3
      <string> | <image> | <custom-ident>
    Details

    포함된 타입

    • <custom-ident>

      임의의 사용자 정의 문자열을 나타낸다.

      Details

      동일한 타입을 사용하는 관련 속성

      모든 속성을 표시하지 않을 수도 있다.

      • animation-name

        애니메이션으로 사용할 미리 정의된 키프레임 셋의 이름을 설정한다.

      • grid-column-end

        그리드 항목이 몇 개의 열(column)로 확장되는지 또는 항목이 끝나는 열(column)의 줄의 위치를 정의한다.

      • grid-column-start

        그리드 항목이 시작되는 열(column)의 줄의 위치를 정의한다.

      • grid-row-end

        그리드 항목이 몇 개의 행(row)으로 확장되는지 또는 그리드 항목이 끝나는 행(row)의 위치를 정의한다.

      • grid-row-start

        그리드 항목이 시작될 행(row)의 위치를 정의한다.

      • counter-increment

        하나 이상의 CSS 카운터 값을 늘리거나 줄인다.

      • counter-reset

        하나 이상의 CSS 카운터를 만들거나 재설정한다.

      • list-style-type

        목록의 마커의 모양을 설정한다.

    • <image>

      2차원 이미지를 나타낸다.

      • CSS Images Module Level 4
        <url> | <image()> | <image-set()> | <cross-fade()> | <element()> | <gradient>

        <url>로 외부의 리소스를 연결하거나 <image-set()>, <cross-fade()>, <element()> 값으로 생성된다. 또한 그라디언트도 가능하다.

        현재 image()는 지원하지 않는다.

      Details

      포함된 타입

      • <gradient>

        두 가지 이상의 색상 간 점진적인 전환으로 구성된 특수한 유형의 이미지를 나타낸다.

        • background: linear-gradient(to right, #FF0000, #00FF00, #FFFF00);

          선형 그라데이션

          Example
        • background: radial-gradient(#FF0000, #00FF00, #FFFF00);

          원형 그라데이션

          Example
        Details

        관련 함수

        모든 함수를 표시하지 않을 수도 있다.

        동일한 타입을 사용하는 관련 속성

        모든 속성을 표시하지 않을 수도 있다.

        • background

          요소의 배경과 관련된 모든 속성을 한 번에 설정하는 속기 속성이다.

        • background-image

          선택자를 갖는 요소에 배경 이미지를 설정한다.

      • <url>

        이미지나 글꼴 등 리소스를 가리키는 문자열을 나타낸다.

        • CSS Values and Units Module Level 4
          <url()> | <src()>
        Details

        포함된 타입

        • <src()>

          src() 함수의 매개변수를 나타낸다.

          • CSS Values and Units Module Level 4
            src( <string> <url-modifier>* )
          Details

          포함된 타입

          • <string>

            따옴표로 감싸진 데이터 유형을 표현한다.

            • "this is a 'string'."
            Details

            동일한 타입을 사용하는 관련 속성

            모든 속성을 표시하지 않을 수도 있다.

            • font-family

              글꼴을 지정한다.

            • content

              가상 요소로 생성할 콘텐츠를 설정한다.

            • quotes

              인용 부호의 유형을 설정한다.

          • <url-modifier>

            URL의 의미나 해석을 어떻게든 변경하는 타입이다.

        • <url()>

          url() 함수의 매개변수를 나타낸다.

          • CSS Values and Units Module Level 4
            url( <string> <url-modifier>*| <url-token>
          Details

          포함된 타입

          • <url-token>

            URL Token Railroad Diagrams

            <ident-token "url"> ( ws* not " ' ( ) \ ws or non-printable escape ws* )
          • <string>

            따옴표로 감싸진 데이터 유형을 표현한다.

            • "this is a 'string'."
            Details 기능이 없다면 사용되는 타입이 동일한 타입을 사용하는 다른 항목에서 설명하거나 없는 경우이다.
            타입에 대한 자세한 설명은 다음 링크를 참조하라.[<string>]
          • <url-modifier>

            URL의 의미나 해석을 어떻게든 변경하는 타입이다.

            Details 기능이 없다면 사용되는 타입이 동일한 타입을 사용하는 다른 항목에서 설명하거나 없는 경우이다.
            타입에 대한 자세한 설명은 다음 링크를 참조하라.[<url-modifier>]

        관련 함수

        모든 함수를 표시하지 않을 수도 있다.

        동일한 타입을 사용하는 관련 속성

        모든 속성을 표시하지 않을 수도 있다.

        • background-image

          선택자를 갖는 요소에 배경 이미지를 설정한다.

        • clip-path

          요소의 클리핑 범위를 설정한다.

      관련 함수

      모든 함수를 표시하지 않을 수도 있다.

    • <string>

      따옴표로 감싸진 데이터 유형을 표현한다.

      • "this is a 'string'."
      Details

      동일한 타입을 사용하는 관련 속성

      모든 속성을 표시하지 않을 수도 있다.

      • font-family

        글꼴을 지정한다.

      • content

        가상 요소로 생성할 콘텐츠를 설정한다.

      • quotes

        인용 부호의 유형을 설정한다.

range 

카운터 스타일이 정의되는 범위를 정의한다. 만약에 범위 밖의 카운터 값이 사용되는 경우 대체 카운터 스타일로 처리된다.

사용 가능한 값

auto 

사용되는 타입

<range>

  • CSS Counter Styles Level 3
    [ [ <integer> | infinite ]{2} ]# | auto

    쉼표로 구분된 범위 목록을 정의한다. 각 개별 범위에 대해 첫 번째 값은 하한값이고 두 번째 값은 상한값이다. 하한값과 상한값을 모두 포함한다.

    범위의 첫 번째 값으로 infinite를 지정하면 음의 무한대를 나타내고 두 번째 값으로 infinite를 지정하면 양의 무한대를 나타낸다.

    하한값이 상한값보다 크면 유효하지 않으며 무시된다.

    Example

사용되는 키워드

  • auto

    범위는 카운터 시스템에 따라 다르다.

    • cyclic, numeric, fixed 시스템의 경우 범위는 음의 무한대부터 양의 무한대까지이다.
    • alphabetic, symbolic 시스템의 경우 범위는 1에서 양의 무한대이다.
    • additive 시스템의 경우 범위는 0에서 양의 무한대이다.
    • extends 시스템의 경우 범위는 확장 시스템에 대해 자동으로 생성되는 범위이다.
  • infinite

    범위의 첫 번째 값으로 infinite를 사용하면 음의 무한대를 나타내고 두 번째 값으로 사용하면 양의 무한대를 나타낸다.

사용되는 타입

아래 유형에서 지원하는 모든 키워드와 단위를 사용하지 않을 수도 있다.

  • <integer>

    <number-token> 유형 플래그가 'integer'인 소숫점이 없는 정수를 표현한다.

    • [HYPHEN-MINUS]?[0-9]

      0에서 9까지의 숫자로 구성된다. 선택적으로 음수 기호(U+002D HYPHEN-MINUS)가 앞에 올 수 있다.

    Details

    포함된 타입

    • <number-token>

      Number Token Railroad Diagrams

      + - digit . digit digit . digit e E + - digit

speak-as 

접근성을 위하여 주어진 카운터 스타일로 형식화된 카운터의 음성 형식을 합성하는 방법을 정의한다.

사용 가능한 값

auto 

사용되는 타입

<speak-as>

  • CSS Counter Styles Level 3
    auto | bullets | numbers | words | spell-out | <counter-style-name>

사용되는 키워드

  • auto

    카운터 스타일의 체계가 alphabetic인 경우 이 값은 철자와 동일한 효과를 갖는다. cyclic인 경우 이 값은 블럿(bullet)과 동일한 효과를 갖는다. extends인 경우 이 값은 확장 스타일에 대해 auto와 동일한 효과를 갖는다. 그 외의 경우 이 값은 숫자와 동일한 효과를 갖는다.

  • bullets

    정렬되지 않는 목록 항목을 나타내기 위해 유저 에이전트에 의해 정의된 구문 또는 오디오 큐가 읽혀진다.

  • numbers

    카운터의 숫자 값은 문서의 언어로 읽혀진다.

  • spell-out

    유저 에이전트는 정상적으로 카운터 표현을 생성하고 한 글자씩 읽는다. 유저 에이전트가 특정 카운터 심벌를 읽는 방법을 모르는 경우 유저 에이전트는 speak-as 값이 numbers인 것처럼 읽을 수 있다.

  • words

    유저 에이전트는 정상적으로 카운터 값을 생성하고 문서 언어의 단어로 읽는다.

사용되는 타입

아래 유형에서 지원하는 모든 키워드와 단위를 사용하지 않을 수도 있다.

  • <counter-style-name>

    트리 범위(tree-scoped)의 이름이며 ASCII 대소문자를 구분하지 않는 <custom-ident> 이다.

    Details

    포함된 타입

    • <custom-ident>

      임의의 사용자 정의 문자열을 나타낸다.

      Details

      동일한 타입을 사용하는 관련 속성

      모든 속성을 표시하지 않을 수도 있다.

      • animation-name

        애니메이션으로 사용할 미리 정의된 키프레임 셋의 이름을 설정한다.

      • grid-column-end

        그리드 항목이 몇 개의 열(column)로 확장되는지 또는 항목이 끝나는 열(column)의 줄의 위치를 정의한다.

      • grid-column-start

        그리드 항목이 시작되는 열(column)의 줄의 위치를 정의한다.

      • grid-row-end

        그리드 항목이 몇 개의 행(row)으로 확장되는지 또는 그리드 항목이 끝나는 행(row)의 위치를 정의한다.

      • grid-row-start

        그리드 항목이 시작될 행(row)의 위치를 정의한다.

      • counter-increment

        하나 이상의 CSS 카운터 값을 늘리거나 줄인다.

      • counter-reset

        하나 이상의 CSS 카운터를 만들거나 재설정한다.

      • list-style-type

        목록의 마커의 모양을 설정한다.

suffix 

마커 표현에는 추가되는 <symbol>을 지정한다. 접미사는 음수 기호 뒤의 표현에 추가된다.

사용 가능한 값

"\2E\20" ("." 마침표 뒤에 공백) 

사용되는 타입

<suffix>

  • CSS Counter Styles Level 3
    <symbol>
    Example

사용되는 타입

아래 유형에서 지원하는 모든 키워드와 단위를 사용하지 않을 수도 있다.

  • <symbol>

    CSS에서 사용되는 기호를 나타낸다. 이미지(<image>)를 사용하는 경우 기본 개체의 크기는 1em x 1em의 정사각형이다.

    • CSS Counter Styles Level 3
      <string> | <image> | <custom-ident>
    Details

    포함된 타입

    • <custom-ident>

      임의의 사용자 정의 문자열을 나타낸다.

      Details

      동일한 타입을 사용하는 관련 속성

      모든 속성을 표시하지 않을 수도 있다.

      • animation-name

        애니메이션으로 사용할 미리 정의된 키프레임 셋의 이름을 설정한다.

      • grid-column-end

        그리드 항목이 몇 개의 열(column)로 확장되는지 또는 항목이 끝나는 열(column)의 줄의 위치를 정의한다.

      • grid-column-start

        그리드 항목이 시작되는 열(column)의 줄의 위치를 정의한다.

      • grid-row-end

        그리드 항목이 몇 개의 행(row)으로 확장되는지 또는 그리드 항목이 끝나는 행(row)의 위치를 정의한다.

      • grid-row-start

        그리드 항목이 시작될 행(row)의 위치를 정의한다.

      • counter-increment

        하나 이상의 CSS 카운터 값을 늘리거나 줄인다.

      • counter-reset

        하나 이상의 CSS 카운터를 만들거나 재설정한다.

      • list-style-type

        목록의 마커의 모양을 설정한다.

    • <image>

      2차원 이미지를 나타낸다.

      • CSS Images Module Level 4
        <url> | <image()> | <image-set()> | <cross-fade()> | <element()> | <gradient>

        <url>로 외부의 리소스를 연결하거나 <image-set()>, <cross-fade()>, <element()> 값으로 생성된다. 또한 그라디언트도 가능하다.

        현재 image()는 지원하지 않는다.

      Details

      포함된 타입

      • <gradient>

        두 가지 이상의 색상 간 점진적인 전환으로 구성된 특수한 유형의 이미지를 나타낸다.

        • background: linear-gradient(to right, #FF0000, #00FF00, #FFFF00);

          선형 그라데이션

          Example
        • background: radial-gradient(#FF0000, #00FF00, #FFFF00);

          원형 그라데이션

          Example
        Details

        관련 함수

        모든 함수를 표시하지 않을 수도 있다.

        동일한 타입을 사용하는 관련 속성

        모든 속성을 표시하지 않을 수도 있다.

        • background

          요소의 배경과 관련된 모든 속성을 한 번에 설정하는 속기 속성이다.

        • background-image

          선택자를 갖는 요소에 배경 이미지를 설정한다.

      • <url>

        이미지나 글꼴 등 리소스를 가리키는 문자열을 나타낸다.

        • CSS Values and Units Module Level 4
          <url()> | <src()>
        Details

        포함된 타입

        • <src()>

          src() 함수의 매개변수를 나타낸다.

          • CSS Values and Units Module Level 4
            src( <string> <url-modifier>* )
          Details

          포함된 타입

          • <string>

            따옴표로 감싸진 데이터 유형을 표현한다.

            • "this is a 'string'."
            Details

            동일한 타입을 사용하는 관련 속성

            모든 속성을 표시하지 않을 수도 있다.

            • font-family

              글꼴을 지정한다.

            • content

              가상 요소로 생성할 콘텐츠를 설정한다.

            • quotes

              인용 부호의 유형을 설정한다.

          • <url-modifier>

            URL의 의미나 해석을 어떻게든 변경하는 타입이다.

        • <url()>

          url() 함수의 매개변수를 나타낸다.

          • CSS Values and Units Module Level 4
            url( <string> <url-modifier>*| <url-token>
          Details

          포함된 타입

          • <url-token>

            URL Token Railroad Diagrams

            <ident-token "url"> ( ws* not " ' ( ) \ ws or non-printable escape ws* )
          • <string>

            따옴표로 감싸진 데이터 유형을 표현한다.

            • "this is a 'string'."
            Details 기능이 없다면 사용되는 타입이 동일한 타입을 사용하는 다른 항목에서 설명하거나 없는 경우이다.
            타입에 대한 자세한 설명은 다음 링크를 참조하라.[<string>]
          • <url-modifier>

            URL의 의미나 해석을 어떻게든 변경하는 타입이다.

            Details 기능이 없다면 사용되는 타입이 동일한 타입을 사용하는 다른 항목에서 설명하거나 없는 경우이다.
            타입에 대한 자세한 설명은 다음 링크를 참조하라.[<url-modifier>]

        관련 함수

        모든 함수를 표시하지 않을 수도 있다.

        동일한 타입을 사용하는 관련 속성

        모든 속성을 표시하지 않을 수도 있다.

        • background-image

          선택자를 갖는 요소에 배경 이미지를 설정한다.

        • clip-path

          요소의 클리핑 범위를 설정한다.

      관련 함수

      모든 함수를 표시하지 않을 수도 있다.

    • <string>

      따옴표로 감싸진 데이터 유형을 표현한다.

      • "this is a 'string'."
      Details

      동일한 타입을 사용하는 관련 속성

      모든 속성을 표시하지 않을 수도 있다.

      • font-family

        글꼴을 지정한다.

      • content

        가상 요소로 생성할 콘텐츠를 설정한다.

      • quotes

        인용 부호의 유형을 설정한다.

symbols 

symbols 디스크립터는 system 디스크립터가 지정한 마커 구성 알고리즘에서 사용하는 심벌을 지정한다.

systemcyclic, numeric, alphabetic, symbolic, fixed의 경우 symbols 디스크립터로 하나 이상의 심벌을 지정해야 한다.

사용되는 타입

<counter-symbols>

  • CSS Counter Styles Level 3
    <symbol>+

사용되는 타입

아래 유형에서 지원하는 모든 키워드와 단위를 사용하지 않을 수도 있다.

  • <symbol>

    CSS에서 사용되는 기호를 나타낸다. 이미지(<image>)를 사용하는 경우 기본 개체의 크기는 1em x 1em의 정사각형이다.

    • CSS Counter Styles Level 3
      <string> | <image> | <custom-ident>
    Details

    포함된 타입

    • <custom-ident>

      임의의 사용자 정의 문자열을 나타낸다.

      Details

      동일한 타입을 사용하는 관련 속성

      모든 속성을 표시하지 않을 수도 있다.

      • animation-name

        애니메이션으로 사용할 미리 정의된 키프레임 셋의 이름을 설정한다.

      • grid-column-end

        그리드 항목이 몇 개의 열(column)로 확장되는지 또는 항목이 끝나는 열(column)의 줄의 위치를 정의한다.

      • grid-column-start

        그리드 항목이 시작되는 열(column)의 줄의 위치를 정의한다.

      • grid-row-end

        그리드 항목이 몇 개의 행(row)으로 확장되는지 또는 그리드 항목이 끝나는 행(row)의 위치를 정의한다.

      • grid-row-start

        그리드 항목이 시작될 행(row)의 위치를 정의한다.

      • counter-increment

        하나 이상의 CSS 카운터 값을 늘리거나 줄인다.

      • counter-reset

        하나 이상의 CSS 카운터를 만들거나 재설정한다.

      • list-style-type

        목록의 마커의 모양을 설정한다.

    • <image>

      2차원 이미지를 나타낸다.

      • CSS Images Module Level 4
        <url> | <image()> | <image-set()> | <cross-fade()> | <element()> | <gradient>

        <url>로 외부의 리소스를 연결하거나 <image-set()>, <cross-fade()>, <element()> 값으로 생성된다. 또한 그라디언트도 가능하다.

        현재 image()는 지원하지 않는다.

      Details

      포함된 타입

      • <gradient>

        두 가지 이상의 색상 간 점진적인 전환으로 구성된 특수한 유형의 이미지를 나타낸다.

        • background: linear-gradient(to right, #FF0000, #00FF00, #FFFF00);

          선형 그라데이션

          Example
        • background: radial-gradient(#FF0000, #00FF00, #FFFF00);

          원형 그라데이션

          Example
        Details

        관련 함수

        모든 함수를 표시하지 않을 수도 있다.

        동일한 타입을 사용하는 관련 속성

        모든 속성을 표시하지 않을 수도 있다.

        • background

          요소의 배경과 관련된 모든 속성을 한 번에 설정하는 속기 속성이다.

        • background-image

          선택자를 갖는 요소에 배경 이미지를 설정한다.

      • <url>

        이미지나 글꼴 등 리소스를 가리키는 문자열을 나타낸다.

        • CSS Values and Units Module Level 4
          <url()> | <src()>
        Details

        포함된 타입

        • <src()>

          src() 함수의 매개변수를 나타낸다.

          • CSS Values and Units Module Level 4
            src( <string> <url-modifier>* )
          Details

          포함된 타입

          • <string>

            따옴표로 감싸진 데이터 유형을 표현한다.

            • "this is a 'string'."
            Details

            동일한 타입을 사용하는 관련 속성

            모든 속성을 표시하지 않을 수도 있다.

            • font-family

              글꼴을 지정한다.

            • content

              가상 요소로 생성할 콘텐츠를 설정한다.

            • quotes

              인용 부호의 유형을 설정한다.

          • <url-modifier>

            URL의 의미나 해석을 어떻게든 변경하는 타입이다.

        • <url()>

          url() 함수의 매개변수를 나타낸다.

          • CSS Values and Units Module Level 4
            url( <string> <url-modifier>*| <url-token>
          Details

          포함된 타입

          • <url-token>

            URL Token Railroad Diagrams

            <ident-token "url"> ( ws* not " ' ( ) \ ws or non-printable escape ws* )
          • <string>

            따옴표로 감싸진 데이터 유형을 표현한다.

            • "this is a 'string'."
            Details 기능이 없다면 사용되는 타입이 동일한 타입을 사용하는 다른 항목에서 설명하거나 없는 경우이다.
            타입에 대한 자세한 설명은 다음 링크를 참조하라.[<string>]
          • <url-modifier>

            URL의 의미나 해석을 어떻게든 변경하는 타입이다.

            Details 기능이 없다면 사용되는 타입이 동일한 타입을 사용하는 다른 항목에서 설명하거나 없는 경우이다.
            타입에 대한 자세한 설명은 다음 링크를 참조하라.[<url-modifier>]

        관련 함수

        모든 함수를 표시하지 않을 수도 있다.

        동일한 타입을 사용하는 관련 속성

        모든 속성을 표시하지 않을 수도 있다.

        • background-image

          선택자를 갖는 요소에 배경 이미지를 설정한다.

        • clip-path

          요소의 클리핑 범위를 설정한다.

      관련 함수

      모든 함수를 표시하지 않을 수도 있다.

    • <string>

      따옴표로 감싸진 데이터 유형을 표현한다.

      • "this is a 'string'."
      Details

      동일한 타입을 사용하는 관련 속성

      모든 속성을 표시하지 않을 수도 있다.

      • font-family

        글꼴을 지정한다.

      • content

        가상 요소로 생성할 콘텐츠를 설정한다.

      • quotes

        인용 부호의 유형을 설정한다.

system 

카운터의 정수 값을 문자열 표현으로 변환하는데 사용될 알고리즘을 지정한다.

사용 가능한 값

symbolic 

사용되는 타입

<counter-system>

  • CSS Counter Styles Level 3
    cyclic | numeric | alphabetic | symbolic | additive | [fixed <integer>?] | [ extends <counter-style-name> ]

사용되는 키워드

  • additive

    로마 숫자와 같은 부호 값 숫자 체계를 나타내는 데 사용되며 다른 위치의 숫자를 재사용하여 다른 값을 얻는 대신 더 큰 값을 위해 추가로 숫자를 정의한다. 이러한 시스템에서 숫자의 값은 숫자의 자릿수를 더하면 알 수 있다.

    additive-symbols 디스크립터를 하나 이상 포함해야 한다.

  • alphabetic

    지정된 심벌를 알파벳 번호 체계에 따라 숫자로 해석한다. 알파벳 체계를 사용하여 'a' 부터 'z'까지 문자를 카운터 스타일의 심벌로 지정하면 처음 26개까지는 'a', 'b', .., 'z'로 출력이 되지만 그 이후에는 'aa', 'ab', 'ac', ... 패턴으로 계속된다.

    심벌 디스크립터에는 두 개 이상의 심벌이 포함되어야 하며 그렇지 않으면 카운터 스타일이 유효하지 않다. 심벌 디스크립터에 제공된 첫 번째 카운터 심벌은 1로, 다음 심벌은 2로 해석되는 식으로 처리된다. 이 시스템은 양수 카운터 값에 대해 엄격하게 정의된다.

  • cyclic

    제공된 심벌 목록을 순환한다. 심벌 목록의 끝에 도달하면 처음으로 돌아가서 다시 시작한다. 이 시스템은 심볼이 하나만 있는 간단한 불럿(bullet) 스타일이나 여러 개의 심볼이 있는 스타일에 유용하다. 심볼 디스크립터에 심볼을 하나 이상 지정해야하며 그렇지 않으면 카운터 스타일이 유효하지 않다.

  • extends

    작성자가 다른 카운터 스타일의 알고리즘을 사용하되 음수 기호 또는 접미사와 같은 다른 측면을 변경할 수 있다. 카운터 스타일이 extends 시스템을 사용하는 경우 지정되지 않은 디스크립터는 초기 값을 사용하는 대신 지정된 확장 카운터 스타일에서 가져와야 한다.

    symbols 또는 additive-symbols  설명자를 포함하지 않아야 한다. 그렇지 않으면 카운터 스타일 유효하지 않다.

  • fixed

    유한한 심벌 세트를 정의한다. 이 시스템은 카운터 값이 유한한 경우에 유용하다. 심벌 디스크립터에 심벌을 하나 이상 지정해야 하며 그렇지 않으면 카운터 스타일이 유효하지 않다.

    이 시스템을 지정할 때 첫 번째 심벌 값이 시작되는 위치를 나타내는  정수를 뒤에 제공할 수 있다. 생략하면 첫 번째 심벌 값은 1이 된다.

  • numeric

    카운터 심벌을 자릿수 번호 체계의 숫자로 해석한다. 숫자 체계는 알파벳 체계와 유사하다. 다만 numberic에서는 첫 번째 카운터 기호를 0부터 해석한다.

    심벌 디스크립터에 카운터 심벌을 두 개 이상 지정해야 하며 그렇지 않으면 카운터 스타일은 유효하지 않다.

  • symbolic

    제공된 심벌 목록을 순회한다. 순회 주기마다 카운터 표현에 사용되는 심벌이 두 배, 세 배 등으로 증가한다. symbols 디스크립터에 심벌을 하나 이상 지정해야 하며 그렇지 않으면 카운터 스타일은 유효하지 않다. 이 카운터 시스템은 양수 카운터 값에 대해서만 작동한다.

사용되는 타입

아래 유형에서 지원하는 모든 키워드와 단위를 사용하지 않을 수도 있다.

  • <counter-style-name>

    트리 범위(tree-scoped)의 이름이며 ASCII 대소문자를 구분하지 않는 <custom-ident> 이다.

    Details

    포함된 타입

    • <custom-ident>

      임의의 사용자 정의 문자열을 나타낸다.

      Details

      동일한 타입을 사용하는 관련 속성

      모든 속성을 표시하지 않을 수도 있다.

      • animation-name

        애니메이션으로 사용할 미리 정의된 키프레임 셋의 이름을 설정한다.

      • grid-column-end

        그리드 항목이 몇 개의 열(column)로 확장되는지 또는 항목이 끝나는 열(column)의 줄의 위치를 정의한다.

      • grid-column-start

        그리드 항목이 시작되는 열(column)의 줄의 위치를 정의한다.

      • grid-row-end

        그리드 항목이 몇 개의 행(row)으로 확장되는지 또는 그리드 항목이 끝나는 행(row)의 위치를 정의한다.

      • grid-row-start

        그리드 항목이 시작될 행(row)의 위치를 정의한다.

      • counter-increment

        하나 이상의 CSS 카운터 값을 늘리거나 줄인다.

      • counter-reset

        하나 이상의 CSS 카운터를 만들거나 재설정한다.

      • list-style-type

        목록의 마커의 모양을 설정한다.

  • <integer>

    <number-token> 유형 플래그가 'integer'인 소숫점이 없는 정수를 표현한다.

    • [HYPHEN-MINUS]?[0-9]

      0에서 9까지의 숫자로 구성된다. 선택적으로 음수 기호(U+002D HYPHEN-MINUS)가 앞에 올 수 있다.

    Details

    포함된 타입

    • <number-token>

      Number Token Railroad Diagrams

      + - digit . digit digit . digit e E + - digit

예제

사용자 정의 마커 적용 테스트

버전 명세

Modules
Module NameStatusSummary
CSS Counter Styles Level 3편집자 초안

사용자 정의 counter 스타일을 정의할 수 있게 한 @counter-style과 미리 정의해 놓은 CSS2와 CSS2.1에 존재하는 일반적인 counter 스타일 세트를 소개한다.


Last review date: 2022-5-30

지원 웹브라우저