로그인 비밀번호 확인하는 방법에 대해서 알아보겠습니다. 로그인 또는 입력 폼(input)의 비밀번호(password)의 경우 별표 처리가 되어있어 있습니다. toggle 버튼으로 비밀번호를 바로 확인하면서 입력하는 방법의 코드를 보고 설명해 드릴게요.
로그인 비밀번호 확인 코드
CSS 코드
.password-box {
position: relative;
width: 250px;
}
.password-box input[type="password"],
.password-box input[type="text"] {
width: 100%;
padding-right: 40px;
}
.toggle-password {
position: absolute;
top: 50%;
right: 10px;
transform: translateY(-50%);
cursor: pointer;
font-size: 18px;
color: #888;
}HTML 코드
<div class="password-box">
<input type="password" id="password" placeholder="비밀번호 입력">
<span class="toggle-password" onclick="togglePassword()">👁️</span>
</div>JavaScript 코드
function togglePassword() {
const pwInput = document.getElementById("password");
const toggleIcon = document.querySelector(".toggle-password");
if (pwInput.type === "password") {
pwInput.type = "text";
toggleIcon.textContent = "🙈"; // 눈 가리는 이모지
} else {
pwInput.type = "password";
toggleIcon.textContent = "👁️"; // 눈 이모지
}
}예제 코드 실행 및 설명
👁️
- 위 실행 예제를 보면 기본적으로 별표로 표기가 되지만, 눈 모양 클릭 시 별표가 정상적으로 표기 됩니다.
- 이 예제의 핵심은 눈 모양의 UI적 배치 부분과 눈 모양 아이콘 클릭 시 효과를 주는 JavaScript 부분입니다.
- 기본적인 기능의 이해가 높아지면, 해당 기능을 변형해서 다른 방법으로 변경이 가능합니다.
- JavaScript togglePassword() 함수 부분을 자세히 확인해 보시면 됩니다.