[CSS3/tailwindCSS] background-image를 통해 커스텀 체크 박스를 만드는 방법

<label htmlFor="formCheckAll">
    <span className="sr-only">전체 동의</span>
    <input
        id="formCheckAll"
        type="checkbox"
        checked={checkAll}
        onChange={handleAllItems}
        style={{
            backgroundImage: `url(${CheckedIcon})`,
            backgroundRepeat: 'no-repeat',
            backgroundPosition: 'center',
        }}
        className="w-[28px] h-[28px] rounded-full bg-[#BDBEC0] checked:bg-green-default appearance-none"
    />
</label>

우선 제일 먼저

<input> 태그의 type 속성을 checkbox로 둔다. 위 코드는 전체 동의를 위한 checkbox input 예제 코드.

TailwindCSS와 섞어 써서 몇 가지를 설명하자면,

• sr-only : 라벨 내 태그 텍스트는 스크린 리더 사용자에게만 읽히도록 한다.
• rounded-full : border-radius: 50%;와 동일. 체크 박스 이미지를 둥글게 만든다.
• checked:bg-green-default : green-default라는 변수명으로 tainwind.config.js 파일에 등록해둔 색상으로 background-color를 지정해준다. 단, checked가 true일 때만 활성화하는 코드이다.
• appearance-none : appearance: none;과 동일한 코드로, 주로 커스텀 폰트 요소를 만들 때 사용하는데, 해당 요소에 적용된 default 브라우저 스타일링을 제거하는 데 쓴다. tailwindCSS에서 관련 항목 더보기

기본적인 스타일은 제거하고, input의 내부 체크 아이콘을 디자이너가 준 커스텀 체크 아이콘(.svg)으로 쓰기 위해 <input> 태그를 background-image로 설정했다. 위에서 물론 CheckedIcon은 import가 된 상태여야 한다.

이때 잊지 말아야 할 것은 label 태그의 htmlFor와 input 태그의 id 값을 동일하게 가져가면서 <label>과 <input>을 묶어줘야 한다는 점.

 

원래는 background-image도 tailwindCSS로 작성해보려고 했다. 물론 tailwindCSS가 해당 속성을 지원했는데, 계속 실패해서 기존 CSS와 혼용해서 사용했더니 더욱 깔끔하게 작성할 수 있게 된 것 같다.

 

사실 스크린리더 사용자에게만 라벨이 보이도록 하는 것도 접근성에는 어긋나지만, 디자이너와 충분히 이야기하고 협의해 나갈 시간이 부족해서, 우선은 이렇게라도 작성하게 됐다. 기회가 되면, 이런 이야기도 차근차근 하면서 프로덕트를 만들 기회가 생기면 좋을 것 같다.