Properties

Properties

Editing
  • account_tree
  • bug_report

list-style-image

목록의 항목에 대한 마커를 사용자의 이미지로 설정한다.

사용 가능한 값 타입

<'list-style-image'>

DEVDIC-Specified Data Types

list-style-image 속성에 사용되는 타입이다.

  • CSS Lists and Counters Module Level 3
    <image> | none

포함된 타입

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

  • <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

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

    관련 함수

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

공통적으로 사용되는 값

다음 키워드는 속성에 따라 다른 의미를 가질 수도 있다. 값 사용에 대한 자세한 사항은 아래 값 항목을 참고하라.

  • none

    어떠한 값도 설정하지 않음을 나타낸다.

다음은 필요에 따라 일부 값을 설명하므로 표시되지 않는 값은 값 유형을 참조하라.

  • CSS1

    기본 값이미 이미지를 설정하지 않고 기본 마커로 출력한다.

  • CSS Images Module Level 4

    중심점을 기준으로 회전하는 방식으로 그라데이션을 생성한다.

    Example
  • CSS Images Module Level 4

    선형 그라디언트를 생성한다.

    Example
  • CSS Images Module Level 4

    원형 그라디언트를 생성한다.

    Example
  • CSS Images Module Level 4

    설정된 <linear-gradient> 값이 반복되는 선형 그라디언트를 생성한다.

    Example
  • CSS Images Module Level 4

    설정된 <radial-gradient> 값이 반복되는 원형 그라디언트를 생성한다.

    Example
  • CSS Lists and Counters Module Level 3
    Example
  • CSS Lists and Counters Module Level 3, CSS Images Module Level 4

    이미지 사이를 전환할 때 CSS는 시작 및 종료 이미지의 조합인 중간 이미지를 명시적으로 참조하는 방법이 필요하다. 이것은 결합할 두 이미지와 결합이 전환에서 얼마나 멀리 있는지를 나타내는 cross-fade() 함수로 수행된다.

    작성일 기준 현재 이 함수(CSS Images Module Level 4)는 모든 웹브라우저에서 지원하지 않는다.
  • CSS Lists and Counters Module Level 3, CSS Images Module Level 4

    사용자의 장치에서 가장 적합한 이미지의 해상도를 보여줄 수 있도록 한다.

    작성일 기준 현재 이 함수(CSS Images Module Level 4)는 모든 웹브라우저에서 지원하지 않는다.

구문

  • object.style.listStyleImage = "url('bullet.png')";
    CSS Lists and Counters Module Level 3

버전 명세

Modules
Module NameStatusSummary
CSS Images Module Level 3편집자 초안

Last review date: 2022-6-3

지원 웹브라우저