[CSS] radio 커스텀하기

안녕하세요. J4J입니다.

 

이번 포스팅은 radio 커스텀하는 방법에 대해 적어보는 시간을 가져보려고 합니다.

 

 

 

들어가기에 앞서...

 

UI를 구성하면서 많이 사용되는 것 중 하나가 radio 버튼입니다.

 

하지만 우리가 늘 해왔던것처럼 input [type="radio"]를 사용하다 보면 알 수 있는 것 중 하나가 radio의 버튼 이미지를 input 자체에 style을 줌으로써 변경할 수 없다는 것입니다.

 

결국 이를 해결하기 위해서는 input에 style을 주는 방식이 아닌 다른 방식을 통해 radio를 구성해야 합니다.

 

여러 방법들이 있겠지만 그 중 제가 느끼기에 간편하다고 생각되는 방법에 대해 소개해드리겠습니다.

 

 

반응형

 

 

radio 버튼의 아이콘들은 다음의 이미지를 사용하겠습니다.

 

선택되지 않은 경우

 

선택된 경우

 

 

 

radio 커스텀

 

 

 

728x90

 

 

 

 

 

 

이상으로 radio 커스텀하는 방법에 대해 간단하게 알아보는 시간이었습니다.

 

읽어주셔서 감사합니다.