브라우저에서는 위와 같은 이미지 처럼 checkbox를 기본 스타일로 제공합니다. 이를 커스텀 디자인을 적용하기 위해서 어떻게 하면 되는지 알아봅니다.
방법 1, 접근성을 고려한 커스텀 Checkbox
checkbox를 커스텀으로 디자인 하기 위해서 검색을 해보았습니다. 몇몇 글을 보니 display: none을 사용해서 기본 스타일을 화면에서 보이지 않도록 제거한 다음 배경이미지를 첨부하는 방법을 소개했습니다. 하지만 해당 방법은 작업을 할 때는 간편해 보이지만 접근성을 전혀 고려하지 않은 방법입니다. 왜냐하면 display: none 일 경우 키보드 사용자는 checkbox에 접근이 불가능하기 때문입니다.
