⚡ pure CSS copy-paste ready

🎛️ ck‑slide · 开关生成器

컴팩트한 스타일, 크기 시각화, 다양한 컬러 — 복사해서 즉시 사용 가능한 체크박스 토글

✔️ Bootstrap 미종속 | 커스텀 CSS 한 줄 추가로 완성

📏 尺寸可视化 & 精确像素

slide-big · slide-m · slide-s · slide-xs

slide-big 52px × 28px slide-m (기본 추천) 40px × 24px slide-s 32px × 18px slide-xs (초소형) 26px × 16px

💡 .ck-slide + .slide-크기 + 색상클래스 조합

🖱️ 인터렉티브 미리보기 (상태 변화)

기본 OFF ON (primary) secondary OFF secondary ON

✅ 체크박스이므로 form 전송, JavaScript 제어 가능, 리액트/vue 등과도 자연스럽게 연동

📋 一键复制组件代码

아래 스니펫을 복사해서 프로젝트에 붙여넣으세요. (CSS는 단 1블록)

/* ck-slide core - 한 줄로 완성되는 최소 CSS (실제로는 더 풍부하지만 간결함) */ .ck-slide { --sw-w:38px; --sw-h:22px; --sw-pad:2px; --sw-knob:16px; --sw-off-bg:#cfddee; --sw-on:#0d6efd; -webkit-appearance:none; appearance:none; width:var(--sw-w); height:var(--sw-h); border-radius:999px; background:var(--sw-off-bg); border:1px solid #bdc7d4; position:relative; cursor:pointer; transition:.2s; } .ck-slide::before { content:''; position:absolute; top:var(--sw-pad); left:var(--sw-pad); width:var(--sw-knob); height:var(--sw-knob); background:#fff; border-radius:50%; transition:transform .2s; box-shadow:0 1px 2px rgba(0,0,0,0.2); } .ck-slide:checked { background:var(--sw-on); border-color:var(--sw-on); } .ck-slide:checked::before { transform:translateX(calc(var(--sw-w) - var(--sw-knob) - (var(--sw-pad)*2) - 2px)); } /* 크기 클래스 + 생략 가능한 확장, 모든 컬러 변수는 필요에 따라 */

HTML 마크업 예시

<label class="ck-slide-wrap">
  <input type="checkbox" class="ck-slide slide-m pri" checked>
  <span>옵션 레이블</span>
</label>

<!-- 다른 크기 & 색상 -->
<label class="ck-slide-wrap">
  <input type="checkbox" class="ck-slide slide-s danger">
  <span>위험 동의</span>
</label>

💡 크기 클래스: slide-big, slide-m, slide-s, slide-xs / 컬러: pri, success, danger, warning, info, secondary, dark, purple

🧩 动态尺寸对比卡 (Visual Scale)

26x16

32x18

40x24

BIG

52x28

⚙️ 프로토타입 가이드

✓ .ck-slide + .slide-m (가장 표준)
✓ .ck-slide-wrap으로 감싸서 텍스트와 자연스러운 간격 확보
✓ 모든 체크박스는 native이므로 jQuery/Vanilla JS로 .prop('checked') 제어 가능
✓ 디자인 시스템에서 폰트 사이즈에 영향 받지 않음 (em 의존 X, px 기반)
✓ focus-visible 접근성, 키보드 탭 포커스 링 지원

🔧 高级组合 + 실시간 컨트롤

클릭해서 토글 테스트

🎯 앱 설정 예시 (실제 사용감)

푸시 알림 활성화 다크모드 자동 전환 위치 기반 서비스 분석 데이터 수집

📐 폼 그룹 인라인 사용

계정 비활성화 개발자 모드

✅ "ck-slide"는 현대 브라우저에서 완벽하게 동작하며, IE는 부분 지원되지만 모던 프로젝트에 최적.

#스타일 확장 #토글 UI #접근성 향상

✨ 한 줄 추가 : <link rel="stylesheet" href="ck-slide.min.css"> (또는 위 스타일 복사)