Computer >> 컴퓨터 >  >> 프로그래밍 >> CSS

CSS filter 속성으로 이미지에 시각 효과 추가하는 방법

웹 페이지에서 이미지에 다양한 시각 효과를 적용하고 싶다면 CSS의 filter 속성을 활용하면 됩니다. 별도의 이미지 편집 프로그램 없이도 색상 반전, 흑백 변환, 블러 처리 등 여러 효과를 간단한 코드 한 줄로 구현할 수 있습니다.

CSS filter 속성이란?

filter 속성은 이미지나 요소에 그래픽 효과를 적용하는 CSS 기능입니다. 대표적인 필터 함수로는 다음과 같은 것들이 있습니다.

  • invert() – 색상을 반전시킵니다. invert(100%)는 네거티브 필름처럼 보이게 합니다.
  • grayscale() – 이미지를 흑백으로 변환합니다.
  • blur() – 이미지에 흐림(블러) 효과를 줍니다.
  • sepia() – 빈티지한 세피아 톤을 적용합니다.
  • brightness() – 밝기를 조절합니다.

예제 코드

다음은 filter 속성의 invert() 함수를 사용해 이미지에 색상 반전 효과를 적용하는 전체 코드입니다.

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
img {
    margin: 20px;
}
img.normal {
    margin-left: 30%;
    width: 300px;
    height: 300px;
}
img.filter {
    width: 300px;
    height: 300px;
    filter: invert(100%);
}
</style>
</head>
<body>
<h1 style="text-align: center;">CSS Image Effects Example</h1>
<img class="normal" src="https://i.picsum.photos/id/237/536/354.jpg">
<img class="filter" src="https://i.picsum.photos/id/237/536/354.jpg">
</body>
</html>

코드 설명

위 코드에서는 동일한 이미지 두 개를 나란히 배치했습니다. 첫 번째 이미지(class="normal")에는 아무 효과도 적용하지 않은 원본 상태이고, 두 번째 이미지(class="filter")에는 filter: invert(100%)가 적용되어 색상이 완전히 반전된 모습으로 표시됩니다.

실행 결과

코드를 실행하면 원본 이미지와 색상이 반전된 이미지가 함께 출력되어 두 효과의 차이를 한눈에 비교할 수 있습니다.

여러 필터 조합하기

filter 속성은 하나의 함수만 사용할 수 있는 것이 아니라 여러 함수를 공백으로 구분해 동시에 적용할 수도 있습니다.

img.filter {
    filter: grayscale(50%) blur(2px) brightness(120%);
}

이처럼 CSS filter 속성을 활용하면 자바스크립트나 이미지 편집 없이도 손쉽게 다채로운 시각 효과를 구현할 수 있어, 웹 디자인에서 매우 유용하게 사용됩니다.