[css] 색상 반전 필터

22 Dec 2023

CSS를 사용하여 웹 페이지의 요소들의 색상을 반전시키는 효과를 만들어보겠습니다.

1. 필터 속성 사용

CSS에서는 filter 속성을 사용하여 요소들의 색상을 변형시킬 수 있습니다. 이를 사용해서 색상을 반전시킬 수 있습니다. 아래와 같이 invert 함수를 이용하여 색상을 반전시킬 수 있습니다.

.inverted {
  filter: invert(100%);
}

2. HTML 요소에 적용

위 코드를 예시 HTML 요소에 적용해보겠습니다.

<!DOCTYPE html>
<html lang="ko">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <style>
      .inverted {
        filter: invert(100%);
      }
    </style>
    <title>색상 반전 필터</title>
  </head>
  <body>
    <h1 class="inverted">색상 반전</h1>
    <p class="inverted">이 문장은 반전된 색상입니다.</p>
  </body>
</html>

3. 결과 확인

위 코드를 웹 브라우저에서 열어보면, h1 제목과 p 문장의 색상이 반전되어 표시됨을 확인할 수 있습니다.

이와 같이 CSS의 filter 속성을 이용하여 색상을 반전시킬 수 있으며, 이를 활용하여 특정 요소들에 대한 스타일링을 다르게 적용할 수 있습니다.

참고 자료: MDN Web Docs - filter