[css] 색상 오버레이 필터

22 Dec 2023

CSS 필터를 사용하면 이미지와 요소에 다양한 효과를 줄 수 있습니다. 색상 오버레이 필터는 이미지 위에 특정 색상을 덧씌워 다양한 효과를 낼 수 있습니다. 이번 글에서는 CSS의 filter 속성을 사용하여 색상 오버레이 효과를 적용하는 방법에 대해 알아보겠습니다.

색상 오버레이 필터 구문

.element {
  filter: brightness(0.6) sepia(1) hue-rotate(180deg) saturate(3);
}

위의 예제에서 filter 속성은 네 개의 함수로 구성되어 있습니다. 각 함수는 각기 다른 색상 오버레이 효과를 제공합니다.

brightness(0.6): 이미지의 밝기를 조절하여 어둡거나 밝게 만듭니다.
sepia(1): 이미지에 세피아 효과를 적용하여 옛날 느낌을 줍니다.
hue-rotate(180deg): 이미지의 색조를 회전시켜 다양한 색상을 만듭니다.
saturate(3): 이미지의 채도를 조절하여 색감을 풍부하게 합니다.

색상 오버레이 필터 예제

아래 예제는 HTML 요소에 색상 오버레이 필터를 적용하는 방법을 보여줍니다.

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <style>
    .image {
      width: 300px;
      height: 200px;
      background: url('example.jpg');
      filter: brightness(0.6) sepia(1) hue-rotate(180deg) saturate(3);
    }
  </style>
</head>
<body>
  <div class="image"></div>
</body>
</html>

이제 다양한 색상 오버레이 효과를 CSS 필터를 사용하여 이미지와 요소에 적용하는 방법에 대해 이해하셨을 것입니다. 이러한 효과를 추가하여 웹페이지에 더 독창적이고 시각적으로 매력적인 디자인을 만들어보세요.

참고문헌: MDN Web Docs - Using CSS filters