LEVEL 34 QUEST

비밀번호 도구 완성

길이, 특수문자 옵션 추가

🎛️ 옵션 UI 만들기

체크박스와 슬라이더로 옵션 만들기

사용자가 비밀번호에 포함할 문자 종류와 길이를 선택할 수 있게 해요!

• <input type="checkbox"> - 체크박스 (on/off 선택)
• <input type="range"> - 슬라이더 (범위 선택)

options-ui.html

<label>비밀번호 길이: <span id="lengthDisplay">12</span>자</label> <input type="range" id="pwLength" min="4" max="32" value="12" oninput="document.getElementById('lengthDisplay').innerHTML = this.value">  <label><input type="checkbox" id="useUpper" checked> 대문자 (A-Z)</label> <label><input type="checkbox" id="useNumbers" checked> 숫자 (0-9)</label> <label><input type="checkbox" id="useSymbols"> 특수문자 (!@#$)</label>

checked 속성

체크박스가 처음부터 체크된 상태로 시작해요.

oninput 이벤트

슬라이더를 움직일 때마다 실시간으로 함수가 실행돼요.

.checked

체크박스가 체크되어 있으면 true, 아니면 false.

this.value

현재 이벤트가 발생한 요소의 값. 슬라이더의 현재 위치값.

🔒

여기까지는 미리보기입니다

비밀번호 도구 완성
무료 가입하면 이어서 볼 수 있고, 강의를 완료할 때마다 XP와 레벨이 쌓입니다.

Google로 3초 만에 시작 →🧵 Threads로 시작 무료 공개 강의 둘러보기 (Lv.1~3)