[css] 그레이스케일 필터
CSS의 grayscale() 필터를 사용하면 이미지를 그레이스케일(흑백)로 변환할 수 있습니다. 이 필터를 적용하면 사진이 간단하게 모노톤 이미지로 변환됩니다.
사용 방법
이미지가 들어 있는 요소에 filter 속성을 적용하여 그레이스케일 효과를 추가할 수 있습니다.
img {
filter: grayscale(100%);
}
위의 예시에서 grayscale() 함수의 인수는 0%에서 100% 사이의 값입니다. 0%는 효과가 없음을 의미하고, 100%는 완전한 흑백 효과를 나타냅니다.
다른 필터와 함께 사용하기
grayscale() 필터를 다른 CSS 필터와 함께 사용하여 이미지의 시각적 효과를 더욱 풍부하게 만들 수 있습니다.
예를 들어, 이미지에 brightness() 필터를 적용하여 밝기를 줄이고, grayscale() 필터를 적용하여 흑백으로 변환할 수 있습니다.
img {
filter: brightness(50%) grayscale(100%);
}
주의 사항
grayscale()필터를 적용하면 사용자가 사용 중인 웹 브라우저에 따라 이미지의 성능이 다를 수 있습니다.- 모든 브라우저에서 완전한 호환성을 제공하지 않을 수 있으므로 사용 시에는 테스트가 필요합니다.
이제 CSS grayscale() 필터를 사용하여 이미지에 효과를 추가할 수 있는 방법을 알게 되었습니다. 특정 이미지에 흑백 효과를 쉽게 적용하고 싶을 때 유용하게 활용할 수 있습니다.
Reference: