웹 페이지에서 컬러 이미지를 흑백으로 변환하고 싶다면 CSS의 filter 속성에 grayscale(회색조) 값을 지정하는 것이 가장 간단한 방법입니다. 별도의 이미지 편집 없이 코드 한 줄로 흑백 효과를 적용할 수 있어 매우 유용합니다.
filter 속성은 흑백 변환뿐만 아니라 블러(blur), 드롭 섀도(drop-shadow), 밝기(brightness), 대비(contrast) 등 다양한 시각적 특수 효과를 요소에 적용할 때 사용됩니다.
문법(Syntax)
CSS filter 속성의 기본 문법은 다음과 같습니다.
Selector {
filter: grayscale(100%);
-webkit-filter: grayscale(100%);
}grayscale(100%)은 이미지를 완전한 흑백으로 만들며, 백분율 값을 조절하면 부분적인 회색조 효과도 줄 수 있습니다. 예를 들어 grayscale(50%)을 지정하면 원본 색상이 절반만 제거된 중간 톤의 이미지가 됩니다.
또한 -webkit-filter는 구버전 Safari 등 웹킷 기반 브라우저와의 호환성을 위해 함께 작성해 주는 것이 좋습니다.
예제 1: 짝수 번째 이미지에 흑백 효과 적용하기
아래 예제에서는 :nth-of-type(even) 선택자를 사용하여 짝수 번째 이미지에만 흑백 필터를 적용합니다.
<!DOCTYPE html>
<html>
<head>
<style>
img {
margin: 2%;
border-radius: 25%;
}
img:nth-of-type(even) {
filter: grayscale(100%);
-webkit-filter: grayscale(100%);
}
</style>
</head>
<body>
<img src="https://images.unsplash.com/photo-1611825715408-826f2b19c43f?crop=entropy&cs=tinysrgb&fit=crop&fm=jpg&h=200&ixlib=rb-1.2.1&q=80&w=200" alt="img from unsplash">
<img src="https://images.unsplash.com/photo-1611825715408-826f2b19c43f?crop=entropy&cs=tinysrgb&fit=crop&fm=jpg&h=200&ixlib=rb-1.2.1&q=80&w=200" alt="img from unsplash">
</body>
</html>실행 결과
위 코드를 실행하면 첫 번째 이미지는 원본 컬러 그대로 유지되고, 두 번째 이미지만 흑백으로 표시됩니다.
예제 2: 홀수 번째 이미지에 흑백 효과 적용하기
이번에는 :nth-of-type(odd) 선택자를 사용하여 홀수 번째 이미지에만 흑백 필터를 적용해 보겠습니다.
<!DOCTYPE html>
<html>
<head>
<style>
img {
margin: 2%;
}
img:nth-of-type(odd) {
filter: grayscale(100%);
-webkit-filter: grayscale(100%);
}
</style>
</head>
<body>
<img src="https://images.unsplash.com/photo-1611781750917-8777ab68668a?crop=entropy&cs=tinysrgb&fit=crop&fm=jpg&h=256&ixlib=rb-1.2.1&q=80&w=256">
<img src="https://images.unsplash.com/photo-1611781750917-8777ab68668a?crop=entropy&cs=tinysrgb&fit=crop&fm=jpg&h=256&ixlib=rb-1.2.1&q=80&w=256">
</body>
</html>실행 결과
위 코드를 실행하면 첫 번째 이미지는 흑백으로, 두 번째 이미지는 원본 컬러로 표시됩니다.
마무리 및 활용 팁
CSS의 filter: grayscale() 속성을 활용하면 자바스크립트나 포토샵 없이도 손쉽게 흑백 이미지 효과를 구현할 수 있습니다. 실무에서는 다음과 같이 응용할 수 있습니다.
- 호버 효과: 평소에는 흑백 이미지를 보여주고, 마우스를 올리면(
:hover) 컬러로 전환하는 인터랙션 구현 - 갤러리 디자인: 여러 이미지 중 특정 이미지만 강조하기 위해 나머지를 흑백 처리
- 트랜지션 추가:
transition: filter 0.3s;를 함께 사용하면 부드러운 색상 전환 애니메이션 가능
grayscale 값은 0%부터 100%까지 자유롭게 조절할 수 있으므로, 프로젝트의 분위기와 디자인 의도에 맞게 다양하게 활용해 보시기 바랍니다.