Hi-람👋 High-람☀️

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

프로젝트를 진행하다 보니 체크박스를 내가 원하는 디자인으로 커스텀을 해야 했다. 기본으로 제공되는 체크박스는 내가 원하는 스타일과는 꽤나 다르게 생겼다. 그래서 다음과 같이 Checkbox 컴포넌트를 새로 만들기로 했다. 코드 Checkbox.js import { CheckboxStyle, CheckboxWrapper, StyledLabel } from "./style"; const Checkbox = ({ id, label, checked, handler }) => { return ( {label} ); }; export default Checkbox; 먼저, 가 커스텀한 Checkbox인 과 을 감싸도록 했다. Checkbox를 사용하기 위해 input type을 "checkbox"로 지정해 주고, ..