CSS 필터는 이미지와 요소에 그래픽 효과를 부여하는 강력한 방법을 제공합니다. 이 중에서도 색상 채도 감마 보정 필터는 이미지에 색조나 채도를 조정하고 감마 값을 변경할 수 있게 합니다.

색상 보정

음영이나 색상 톤을 조정할 때 색상 보정 필터를 사용할 수 있습니다. 예를 들어 아래와 같이 이미지에 적용할 수 있습니다.

.filter-example {
  filter: hue-rotate(90deg); /* 90도만큼 색상을 회전합니다. */
}

채도 보정

이미지의 채도를 조정하여 이미지의 색감을 조절할 수 있습니다. 아래와 같은 방법으로 채도 보정 필터를 적용할 수 있습니다.

.filter-example {
  filter: saturate(200%); /* 200% 만큼 채도를 증가시킵니다. */
}

감마 보정

감마 보정은 이미지의 명암을 조절하는 데 사용됩니다. 감마 값은 1보다 크면 이미지가 밝아지고, 1보다 작으면 어두워집니다. 아래와 같이 감마 보정 필터를 적용할 수 있습니다.

.filter-example {
  filter: contrast(150%); /* 대비를 150%로 증가시킵니다. */
}

요약

CSS 필터를 사용하여 이미지에 대한 색상, 채도 및 감마 값을 조정함으로써 웹페이지에서 다양한 그래픽 효과를 쉽게 구현할 수 있습니다.

자세한 내용은 MDN Web Docs를 참고하시기 바랍니다.