[CSS] checkbox 커스텀하기

안녕하세요. J4J입니다.

 

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

 

 

 

들어가기에 앞서...

 

UI를 구성하면서 디자인을 많이 입혀야 하는 것들 중 하나라고 생각되는 것이 checkbox입니다.

 

하지만 checkbox의 문제점은 기존에 많이 사용되는 input [type="checkbox"]만 활용했을 때 checkbox의 체크 표시를 커스텀할 수가 없습니다.

 

그러므로 checkbox와 동일한 기능을 수행하며 또한 체크 표시를 커스텀할 수 있도록 추가적인 작업을 진행해줘야 합니다.

 

 

 

이번 글에서는 다음의 체크 박스 아이콘들을 사용할 예정입니다.

 

선택되지 않은 경우

 

선택된 경우

 

 

 

선택되지 않았을 땐 위에 있는 아이콘이 표시되도록 하고 선택했을 경우엔 아래 있는 아이콘이 표시되도록 하겠습니다.

 

UI를 입히시는 분들마다 자신만의 방식이 있을 것이기에 제가 주로 사용하는 방식으로 checkbox를 커스텀해보겠습니다.

 

 

반응형

 

 

checkbox 커스텀

 

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

 

 

 

 

위와 같이 코드를 작성한다면 기존 input [type="checkbox"]를 활용하여 기존과 달리 체크 아이콘을 원하는 이미지로 가져와 사용할 수 있습니다.

 

 

 

 

 

 

 

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

 

읽어주셔서 감사합니다.