> For the complete documentation index, see [llms.txt](https://shhn0509.gitbook.io/css/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://shhn0509.gitbook.io/css/custom-styling/check-box.md).

# Check box

Check box의 커스텀 스타일링 방법을 알아봅니다.

## 기본 Checkbox 스타일  

![브라우저에서 제공하는 기본 Checkbox 스타일 (MDN 이미지 참고)](https://1354103775-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MPKHDV1Rio6pgHUNJt6%2F-MPmF_P3qTjbK4wHIUzY%2F-MPmGFZsLYdSRrYlArui%2Fimage.png?alt=media\&token=97a96104-4e78-42ba-ac81-418dcdbb48e8)

브라우저에서는 위와 같은 이미지 처럼 checkbox를 기본 스타일로 제공합니다. 이를 커스텀 디자인을 적용하기 위해서 어떻게 하면 되는지 알아봅니다. 

## 방법 1, 접근성을 고려한 커스텀 Checkbox 

checkbox를 커스텀으로 디자인 하기 위해서 검색을 해보았습니다. 몇몇 글을 보니 `display: none`을 사용해서 기본 스타일을 화면에서 보이지 않도록 제거한 다음 배경이미지를 첨부하는 방법을 소개했습니다. 하지만 해당 방법은 작업을 할 때는 간편해 보이지만 접근성을 전혀 고려하지 않은 방법입니다. 왜냐하면 `display: none` 일 경우 키보드 사용자는 checkbox에 접근이 불가능하기 때문입니다.  

> ## [How to Make Custom Accessible Checkboxes and Radio Buttons?](https://webdesign.tutsplus.com/tutorials/how-to-make-custom-accessible-checkboxes-and-radio-buttons--cms-32074)

위의 제목을 클릭하면 접근성을 고려한 커스텀 디자인하는 방법을 설명하고 있습니다. 

해당 글에서도 기본 스타일로 제공하는 checkbox를 시각적으로 감추기 위해 display: none을 접근성의 이유로 사용을 권장하지 않습니다.  

### opacity 속성 사용하기  

[`opacity: 0`](https://developer.mozilla.org/en-US/docs/Web/CSS/opacity)을 사용해서 시각적으로 감춘다. 

```css
opacity: 0
```