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