Hi-람👋 High-람☀️

기존 Input에서 제공하는 RadioButton에서 색만 바꾸고 싶었을 뿐인데, 생각보다 자료들이 많지 않았다. 커스텀했다는 내용을 살펴보면 radio 특유의 동그라미 2개를 사용하는 모양보다, 아예 새로운 이미지를 사용하는 경우가 대다수였다. 그래서 나처럼 고민하는 사람들을 위해 RadioButton 커스텀하는 방법을 정리해보도록 하겠다! 먼저, 내가 만들고자 하는 모양은 다음과 같았다. 고려해야 할 점은 선택되었을 때 1. 내부에 동그라미가 생겨야 하며 2. icon의 색과 label의 색상이 바뀌어야 한다 는 것이다. 다른 것보다 나는 css에 대해 잘 모르고 있어서, 1번을 어떻게 구현해야 하는지 막막했다. 여기서는 다음과 같은 css에 대해 아는 것이 중요하다. 가상 선택자 :after 선택한..

버튼 컴포넌트를 만들다 보니 테마에 따라 이미지의 색상도 바꿔야 했다. SVG파일의 경우 마크업 언어로 표현되기 때문에 색상을 쉽게 바꿀 수 있다. 1 ) SVG 파일 수정하기 SVG파일의 색상을 바꾸려면 먼저 위의 코드처럼 fill="none"으로 작성되어 있는 부분을 fill="current"로 바꿔야 한다. 여기서 주의할 점은 모든 fill을 바꿔야 한다는 것이다. 내가 바꾸고 싶은 svg파일의 경우 fill이 2군데 있었다. 한 군데만 바꿨을 때는 작동이 안 됐다. 2 ) fill 속성 지정하기 SVG파일을 수정했으면 해당 컴포넌트로 가서 props를 fill="#A0A0A0"와 같이 지정하면 색상이 바뀐다. 다만 여기서도 주의해야 하는 부분이 있다. SVG파일을 다음과 같이 img src를 이용..