본문으로 건너뛰기
Toolars
둘러보기
버그 신고

디자인 · 로컬 유틸리티

CSS 스위치 생성기

CSS Switch Generator

트랙, 썸, 두 상태 색상을 갖춘 순수 CSS 토글 스위치를 만들고 포커스와 reduced-motion 처리를 포함한 코드를 복사합니다.

작업 경로 / 입력에서 결과까지

트랙 크기 정하기

로컬에서 실행 · 업로드 없음

CSS 스위치 생성기 사용법, 개인정보 보호 및 관련 도구

작업 경로 / 입력에서 결과까지

순수 CSS 스위치를 디자인하는 방법

  1. 01

    트랙 크기 정하기

    트랙 너비를 44~128px, 트랙 높이를 24~64px로 설정하세요. 썸이 움직일 여지를 확보하려면 너비가 높이보다 최소 8px 커야 합니다. 기본값 64 × 34px은 대부분의 모바일 스위치 비율을 반영합니다.

  2. 02

    썸 맞추기

    썸 크기를 16~56px 사이에서 고르세요. 썸은 트랙 안에 들어가야 하며, 트랙 높이에서 4px를 뺀 값을 넘으면 상태가 값 확인으로 바뀌고 어긴 규칙을 정확히 알려주세요.

  3. 03

    두 상태에 색 입히기

    꺼짐 위치는 비활성 트랙으로, 켜짐 위치는 활성 트랙으로 고르세요. 썸 자체는 작고 부드러운 그림자를 가진 흰색을 유지하므로, 두 트랙 색상은 흰색과의 대비만 확보하면 됩니다.

  4. 04

    전환 미리 보기

    활성 상태 표시를 전환하면 실제 180ms ease 타이밍으로 썸이 미끄러지고 트랙이 색을 바꾸는 것을 볼 수 있습니다. 썸 주변의 패딩은 남은 트랙 높이의 절반으로 계산되므로, 어떤 크기를 골라도 맞물림이 균일합니다.

  5. 05

    CSS 복사 또는 다운로드하기

    CSS 복사 또는 .css 다운로드로 toolars-switch.css를 저장하세요. 흰색 썸은 계산된 이동 거리만큼 두 상태 사이를 미끄러지고, 볼내기에는 처음부터 포커스와 reduced-motion 처리가 포함됩니다. 출력 패널에 실시간 바이트 수가 표시돼 컴포넌트가 얼마나 간결한지 확인할 수 있습니다.

  6. 06

    마크업 조립하기

    .switch 래퍼 안에 체크박스 input과 그에 이은 .switch-track 요소를 정확히 이 순서로 두세요. 형제 선택자가 이 순서에 의존합니다. input은 보이지 않는 1px 상자로 줄어들지만 포커스는 가능하고, 포커스 시 활성 트랙 색상으로 3px 윤곽이 그려져요.

도구 요약

처리
브라우저에서 완결
입력의 기기 외 전송
없음
저장
아무것도 저장하지 않음
가격
무료

입력 값은 브라우저에 머물러요.

CSS 스위치 생성기 도구는 검증된 로컬 실행 경로를 사용하고, 숨겨진 입력 또는 출력 기록을 만들지 않습니다.

로컬 실행

현재 브라우저 탭 안에서 실행됩니다.

숨겨진 처리 없음

사용 중인 도구 데이터는 Toolars 문서 기록으로 남지 않습니다.

계정 불필요

프로필을 만들지 않고도 핵심 워크플로를 사용할 수 있습니다. 즐겨찾기는 로그인 후 계정에 동기화됩니다.

즉시 초기화

탭을 정리하면 사용 중이던 작업 데이터도 사라져요.

CSS 스위치 생성기 도구가 실제로 하는 일

다크 모드 토글, 알림 스위치, 설정 패널의 기능 플래그까지, 같은 컴포넌트는 어디에나 있고 브라우저 검사기에서 수치를 조금씩 건드리는 작업은 시간이 걸려요. 여기서는 트랙, 썸, 이동 거리를 한 번에 시각적으로 정할 수 있습니다. 볼내기는 실제 input을 유지하므로 키보드와 보조 기술 지원은 그대로이고, 실험은 탭 밖으로 나가지 않습니다. 결과는 JavaScript 한 줄 없이 디자인 시스템에 들어가요. 무엇이든 복사하기 전에 두 상태를 나란히 검토할 수 있습니다.

자주 묻는 질문

볼낸 CSS가 기대하는 마크업은 무엇인가요?
.switch 래퍼 안에 체크박스 input과 그에 이은 .switch-track 요소를 두세요. input은 시각적으로는 숨겨지지만 포커스와 조작이 모두 가능합니다. 완성된 스위치는 감싸고 있는 네이티브 컨트롤과 똑같이 동작합니다.
강제되는 기하 규칙은 무엇인가요?
두 가지입니다. 트랙 너비는 높이보다 최소 8px 커야 하고, 썸은 트랙 안에 들어가야 합니다(최대 높이 빼기 4px). 어느 하나라도 어기면 값 확인이 표시되고, 값이 통과할 때까지 복사와 다운로드는 비활성화됩니다.
썸은 얼마나 이동하나요?
스타일시트가 입력한 수치로 계산합니다. 트랙 너비에서 썸 크기와 양쪽 끝의 패딩을 뺀 거리입니다. 썸은 꺼짐과 켜짐 두 위치 모두에서 트랙 가장자리에 딱 맞게 닿아요.
볼내기가 움직임 감축을 처리하나요?
네. prefers-reduced-motion 블록이 180ms 전환 두 개(트랙 색 변화와 썸 슬라이드)를 제거합니다. 상태 변화는 그대로 일어나지만 움직임 없이 즉시 완료됩니다.
내장된 시각 디테일은 무엇인가요?
트랙의 모서리 반경이 높이의 절반이라서 트랙은 항상 완전한 알약 모양이고, 흰색 썸에는 떠 보이는 느낌을 주는 작은 고정 드롭 섀도가 있습니다. 그 외의 모든 것(색상, 기하, 이동 거리)은 입력한 컨트롤 값에서 바로 나와요.
디자인이 업로드되나요?
아니요. 워크스페이스는 현재 브라우저 탭 안에서만 동작하고 계정도 필요 없습니다. 어떤 값도 저장, 기록, 전송되지 않습니다. 페이지가 로드된 후에는 네트워크 연결 없이도 생성기가 계속 작동합니다. 초기화를 누륵면 기본값으로 돌아가요.

디자인 카테고리에서 계속하기

막다른 길이 아니라 이어지는 작업입니다.

전체 인덱스로 돌아가지 않고 다른 집중 워크스페이스로 바로 이동합니다.

CSS 로더 생성기

CSS Loader Generator

궤도 링이나 점 세 개 로딩 스피너를 크기, 굵기, 속도, 색상 제어로 디자인하고 reduced-motion을 존중하는 CSS를 복사합니다.

생성

CSS 체크박스 생성기

CSS Checkbox Generator

크기, 테두리, 상태 색상으로 커스텀 체크박스를 꾸미고, 키보드 접근이 가능한 실제 input을 유지하는 CSS를 복사합니다.

생성

CSS clip-path 생성기

CSS Clip Path Generator

드래그, 키보드 또는 좌표로 다각형을 편집하세요. 네 가지 프리셋에서 시작해 clip-path 선언이나 전체 CSS를 로컬에서 복사합니다.

생성

CSS 배경 패턴 생성기

CSS Background Pattern Generator

순수 CSS 그라데이션만으로 점, 격자, 사선 배경 패턴을 조합합니다. 이미지 파일 없이 타일과 표시 크기, 색을 조절합니다.

생성