필터

CSS 팟캐스트 - 2023: 필터 를 통해 개인정보처리방침을 정의할 수 있습니다.

약간 불투명한 요소를 빌드해야 한다고 가정해 보겠습니다. 이미지 위에 놓인 불투명 유리 효과입니다. 텍스트는 이미지가 아닌 라이브 텍스트여야 합니다. 그 방법은 무엇일까요?

CSS 필터와 backdrop-filter의 조합 효과를 적용하고 필요한 부분을 실시간으로 흐리게 처리할 수 있습니다. 블러와 불투명도는 사용 가능한 많은 필터 중 두 가지입니다. 각 기능의 역할과 사용 방법을 빠르게 살펴보겠습니다.

filter 속성

브라우저 지원

  • Chrome: 53. <ph type="x-smartling-placeholder">
  • Edge: 12. <ph type="x-smartling-placeholder">
  • Firefox: 35. <ph type="x-smartling-placeholder">
  • Safari: 9.1. <ph type="x-smartling-placeholder">

소스

다음 필터 중 하나 이상을 filter 필터를 잘못 적용하면 filter에 대해 정의된 나머지 필터가 작동하지 않습니다.

blur

이렇게 하면 가우시안 블러가 적용되며 전달할 수 있는 유일한 인수는 radius입니다. 즉 흐리게 처리 정도를 지정합니다. 10px와 같은 길이 단위여야 합니다. 비율은 허용되지 않습니다.

.my-element {
    filter: blur(0.2em);
}

brightness

브라우저 지원

  • Chrome: 18. <ph type="x-smartling-placeholder">
  • Edge: 12. <ph type="x-smartling-placeholder">
  • Firefox: 35. <ph type="x-smartling-placeholder">
  • Safari: 6. <ph type="x-smartling-placeholder">

소스

요소의 밝기를 높이거나 낮추려면 밝기 기능을 사용하세요. 밝기 값은 백분율로 표시되며 변경되지 않은 이미지는 100%의 값으로 표시됩니다. 0% 로 설정하면 이미지가 완전히 검은색으로 변합니다. 따라서 0% 에서 100% 사이의 값은 이미지의 밝기를 낮춥니다. 밝기를 높이려면 100% 가 넘는 값을 사용합니다.

.my-element {
    filter: brightness(80%);
}
드림

contrast

브라우저 지원

  • Chrome: 18. <ph type="x-smartling-placeholder">
  • Edge: 12. <ph type="x-smartling-placeholder">
  • Firefox: 35. <ph type="x-smartling-placeholder">
  • Safari: 6. <ph type="x-smartling-placeholder">

소스

대비를 줄이거나 늘리려면 0% 에서 100% 사이의 값을 각각 설정하세요.

.my-element {
    filter: contrast(160%);
}

grayscale

브라우저 지원

  • Chrome: 18. <ph type="x-smartling-placeholder">
  • Edge: 12. <ph type="x-smartling-placeholder">
  • Firefox: 35. <ph type="x-smartling-placeholder">
  • Safari: 6. <ph type="x-smartling-placeholder">

소스

1를 grayscale() 값으로 사용하여 완전한 그레이 스케일 효과를 적용할 수 있습니다. 또는 0를 사용하여 완전히 채운 요소를 가질 수 있습니다. 백분율 또는 소수점 값을 사용하여 부분적인 그레이 스케일 효과만 적용할 수도 있습니다. 인수를 전달하지 않으면 요소가 완전히 회색이 됩니다. 100%보다 큰 값을 전달하면 100%로 제한됩니다.

.my-element {
    filter: grayscale(80%);
}

invert

브라우저 지원

  • Chrome: 18. <ph type="x-smartling-placeholder">
  • Edge: 12. <ph type="x-smartling-placeholder">
  • Firefox: 35. <ph type="x-smartling-placeholder">
  • Safari: 6. <ph type="x-smartling-placeholder">

소스

grayscale와 마찬가지로 1 또는 0를 invert() 함수에 전달하여 사용 설정하거나 사용 중지할 수 있습니다. 사용 설정하면 요소의 색상이 완전히 반전됩니다. 백분율 또는 소수점 값을 사용하여 색상의 부분 반전만 적용할 수도 있습니다. invert() 함수에 인수를 전달하지 않으면 요소가 완전히 반전됩니다.

.my-element {
    filter: invert(1);
}

opacity

브라우저 지원

  • Chrome: 18. <ph type="x-smartling-placeholder">
  • Edge: 12. <ph type="x-smartling-placeholder">
  • Firefox: 35. <ph type="x-smartling-placeholder">
  • Safari: 6. <ph type="x-smartling-placeholder">

소스

opacity() 필터는 opacity 속성과 동일하게 작동합니다. 여기서 숫자나 백분율을 전달하여 불투명도를 늘리거나 줄일 수 있습니다. 인수를 전달하지 않으면 요소가 완전히 표시됩니다.

.my-element {
    filter: opacity(0.3);
}

saturate

브라우저 지원

  • Chrome: 18. <ph type="x-smartling-placeholder">
  • Edge: 12. <ph type="x-smartling-placeholder">
  • Firefox: 35. <ph type="x-smartling-placeholder">
  • Safari: 6. <ph type="x-smartling-placeholder">

소스

채도 필터는 brightness 필터와 매우 비슷하며 동일한 인수를 허용합니다. 숫자 또는 백분율입니다. 밝기 효과를 높이거나 낮추는 대신 saturate는 색상 채도를 높이거나 낮춥니다.

.my-element {
    filter: saturate(155%);
}

sepia

브라우저 지원

  • Chrome: 18. <ph type="x-smartling-placeholder">
  • Edge: 12. <ph type="x-smartling-placeholder">
  • Firefox: 35. <ph type="x-smartling-placeholder">
  • Safari: 6. <ph type="x-smartling-placeholder">

소스

grayscale()처럼 작동하는 이 필터를 사용하면 세피아 톤 효과를 추가할 수 있습니다. 세피아 톤은 검은색 톤을 갈색 톤으로 바꿔 따뜻하게 하는 사진 인화 기술입니다. 숫자 또는 백분율을 sepia()의 인수로 전달할 수 있습니다. 효과를 높이거나 감소시킵니다. 인수를 전달하지 않으면 완전한 세피아 효과 (sepia(100%)와 같음)가 추가됩니다.

.my-element {
    filter: sepia(70%);
}

hue-rotate

브라우저 지원

  • Chrome: 18. <ph type="x-smartling-placeholder">
  • Edge: 12. <ph type="x-smartling-placeholder">
  • Firefox: 35. <ph type="x-smartling-placeholder">
  • Safari: 6. <ph type="x-smartling-placeholder">

소스

hsl의 색조가 색상 강의에도 나와 있으며 이 필터는 비슷한 방식으로 작동합니다. 도 또는 회전과 같은 각도를 전달하면 모든 요소의 색상의 색조를 바꿉니다. 참조하는 색상환의 일부를 변경합니다. 인수를 전달하지 않으면 아무 작업도 하지 않습니다.

.my-element {
    filter: hue-rotate(120deg);
}

drop-shadow

브라우저 지원

  • Chrome: 18. <ph type="x-smartling-placeholder">
  • Edge: 12. <ph type="x-smartling-placeholder">
  • Firefox: 35. <ph type="x-smartling-placeholder">
  • Safari: 6. <ph type="x-smartling-placeholder">

소스

디자인 도구에서와 같이 곡선을 감싸는 그림자를 적용할 수 있습니다. 예를 들어 Photoshop을 drop-shadow 이 그림자는 알파 마스크에 적용되므로 컷아웃 이미지에 그림자를 추가하는 데 매우 유용합니다. drop-shadow 필터는 공백으로 구분된 offset-x, offset-y, blur, color 값을 포함하는 그림자 매개변수를 사용합니다. box-shadow와 거의 동일합니다. inset 키워드와 스프레드 값은 지원되지 않습니다.

.my-element {
    filter: drop-shadow(5px 5px 10px orange);
}

그림자 모듈에서 다양한 유형의 그림자에 관해 자세히 알아보세요.

url

브라우저 지원

  • Chrome: 5. <ph type="x-smartling-placeholder">
  • Edge: 12. <ph type="x-smartling-placeholder">
  • Firefox: 3. <ph type="x-smartling-placeholder">
  • Safari: 6. <ph type="x-smartling-placeholder">

소스

url 필터를 사용하면 연결된 SVG 요소 또는 파일에서 SVG 필터를 적용할 수 있습니다. 다음과 같은 작업을 할 수 있습니다. SVG 필터에 대해 자세히 알아보기

배경화면 필터

브라우저 지원

  • Chrome: 76 <ph type="x-smartling-placeholder">
  • Edge: 79. <ph type="x-smartling-placeholder">
  • Firefox: 103 <ph type="x-smartling-placeholder">
  • Safari: 18. <ph type="x-smartling-placeholder">

소스

배경화면 필터 속성은 filter과 동일한 필터 함수 값을 모두 허용합니다. backdrop-filter 및 filter의 차이 backdrop-filter 속성이 백그라운드에만 필터를 적용한다는 점입니다. 여기서 filter 속성이 전체 요소에 적용합니다.

이 수업의 시작 부분에 있는 예는 완벽한 예입니다. 텍스트를 흐리게 처리하지 않고 이상적으로는 HTML 요소를 추가하지 않아도 되기 때문입니다. 배경화면에만 필터를 적용할 수 있으면 가능합니다.

이해도 확인

필터에 대한 지식 테스트

다음 중 CSS 필터 함수는 무엇인가요?

grayscale()
🎉
invert()
🎉
flip()
다시 시도해 보세요.
multiply()
다시 시도해 보세요.
blur()
🎉
brightness()
🎉

CSS에서 SVG 필터를 사용할 수 있나요?

예
url() 필터 함수를 사용하면 이 작업을 할 수 있습니다.
아니요
다시 시도해 보세요.