🔘 CSS 토글 스위치 생성기 | 체크박스 코드 복사

전체 너비

전체 높이

손잡이 여백 (트랙 안쪽 간격)

전환 시간 (직접 정하세요)

전환 곡선

꺼진 상태 트랙 색

켜진 상태 트랙 색

손잡이 색

키보드 초점 테두리 색

체크박스 하나로 동작하는 토글 스위치 CSS를 만들어 줍니다. 너비와 높이, 손잡이 여백, 색을 넣으면 손잡이 지름과 이동 거리를 계산해 선언으로 넣어 주고, 바로 위 미리보기에서 실제로 눌러 볼 수 있습니다.

구조는 label이 input[type=checkbox]와 span을 감싸고, input을 눈에 보이지 않게 둔 뒤 :checked와 형제 선택자로 span의 모양을 바꾸는 방식입니다. 손잡이 지름은 높이에서 여백을 두 번 뺀 값이고, 켜질 때 옮겨 가는 거리는 너비에서 높이를 뺀 값입니다. 키보드 사용자를 위해 :focus-visible 테두리 선언도 함께 넣습니다. 선택자 동작은 W3C CSS Selectors Level 4 를 따릅니다(2026년 10월 기준).

전환 시간과 곡선은 권장값을 제시하지 않고 입력한 값을 그대로 씁니다. 이 도구는 라벨 문구나 상태 알림 텍스트, 비활성 상태 스타일은 만들지 않습니다. 움직임을 줄여 달라는 설정을 존중하려면 prefers-reduced-motion 블록을 따로 추가하세요.

자주 묻는 질문

왜 체크박스를 숨기고 span을 꾸미나요?

체크 상태를 브라우저가 관리하게 두면 키보드 조작과 폼 전송, 보조기술 읽기가 그대로 동작합니다. 모양만 형제 span에 입히는 방식입니다.

display: none으로 숨기면 안 되나요?

안 됩니다. display: none인 입력은 초점을 받을 수 없어 키보드로 켜고 끌 수 없습니다. 크기를 1px로 줄이고 opacity를 0으로 두세요.

전환 시간은 얼마가 좋은가요?

이 도구는 권장 시간을 제시하지 않습니다. 입력한 값을 그대로 코드에 넣어 줄 뿐이며, 0을 넣으면 애니메이션 없이 즉시 바뀝니다.

🔘CSS 토글·스위치 코드 생성기

관련된 도구

CSS 툴팁 코드 생성기

CSS 버튼 물결(리플) 효과 생성기

자주 묻는 질문

관련된 도구

CSS 툴팁 코드 생성기

CSS 버튼 물결(리플) 효과 생성기

자주 묻는 질문

같은 카테고리 도구