Functions

Editing

image-set(<image-set-option-list>)

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

매개 변수

콤마로 구분된 <image-set-option> 값 목록을 나타낸다.

  • <image-set-option>#
Details

포함된 타입

  • <image-set-option>

    image-set() 함수의 매개 변수 타입을 나타낸다.

    • CSS Images Module Level 4
      [ <image> | <string> ] [ <resolution> || type(<string>) ]
    Details

    포함된 타입

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

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

      관련 함수

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

    • <resolution>

      출력 장치의 해상도를 나타낸다.

      • CSS Values and Units Module Level 4
        @media print and (min-resolution: 500dpi) { }

        이 구문은 미디어 쿼리에(media query)에서 값을 사용하는 예를 나타낸다. 500dpi 값을 <resolution>으로 지정 했다. 그 밖에 <resolution> 값이 필요한 경우에는 아래 형식처럼 작성할 수 있다.

        72dpi
        40.45dpcm
        10dppx

         

      Details

      사용되는 단위

      아래의 모든 단위를 사용할 수 있는지 확인해야 할 수도 있다.

      • dpcm

        1cm당 점(dot)의 수를 나타낸다.

      • dpi

        1in당 점(dot)의 수를 나타낸다.

      • dppx

        1픽셀(pixel)당 점(dot)의 수를 나타낸다.

    • <string>

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

      • "this is a 'string'."
      Details

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

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

      • font-family

        글꼴을 지정한다.

      • content

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

      • quotes

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

구문

background-image: image-set( url("http://sample.devdic.com/parallax/images/bg_2880x1800.jpg") 1x,	url("http://sample.devdic.com/parallax/images/bg_3200x2000.jpg") 2x);
CSS Images Module Level 4
Example

버전 명세

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

element(), image(), image-set(), conic-gradient(), repeating-conic-gradient(), image-resolution() 함수가 새롭게 추가되었으나 아직은 모든 웹브라우저에서 지원되지 않는다.


Last review date: 2022-6-3

지원 웹브라우저