이번에 새로운 프로젝트를 진행하면서 UI를 구현하고 있는데 요구사항 중에 "게시글 목록 중 완료 상태인 게시글의 썸네일 이미지를 흑백으로 나타낸다"가 있었다. 처음 해당 요구사항을 보고 이미지 위에 검은색을 올려 opacity를 적용시키면 되겠다라고 생각했는데, CSS 중에 filter라는 기능으로 더 간단하게 구현할 수 있어서 filter를 처음으로 사용해보게 됐다.
웹 호환성이 그리 좋은 편은 아니라는 점은... 다소 아쉽다.
none :기본값
blur(px) : 이미지에 흐림효과를 적용 값이 클수록 더 흐림 흐림
brightness(%) : 이미지 밝기를 조정. 0%는 완전히 검게 처리, 100%는 기본값, 100%보다 크면 밝아짐
contrast(%) : 이미지의 대비를 조정. 0%는 완전히 검게 처리, 100%는 기본값, 100%보드 크면 더 많은 대비
drop-shadow(x y blur 색상) : 이미지에 그림자 효과를 지정, x, y는 그림자의 위치를 지정, blur는 흐림정도, 색상은 그림자 색상
graysclae(%) : 이미지를 회색조로 변환, 0%가 기본값, 100%는 이미지를 완전 회색 처리
hue-rotate(deg) : 이미지에 색조 회전을 적용
invert(%) : 이미지를 색상 반전. 0%는 기본값원본, 100%는 이미지를 완전히 반전 (0% | 100%만 가능)
opacity(%) : 이미지의 투명도를 지정
saturate(%) : 이미지 채도 지정, 0%는 이미지의 채도를 완전 없앰, 100%가 기본에 원본, 100%를 초과하면 채도 높아짐
sepia(%) : 이미지를 세피아톤으로 변환. 0%~100%, 0%가 기본에 원본
url( ) SVG필터를 지정하는 XML파일의 위치를 가져오고 특정 필터요소에 대한 경로를 포함
프로젝트에서 코드는 다음과 같이 작성했다. next.js / Tailwind를 사용한다.
<div className="h-[160px] relative">
<Image
className={`rounded-t-xl w-[240px] h-[160px] ${isEnd ? 'grayscale' : ''}`}
src={hasThumbnail ? '' : used}
alt="썸네일"
width={240}
height="auto"
/>
<div className="absolute top-[8px] left-[8px] text-xs text-blue--500 font-bold bg-white rounded-lg w-[54px] py-[2px] flex justify-center">
{isTrade ? '거래' : '나눔'}완료
</div>
</div>isEnd는 게시글 상태가 "완료"인지를 나타내는 useState 변수로, 해당 값이 true일 때 className에 grayscale를 추가하도록 조건을 넣어주었다.
