네이버 로그인 비슷(?) UI 구현 > 그누보드5 스킨

그누보드5 스킨

좋은 댓글과 좋아요는 제작자에게 큰힘이 됩니다.

네이버 로그인 비슷(?) UI 구현 정보

회원가입 네이버 로그인 비슷(?) UI 구현

첨부파일

login.zip (3.9K) 15회 다운로드 2025-01-29 21:01:43 포인트 차감1
테스트한 버전5.6.9
호환 가능 버전5.5이상

본문

로그인 창 UI입니다.

직접 확인해 보시기 바랍니다.

PC버전입니다. 모바일버전은 PC버전 참조하여 응용해 보세요.

 

적용방법:

1. 다운로드

2. 압축을 풀면 login.skin.php, login.css 2개의 파일이 있습니다.

/theme/테마명/skin/member/basic 안에 파일을 옮기면 됩니다.

 

3667889950_1738152027.5951.gif

추천
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>

9e8911032551633bf54b4fcbe46d3e94_1744182320_8964.jpg

전체 66 |RSS
그누보드5 스킨 내용 검색

회원로그인

(주)에스아이알소프트 / 대표:홍석명 / (06211) 서울특별시 강남구 역삼동 707-34 한신인터밸리24 서관 1402호 / E-Mail: admin@sir.kr
사업자등록번호: 217-81-36347 / 통신판매업신고번호:2014-서울강남-02098호 / 개인정보보호책임자:김민섭(minsup@sir.kr)
© SIRSOFT