Đến nội dung chính
EN KO VI NE KM ID
Thiết kế danh thiếp English Bộ sưu tập nhân vật 16 mẫu · PNG / SVG / PDF

Đăng nhập · Đăng ký

Dùng khi người đã có tài khoản phải vào được trong ba lần bấm, còn người mới thấy ngay phải đi đường nào.

Màn hình mẫu

Xem trước trực tiếp

Nguồn

<script>document.body.className="dc-bleed"</script>
<div class="dc-au">
  <header class="dc-au__top">
    <p class="dc-au__brand"><span class="dc-au__mark" aria-hidden="true">단</span> 단비근로</p>
    <button class="dc-au__lang" type="button" aria-haspopup="listbox" aria-expanded="false">한국어 <span aria-hidden="true">▾</span></button>
  </header>

  <main class="dc-au__main">
    <h1 class="dc-au__title">다시 만나서 반가워요</h1>
    <p class="dc-au__lead">8월 급여명세서가 도착해 있어요. 로그인하면 바로 볼 수 있습니다.</p>

    <form class="dc-au__form" action="#" method="post">
      <div class="dc-au__field">
        <label class="dc-au__label" for="dc-au-phone">휴대폰 번호</label>
        <input class="dc-au__input" id="dc-au-phone" name="phone" type="tel" inputmode="numeric" autocomplete="username" value="010-4821-5530">
      </div>
      <div class="dc-au__field">
        <label class="dc-au__label" for="dc-au-pw">비밀번호</label>
        <span class="dc-au__wrap">
          <input class="dc-au__input dc-au__input--pw" id="dc-au-pw" name="password" type="password" autocomplete="current-password" value="bishal2026">
          <button class="dc-au__peek" type="button">표시<span class="dc-sr"> 비밀번호 보기</span></button>
        </span>
      </div>
      <label class="dc-au__keep"><input class="dc-au__check" type="checkbox" name="keep" checked> 로그인 상태 유지</label>
      <button class="dc-au__cta" type="submit">로그인</button>
    </form>

    <p class="dc-au__help"><a class="dc-au__link" href="#">비밀번호를 잊었어요</a></p>

    <p class="dc-au__or"><span class="dc-au__or-text">또는</span></p>

    <button class="dc-au__social" type="button"><span class="dc-au__social-ico" aria-hidden="true">K</span> 카카오로 계속하기</button>
    <button class="dc-au__social dc-au__social--naver" type="button"><span class="dc-au__social-ico dc-au__social-ico--naver" aria-hidden="true">N</span> 네이버로 계속하기</button>
  </main>

  <footer class="dc-au__foot">처음이세요? <a class="dc-au__link" href="#">가입하기</a></footer>
</div>
.dc-au { display:flex; flex-direction:column; min-height:100vh; background:var(--dc-bg); color:var(--dc-text); font-family:var(--dc-font); }
.dc-au__top { flex:0 0 auto; display:flex; align-items:center; gap:var(--dc-2); padding:calc(var(--dc-safe-top) + var(--dc-2)) var(--dc-2) var(--dc-2) var(--dc-4); border-bottom:1px solid var(--dc-line); background:var(--dc-surface); }
.dc-au__brand { display:flex; align-items:center; gap:var(--dc-2); margin-right:auto; font-size:15px; font-weight:800; letter-spacing:-.02em; color:var(--dc-text); }
.dc-au__mark { display:grid; place-items:center; width:26px; height:26px; border-radius:var(--dc-r-sm); background:var(--dc-brand); color:var(--dc-text-on); font-size:14px; font-weight:800; }
.dc-au__lang { display:inline-flex; align-items:center; gap:var(--dc-1); min-height:44px; padding:0 var(--dc-3); border:1px solid var(--dc-line); border-radius:var(--dc-r-full); background:var(--dc-surface); color:var(--dc-text-sub); font-size:13px; font-weight:700; }
.dc-au__lang:active { background:var(--dc-sunken); }
.dc-au__back { display:grid; place-items:center; width:44px; height:44px; border:0; border-radius:var(--dc-r-full); background:transparent; color:var(--dc-text); font-size:20px; line-height:1; }
.dc-au__back:active { background:var(--dc-sunken); }
.dc-au__step { margin-right:44px; flex:1 1 auto; text-align:center; font-size:13px; font-weight:700; color:var(--dc-text-sub); }
.dc-au__main { flex:1 1 auto; display:flex; flex-direction:column; gap:var(--dc-3); padding:var(--dc-6) var(--dc-5) var(--dc-5); }
.dc-au__title { font-size:24px; font-weight:800; letter-spacing:-.03em; color:var(--dc-text); }
.dc-au__lead { margin-bottom:var(--dc-2); font-size:14px; line-height:1.55; color:var(--dc-text-sub); }
.dc-au__form { display:flex; flex-direction:column; gap:var(--dc-4); }
.dc-au__field { display:flex; flex-direction:column; gap:var(--dc-2); }
.dc-au__label { font-size:13px; font-weight:700; color:var(--dc-text-sub); }
.dc-au__input { width:100%; min-height:50px; padding:0 var(--dc-3); border:1px solid var(--dc-line-field); border-radius:var(--dc-r-sm); background:var(--dc-surface); color:var(--dc-text); font-size:16px; }
.dc-au__input--pw { padding-right:68px; letter-spacing:.12em; }
.dc-au__wrap { position:relative; display:block; }
.dc-au__peek { position:absolute; top:3px; right:3px; display:inline-flex; align-items:center; justify-content:center; min-width:60px; height:44px; border:0; border-radius:var(--dc-r-sm); background:transparent; color:var(--dc-brand-text); font-size:13px; font-weight:700; }
.dc-au__peek:active { background:var(--dc-sunken); }
.dc-au__inline { display:flex; gap:var(--dc-2); }
.dc-au__mini { flex:0 0 auto; min-width:88px; min-height:50px; padding:0 var(--dc-3); border:1px solid var(--dc-brand); border-radius:var(--dc-r-sm); background:var(--dc-brand-soft); color:var(--dc-brand-text); font-family:inherit; font-size:14px; font-weight:700; }
.dc-au__mini:active { background:color-mix(in srgb, var(--dc-brand) 18%, var(--dc-surface)); }
.dc-au__hint { font-size:12px; color:var(--dc-text-mute); }
.dc-au__keep { display:flex; align-items:center; gap:var(--dc-2); min-height:44px; font-size:14px; color:var(--dc-text-sub); }
.dc-au__check { width:22px; height:22px; flex:0 0 auto; accent-color:var(--dc-brand); }
.dc-au__terms { display:flex; flex-direction:column; gap:var(--dc-1); padding:var(--dc-2) var(--dc-3); border:1px solid var(--dc-line); border-radius:var(--dc-r-md); background:var(--dc-sunken); }
.dc-au__must { padding:1px var(--dc-2); border-radius:var(--dc-r-full); background:var(--dc-brand-soft); color:var(--dc-brand-text); font-size:11px; font-weight:800; }
.dc-au__opt { padding:1px var(--dc-2); border-radius:var(--dc-r-full); background:var(--dc-surface); border:1px solid var(--dc-line); color:var(--dc-text-mute); font-size:11px; font-weight:800; }
.dc-au__cta { width:100%; min-height:52px; border:0; border-radius:var(--dc-r-sm); background:var(--dc-brand); color:var(--dc-text-on); font-family:inherit; font-size:16px; font-weight:800; }
.dc-au__cta:active { background:var(--dc-brand-hi); }
.dc-au__help { text-align:center; }
.dc-au__link { display:inline-block; padding:var(--dc-1) var(--dc-1); color:var(--dc-brand-text); font-size:14px; font-weight:700; }
.dc-au__or { display:flex; align-items:center; gap:var(--dc-3); margin:var(--dc-2) 0; color:var(--dc-text-mute); }
.dc-au__or::before, .dc-au__or::after { content:""; flex:1 1 0; height:1px; background:var(--dc-line); }
.dc-au__or-text { font-size:12px; font-weight:700; }
.dc-au__social { display:flex; align-items:center; justify-content:center; gap:var(--dc-2); width:100%; min-height:50px; border:1px solid var(--dc-line-field); border-radius:var(--dc-r-sm); background:var(--dc-surface); color:var(--dc-text); font-family:inherit; font-size:15px; font-weight:700; }
.dc-au__social:active { background:var(--dc-sunken); }
.dc-au__social--naver { margin-top:var(--dc-2); }
.dc-au__social-ico { display:grid; place-items:center; width:24px; height:24px; border-radius:var(--dc-r-xs); background:var(--dc-warn-soft); color:var(--dc-warn); font-size:13px; font-weight:800; }
.dc-au__social-ico--naver { background:var(--dc-ok-soft); color:var(--dc-ok); }
.dc-au__foot { flex:0 0 auto; padding:var(--dc-4) var(--dc-5) calc(var(--dc-safe-bottom) + var(--dc-4)); border-top:1px solid var(--dc-line); background:var(--dc-surface); text-align:center; font-size:14px; color:var(--dc-text-sub); }

Cách dùng

  • Đặt cách đăng nhập mà người cũ dùng nhiều nhất lên trên; nút mạng xã hội nằm dưới
  • Khi đăng ký chỉ hỏi những ô thật cần; phần còn lại hỏi sau khi vào app
  • Ô mã xác thực phải có thời gian còn lại và nút gửi lại
  • Nếu dịch vụ có nhiều ngôn ngữ, cho đổi ngôn ngữ trước khi đăng nhập

Điểm cần lưu ý

  • Khai báo autocomplete là username, current-password, new-password để trình quản lý mật khẩu điền được
  • Không tiết lộ sai số điện thoại hay sai mật khẩu trong thông báo lỗi
  • Nút hiện mật khẩu vẫn phải đủ 44×44 và có tên đọc bằng dc-sr; placeholder không phải nhãn

Tiếp theo