#css #html #web-development #ui-design #accessibility
CSS와 [role="switch"] 속성만을 사용하여 자바스크립트 없이 토글 스위치를 구현하는 방법을 소개합니다.
appearance: none으로 기본 스타일을 제거하고 ::after 가상 요소를 활용하여 스위치 동작을 시각적으로 표현하며, :checked 상태와 transition을 통해 부드러운 애니메이션 효과를 적용합니다.
접근성을 고려하여 label과 명확한 텍스트를 함께 사용하는 것이 중요함을 강조합니다.
[role="switch"] 속성을 활용합니다
[role="switch"] 속성은 [role="checkbox"]와 기능적으로 동일하지만 체크 여부 대신 켜짐/꺼짐 상태를 전달함.
이 속성 자체는 체크박스의 외관이나 동작을 변경하지 않지만 CSS 스타일링을 위한 훅(hook)으로 사용됨.
스크린 리더를 위한 의미론적 정보와 키보드 상호작용 기능을 이미 제공함.
스위치 기본 스타일을 정의합니다
appearance: none을 사용하여 브라우저 기본 스타일을 제거하고 display: inline-block을 적용함.
CSS 변수와 calc() 함수를 사용하여 너비와 높이 비율(약 1.8:1)을 설정함.
border-radius: 99em을 적용하여 둥근 알약 모양의 외관을 만듦.
box-sizing: border-box를 설정하고 :has() 의사 클래스를 사용하여 레이블과 스위치를 정렬함.
토글 스위치를 구현합니다
::after 가상 요소를 사용하여 실제 토글 버튼(원형)을 생성함.
content: ""와 aspect-ratio: 1, border-radius: 50%를 설정하여 원형 모양을 만듦.
“꺼짐” 상태에서는 흰색 배경과 어두운 회색 테두리를 적용하여 상태를 명확히 구분함.
상태 변화 및 애니메이션을 적용합니다
체크박스의 :checked 상태를 활용하여 “켜짐” 상태의 스타일을 정의함.
“켜짐” 상태에서는 배경색을 밝은 파란색으로 변경하고 translate 속성을 사용하여 토글 버튼을 오른쪽으로 이동시킴.
transition 속성을 추가하여 배경색 변화와 토글 이동에 부드러운 애니메이션 효과를 적용함.
접근성 고려사항을 확인합니다
기술적인 접근성은 [role="switch"]와 스타일링으로 해결되지만 사용 맥락이 중요함.
약관 동의나 목록 선택 등이 아닌 기능이나 설정을 켜고 끄는 용도로만 사용해야 함.
레이블 텍스트는 기능을 켜고 끄는 것임을 명확히 해야 하며 스위치의 “켜짐” 방향에 위치해야 함.