[CSS] radio 커스텀하기

안녕하세요. J4J입니다.

 

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

 

 

 

들어가기에 앞서...

 

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

 

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

 

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

 

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

 

 

반응형

 

 

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

 

선택되지 않은 경우

 

선택된 경우

 

 

 

radio 커스텀

 

See the Pen Untitled by 김 성찬 (@ksccmp) on CodePen.

 

 

728x90

 

 

 

 

 

 

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

 

읽어주셔서 감사합니다.