HTML 코드
<label class="row">알림 받기<input type="checkbox" class="sw" checked></label>
<label class="row">다크 모드<input type="checkbox" class="sw"></label>
<style>
.row{display:flex;justify-content:space-between;align-items:center;padding:12px 0;border-bottom:1px solid var(--border);max-width:320px}
.sw{appearance:none;width:44px;height:26px;border-radius:13px;background:var(--border);position:relative;cursor:pointer;transition:.2s;margin:0}
.sw::after{content:"";position:absolute;top:3px;left:3px;width:20px;height:20px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgb(0 0 0 / .3);transition:.2s}
.sw:checked{background:var(--accent)}
.sw:checked::after{left:21px}
</style>AI에게 이렇게 요청하세요
설정 화면의 '알림 받기' 오른쪽에 켜면 파란색이 되고 바꾸는 즉시 저장되는 토글 스위치 넣어줘
<label class="row">알림 받기<input type="checkbox" class="sw" checked></label>
<label class="row">다크 모드<input type="checkbox" class="sw"></label>
<style>
.row{display:flex;justify-content:space-between;align-items:center;padding:12px 0;border-bottom:1px solid var(--border);max-width:320px}
.sw{appearance:none;width:44px;height:26px;border-radius:13px;background:var(--border);position:relative;cursor:pointer;transition:.2s;margin:0}
.sw::after{content:"";position:absolute;top:3px;left:3px;width:20px;height:20px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgb(0 0 0 / .3);transition:.2s}
.sw:checked{background:var(--accent)}
.sw:checked::after{left:21px}
</style>언제 쓰나
누르는 즉시 적용되는 켜기/끄기 설정 (알림, 다크 모드, 공개 여부).
비슷한 것과 차이
- 체크박스: “저장” 버튼을 눌러야 적용되는 폼 안의 선택, 또는 여러 개 동시 선택
- 세그먼트 컨트롤: 두 개 이상 선택지 중 하나