CSS 필터는 이미지의 색상, 대비, 밝기 및 기타 효과를 조절하는 기능을 제공합니다. 이것은 웹 개발자가 이미지나 요소의 시각적 효과를 조절할 수 있도록 도와줍니다. CSS 패턴 필터는 이미지를 변형하고 시각적 효과를 부여하는 데 유용합니다.

기본 사용 방법

기본적으로 CSS 패턴 필터는 filter 속성을 사용하여 이미지나 요소에 적용됩니다.

.element {
  filter: <filter-function>;
}

여기서 <filter-function>은 적용하려는 효과를 지정하는 함수 이름과 그에 따른 값으로 구성됩니다.

주요 필터 함수

1. blur(): 요소를 흐리게 만듭니다. 값은 흐림의 정도를 나타내는 길이 단위입니다.
2. brightness(): 이미지를 밝게 하거나 어둡게 합니다. 값을 퍼센트로 지정합니다.
3. contrast(): 이미지의 대비를 조절합니다. 값을 퍼센트로 지정합니다.
4. grayscale(): 이미지를 흑백으로 만듭니다. 값을 퍼센트로 지정합니다.
5. hue-rotate(): 이미지의 색조를 회전시킵니다. 값을 각도로 지정합니다.
6. invert(): 이미지의 색상을 반전시킵니다. 값을 퍼센트로 지정합니다.
7. saturate(): 이미지의 채도를 조절합니다. 값을 퍼센트로 지정합니다.
8. sepia(): 이미지에 세피아 효과를 적용합니다. 값을 퍼센트로 지정합니다.

예시

.element {
  filter: blur(5px) brightness(120%) contrast(80%);
}

이 예제에서는 흐림의 정도를 5픽셀, 밝기를 120%, 대비를 80%로 조절하도록 필터를 적용했습니다.

CSS 패턴 필터를 사용하면 이미지나 요소에 다양한 시각적 효과를 쉽게 적용할 수 있습니다.

참고 자료

• MDN Web Docs - CSS Filters