CSS filter 속성으로 이미지를 흑백으로 변환하는 방법

CSS의 filter 속성과 grayscale() 함수를 사용하면 포토샵 같은 별도의 이미지 편집 도구 없이도 컬러 이미지를 간단하게 흑백으로 변환할 수 있습니다. grayscale 값은 0%에서 100% 사이로 설정할 수 있으며, 100%에 가까울수록 완전한 흑백 효과가 적용됩니다.

CSS 흑백 이미지 예제 코드

<!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: grayscale(100%);
}
</style>
</head>
<body>
<h1 style="text-align: center;">CSS 흑백 이미지 예제</h1>
<img class="normal" src="https://i.picsum.photos/id/59/500/500.jpg">
<img class="filter" src="https://i.picsum.photos/id/59/500/500.jpg">
</body>
</html>

코드 설명

img.normal: 필터가 적용되지 않은 원본 컬러 이미지입니다.
img.filter: filter: grayscale(100%)가 적용되어 완전히 흑백으로 변환된 이미지입니다.

실행 결과

위 코드를 실행하면 화면에 두 개의 동일한 이미지가 나란히 표시됩니다. 왼쪽은 원본 컬러 이미지이고, 오른쪽은 grayscale 필터가 적용된 흑백 이미지입니다. 두 이미지를 나란히 비교하면 필터 효과를 한눈에 확인할 수 있습니다.

만약 부분적으로만 색상을 제거하고 싶다면 grayscale(50%)처럼 중간 값을 사용하면 됩니다. 이 경우 원래 색상과 흑백이 절반씩 섞인 효과가 나타납니다.