네이버 로그인 비슷(?) UI 구현 정보
회원가입 네이버 로그인 비슷(?) UI 구현
관련링크
첨부파일
본문
로그인 창 UI입니다.
직접 확인해 보시기 바랍니다.
PC버전입니다. 모바일버전은 PC버전 참조하여 응용해 보세요.
적용방법:
1. 다운로드
2. 압축을 풀면 login.skin.php, login.css 2개의 파일이 있습니다.
/theme/테마명/skin/member/basic 안에 파일을 옮기면 됩니다.
6
댓글 전체
감사합니다!!

^^ 멋진 설 보내세요.
멋지네요~ 공개해 주셔서 감사합니다.

^^

감사합니다.

^^

공개하신 스킨에 작은 팁을 하나 적용 해보았습니다. 기분나쁘게 해드렸다면 죄송합니다. 비밀번호 입력필드에 요즘 흔한 눈 알 아이콘을 하나 달아보았습니다. 비빌번호 정책이 나날히 빡세어져서 이제 안보고 치면 거의 틀리더라구요.. 필요하신분 복사해서 사용 하시 바랍니다.
<div class="input-floating mb-3" style="position: relative;">
<input type="password" name="mb_password" id="login_pw" required class="form_input" maxLength="30" placeholder="비밀번호">
<label for="login_pw">비밀번호</label>
<!-- 눈 아이콘 -->
<span id="togglePassword" style="position: absolute; top: 50%; right: 10px; transform: translateY(-50%); cursor: pointer;">
<i class="fa-solid fa-eye-slash"></i>
</span>
</div>
<script>
const passwordInput = document.getElementById('login_pw');
const togglePassword = document.getElementById('togglePassword');
togglePassword.addEventListener('click', function () {
const type = passwordInput.getAttribute('type') === 'password' ? 'text' : 'password';
passwordInput.setAttribute('type', type);
// 아이콘 변경 (Font Awesome)
this.innerHTML = type === 'password'
? '<i class="fa-solid fa-eye-slash"></i>'
: '<i class="fa-solid fa-eye"></i>';
});
</script>

개선이나 제안은 늘 환영입니다. ^^