[css] 색조 포화도 조절 필터

22 Dec 2023

CSS는 웹 페이지의 디자인 및 레이아웃을 다루는 데 유용한 다양한 속성을 제공합니다. 이 중에서 색상을 보다 풍부하게 다루기 위한 필터 속성이 있습니다.

여기서는 CSS의 filter 속성 중 하나인 saturate를 사용하여 포화도를 조절하는 방법에 대해 알아보겠습니다.

`saturate` 필터란?

filter 속성은 요소에 그래픽 효과를 적용하는 데 사용됩니다. saturate는 포화도를 조절하는데 사용되며, 이 값을 높일수록 색상이 더욱 포화된 상태로 표시됩니다.

아래는 saturate 필터를 사용하여 이미지의 포화도를 조절하는 예시 코드입니다.

img {
  filter: saturate(200%);
}

위 코드에서 saturate(200%)는 이미지의 포화도를 200%로 조절하는 것을 의미합니다.

saturate 필터의 값은 0%부터 시작하여 길고 단위가 있는 숫자 또는 백분율로 지정됩니다. 100%가 기본 값이며, 색상의 포화도가 유지됩니다. 0%로 지정하면 색상이 완전히 회색조로 표시되며, 200%로 지정하면 색상이 두 배로 포화된 상태로 보여집니다.

CSS의 filter 속성을 사용하여 saturate 값을 조절하여 이미지의 포화도를 다양하게 조절할 수 있습니다. 이것은 웹 디자인에서 다양한 효과를 적용하는 데 유용한 도구입니다.

이렇게하면 보다 독특하고 풍부한 색상의 이미지를 제공할 수 있으며, 웹페이지의 시각적인 매력을 향상시킬 수 있습니다.