⚡ 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 제어, React/Vue 연동에도 그대로 사용할 수 있습니다.

📋 바로 복사해서 쓰는 코드

아래 스니펫만 가져가도 기본 토글은 바로 붙습니다.

/* ck-slide core */
.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)); }

/* 선택 확장 */
.ck-slide.slide-m { --sw-w:40px; --sw-h:24px; --sw-pad:2px; --sw-knob:18px; }
.ck-slide.pri { --sw-on:#0d6efd; }

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, mint

🧩 크기 체감 비교

26x16

32x18

40x24

BIG

52x28

적용 가이드

✓ .ck-slide + .slide-m 조합이 가장 무난합니다.
✓ .ck-slide-wrap 으로 감싸면 텍스트와 간격이 안정적입니다.
✓ 네이티브 체크박스라 checked, disabled 상태를 그대로 씁니다.
✓ 폰트 크기에 덜 흔들리도록 px 기반으로 고정했습니다.
✓ :focus-visible 과 prefers-reduced-motion 도 반영했습니다.

🔧 상태별 예시 + 비활성화 추가

클릭해서 바로 테스트

앱 설정 예시

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

비활성화 상태 예시

계정 비활성화 개발자 모드 잠금 실시간 동기화

현대 브라우저 기준으로 사용하기 적합합니다. 구형 IE 계열은 확인이 더 필요합니다.

#토글UI #순수CSS #접근성보강

한 줄 사용 예: <link rel="stylesheet" href="ck-slide.min.css"> 또는 아래 CSS 블록 그대로 복사