[CSS] PNG 이미지 편집 없이 색상 변경하기 (filter)

프로젝트에서 로그인 페이지에서  '로그인 유지하기' 버튼 UI를 구현 중이었다.

체크하는 아이콘이 png 파일이어서 버튼 클릭했을 때 스타일을 어떤 식으로 변경해야 하나 고민하다가 구글링해서 찾아냈다! 나중에도 써먹을 수 있을 것 같아서 블로그로 남긴다.

 

 

 

 

 

filter 기능 활용하기

filter 속성으로 이미지 색상을 자유자재로 변경할 수 있다.

이미지를 필터링을 주는 효과이지만, 아이콘 이미지(png/svg) 원하는 색상으로 변경용으로 사용하면 된다.

 

좀 더 자세히 알고 싶으면 아래 링크로!

https://developer.mozilla.org/en-US/docs/Web/CSS/filter-function/invert

invert() - CSS: Cascading Style Sheets | MDN

 

 

 

 

예시 코드

const [isChecked, setIsChecked] = useState(false); // 로그인 유지하기 버튼 클릭 상태관리

  // 로그인 유지하기 기능 구현 필요
  const handleCheckClick = () => {
    setIsChecked(!isChecked);
  };

위의 코드는 저 버튼이 클릭 되었는지 여부를 알기 위한 상태관리와 버튼 클릭 시의 onclick 이벤트이다.

우선은 UI만 구현하고 기능을 나중에 구현해야 해서 간단하게만 썼다.

 

 

   <CheckContainer
        onClick={handleCheckClick}
        isChecked={isChecked} // isChecked 상태 전달
      >
        <CheckLabel>
          <Img src={CheckIcon} alt="check" isChecked={isChecked} />
          로그인 상태 유지하기
        </CheckLabel>
      </CheckContainer>

여기서 onClck 이벤트가 나오는 걸 볼 수 가 있다. styled-components를 사용해서 style을 구현중이라 classname이 위의 코드와 같긴 한데, 이 중에서 img가 내가 색상을 변경시키고 싶은 이미지이다.

check가 되어있는지 여부에 따라 달라지도록 isChecked를 포함시켰다.

 

 

const CheckContainer = styled.button`
  font-size: 15px;
  font-weight: 400;
  margin-top: 30px;
  margin-bottom: 20px;
  background-color: transparent;
  border: none;
  color: ${(props) => (props.isChecked ? "#5263ff" : "inherit")};
`;

const Img = styled.img`
  margin-right: 10px;
  filter: ${(props) => (props.isChecked ? "invert(100%)" : "inherit")};
`;

const CheckLabel = styled.label`
  display: flex;
  align-items: center;
  color: ${(props) => (props.isChecked ? "#5263ff" : "inherit")};
`;

이게 바로 스타일 코드이다!

props가 isChecked 되었는가 삼항 연산자를 사용하여 color를 변경하도록 해줬다.

클릭 시 파란색깔로 바뀌도록 해주었고, Img는 보는 것처럼 filter를 사용해서 색상을 변경해주었다.

 

이처럼 png 파일이든, svg 파일이든 filter 속성을 사용하면 색상을 변경할 수 있다.

 

클릭 전

클릭 후

 

 

이렇게 캡처본처럼 스타일이 변경되는 걸 알수가 있다!

색상은 내가 임의로 지정한 거라 디자이너님과 상의하고 바뀔수도 있을 것 같다.

뭐든...일단 색깔을 바꿨음에 뿌듯해하며...ㅋㅋㅋㅋㅋㅋ

 

 

 

 

 

 

 

 

 

---

요즘 프로젝트를 하다가 몰랐던 게 있으면 최대한 빨리 블로그에 올리려고 노력중이다. 나중에 볼 나를 위함도 있지만 블로그가 아니면 노션에 지저분하게(?) 기록해두기 때문에...ㅋㅋㅋㅋㅋ

 

아무튼, 프로젝트 재밌다. 아직 기능 구현 전이지만, UI 구현하면서도 많이 배우는 것 같아서 뿌듯하다.