Properties

Properties

Editing
  • account_tree
  • bug_report

filter

요소에게 시각적 효과를 정의한다.

설명

주로 이미지에게 적용한다.

사용 가능한 값 타입

<'filter'>

DEVDIC-Specified Data Types

filter 속성에 사용되는 타입이다.

  • Filter Effect Module Level 1
    none | <filter-value-list>

포함된 타입

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

  • <filter-value-list>

    filter 속성으로 효과를 지정하기 위해 설정된 값 목록을 나타낸다.

    • Filter Effect Module Level 1
      [ <filter-function> | <url> ]+

      한 개 이상의 관련 함수를 사용하여 적용할 수 있다. 한 개 이상의 함수는 공백으로 구분하여 작성한다.

    Details

    포함된 타입

    • <filter-function>

      이미지의 모습을 변형할 수 있는 그래픽 효과를 지정할 수 있다.

      Details

      관련 함수

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

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

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

      • backdrop-filter

        색의 번짐이나 색 요소 뒤의 영역으로 이동 같은 그래픽 효과를 적용 할 수 있다. 적용 요소 뒤에 있는 모든 요소에 적용되므로 효과를 보려면 해당 요소의 배경을 투명하게 만들어야 한다.

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

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

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

  • 〈'filter'〉none
    Filter Effect Module Level 1

    필터 효과를 적용하지 않는다.

  • Filter Effect Module Level 1

    가우시안 블러(gaussian blur)를 적용하여 이미지를 흐리게 처리한다.

    이미지에 흐림(blur)효과를 적용한다. 인수로 주어진 값이 클수록 흐려짐이 커진다. 값을 생략하면 0이 된다.

    Example
  • Filter Effect Module Level 1

    이미지의 밝기를 조절한다.

    이미지의 밝기를 설정한다. 0~100% 범위의 값으로 설정이 가능하며 0%이면 이미지는 완전 검정으로 기본 값이 100%(1)은 원본 이미지의 밝기를 의미한다. 100%를 초과하는 경우에는 더 밝은 결과를 만들어준다.

    Example
  • Filter Effect Module Level 1

    이미지의 색상 대비를 조절한다.

    이미지의 대비를 설정한다. 인수 값이 0% 이면 완전 검정이 되며 100%(1)은 기본 값이며 원본 이미지가 가지고 기본 대비를 의미한다. 100%를 초과하면 대비가 적은 결과를 만든다.

    Example
  • Filter Effect Module Level 1

    그림자를 생성한다.

    이미지에게 그림자 효과를 적용한다. 각 인수의 값을 공백으로 구분하여 작성하며 인수로 설정해야 할 값들 중에서 offset-x는 필수 값이며 수평 방향의 그림자의 위치를 픽셀 단위의 값으로 지정한다. 음수 값은 이미지의 왼쪽에 그림자를 만든다. offset-y 역시 필수 값이며 수직 방향의 그림자의 위치를 픽셀 단위의 값으로 지정한다. 음수 값은 이미지의 위쪽에 그림자를 만든다.

    세번째 인수인 blur-radius는 선택사항이며 픽셀 단위로 값을 설정하여 그림자에 흐림 효과를 적용한다. 만일 생략하면 0이되며 그림자가 선명해진다.

    네번째 인수인 spread-radius는 역시 선택사항이며 픽셀 단위로 값을 설정하여 그림자의 확장과 축소를 해준다. 양수 값을 지정하면 그림자는 확장되고 음수 값을 지정하면 그림자는 축소된다. 생략하면 0이 설정되며 요소와 동일한 크기의 그림자가 만들어 진다. 하지만 이 인수는 대부분의 웹브라우저에서 지원하지 않는다. 오히려 설정을 하면 그림자 효과가 나타나지 않는다.

    다섯번째 인수인 color는 그림자의 색상을 지정한다. 생략하면 웹브라우저의 기본 값으로 처리된다. 참고로 이 함수는 box-shadow 속성과 비슷하다. 차이점이라면 inset을 지원하지 않으며 일부 웹브라우저에서는 성능 향상을 위해 하드웨어 가속 기술을 사용하기도 한다.

    Example
  • Filter Effect Module Level 1

    이미지를 흑백으로 변환한다.

    이미지를 회색 음영으로 변환한다. 0%는 기본 값이며 원본 이미지를 뜻하며 100%는 이미지를 회색으로 변환한다. 음수 값은 허용되지 않는다.

    Example
  • Filter Effect Module Level 1

    이미지의 전체 색조를 조절한다.

    이미지에 색상환의 값을 적용한다. 0deg가 기본 값이며 원본 이미지를 의미한다. 360deg가 최대 값이다.

    Example
  • Filter Effect Module Level 1

    이미지의 색상을 반전한다.

    이미지를 반전한다. 0%는 기본 값이며 원본 이미지를 의미한다. 100%는 이미지를 완전히 반전처리한다. 음수 값은 허용하지 않는다.

    Example
  • Filter Effect Module Level 1

    이미지의 투명도를 조절한다.

    이미지에게 불투명도 레벨을 적용한다. 0%는 완전히 투명하게 하며 100%(1)는 기본 값이며 원본 이미지를 그대로 보여준다. 음수 값은 허용하지 않는다. 참고로 이 필터함수는 opacity 속성과 유사하다.

    Example
  • Filter Effect Module Level 1

    이미지의 채도를 조절한다.

    이미지의 채도를 설정한다. 0%로 설정하면 채도를 없애고 흑백 이미지로 변환한다. 100%는 기본 값이며 원본 이미지의 채도를 의미한다. 100%를 초과하는 경우에는 채도가 높아진다. 음수 값은 허용하지 않는다.

    Example
  • Filter Effect Module Level 1

    이미지에 세피아 톤을 적용한다.

    이미지를 어두운 갈색조로 변환한다. 0%(0)는 기본 값이며 원본 이미지를 그대로 둔다. 100%는 이미지를 완전 갈색조로 변환한다. 음수 값은 허용하지 않는다.

    Example
  • Filter Effect Module Level 1

    CSS에서 사용할 외부 리소스를 가져온다.

구문

  • filter: none;
    Filter Effect Module Level 1

    필터를 적용하지 않는다.

  • filter: brightness(150%) drop-shadow(5px 5px 2px #999);
    Filter Effect Module Level 1

    두 개 이상의 필터를 공백으로 구분하여 적용할 수 있다.

    두 개 이상의 filter 속성 테스트

버전 명세

Modules
Module NameStatusSummary
Filter Effect Module Level 1편집자 초안

필터 효과는 화면에 표시되기 전에 요소의 렌더링을 처리하는 방식이다.


Last review date: 2022-5-30

지원 웹브라우저