CSS 스위치 생성기
네이티브 체크박스를 스위치 모양으로 조정하고 상호작용 상태와 키보드 포커스를 확인하세요.
실시간 미리 보기
기본 체크박스 상태
각 미리 보기는 연결된 레이블이 있는 기본 체크박스입니다. Tab과 Space로 키보드 동작과 표시되는 초점 테두리를 확인하세요.
사용 방법
사용 방법
- 트랙 너비, 높이, 모서리, 여백, 전환 속도 및 세 색을 설정합니다.
- 상태를 확인하고 실제 입력에서 Tab과 Space를 사용합니다.
- HTML과 CSS를 복사하고 샘플 레이블과 id를 바꿉니다.
체크박스가 동작을 제공합니다
실제 input type=checkbox에서 모양만 제거하며 클릭 가능한 div나 숨긴 대체 요소가 아닙니다. 포커스, Space, 보조 기술 상태 보고, 양식 참여가 유지됩니다. 즉시 바뀌는 설정에 시각적 스위치를 쓰고 레이블에 설정을 명확히 적으세요.
크기와 이동 규칙
트랙 너비와 높이가 컨트롤을 정의합니다. 손잡이는 높이보다 6px 작고 양쪽 여백은 3px입니다. 너비는 높이보다 최소 6px 커야 하며 선택 시 너비와 높이 차이만큼 이동합니다. 실제 UI 크기에서 확인하세요.
포커스, 비활성 및 로컬 출력
:focus-visible 윤곽을 유지합니다. 비활성 컨트롤도 보이지만 바꿀 수 없고 낮은 불투명도는 보조 신호입니다. 미리보기와 코드 생성은 브라우저 안에서 이루어지며 디자인, 색상, 코드를 업로드하지 않습니다. 대비, 크기, 양식 동작, 문구를 확인하세요.
자주 묻는 질문
더 알아보기
스위치는 체크박스와 다른가요?
즉시 바뀌는 설정을 설명하는 레이블을 가진 체크박스를 스위치로 표현하는 경우가 많으며 기본은 두 상태입니다. 저장 필요 여부는 도구가 결정하지 않습니다.
포커스 표시를 제거해도 되나요?
다른 분명한 표시 없이 제거하지 마세요. Space로 바뀔 스위치를 보여야 합니다.
손잡이가 너비-높이만큼 움직이는 이유는?
손잡이는 높이보다 6px 작고 양쪽에 3px 여백이 있습니다. 너비와 높이 차이만큼 움직이면 반대쪽 여백까지 갑니다.
출력에 접근성 이름이 있나요?
샘플은 일치하는 id와 for로 입력과 레이블을 연결합니다. 명확한 설정 이름을 쓰고 각 id를 고유하게 하세요.