로그인 폼

다시 찾아온 사람이 몇 초 안에 통과해야 하는 화면 — 막혔을 때 어디로 가야 하는지까지 같은 자리에 있어야 하는 조각.

실제 미리보기

출처

HTML CSS

<form class="dc-login" action="#" method="post" novalidate>
  <div class="dc-login__head">
    <h2 class="dc-login__title">로그인</h2>
    <p class="dc-login__sub">가입할 때 쓴 이메일과 비밀번호를 넣으세요.</p>
  </div>

  <div class="dc-login__field">
    <label class="dc-login__label" for="dc-login-id">이메일</label>
    <input class="dc-login__input" id="dc-login-id" name="email" type="email" inputmode="email" autocomplete="username" placeholder="[email protected]">
  </div>

  <div class="dc-login__field">
    <label class="dc-login__label" for="dc-login-pw">비밀번호</label>
    <input class="dc-login__input" id="dc-login-pw" name="password" type="password" autocomplete="current-password">
  </div>

  <div class="dc-login__row">
    <label class="dc-login__check">
      <input class="dc-login__checkbox" type="checkbox" name="remember" checked>
      <span>로그인 상태 유지</span>
    </label>
    <a class="dc-login__link" href="#">비밀번호를 잊었어요</a>
  </div>

  <button class="dc-login__submit" type="submit">로그인</button>

  <p class="dc-login__foot">아직 계정이 없으세요? <a class="dc-login__link" href="#">회원가입</a></p>
</form>

.dc-login { display:flex; flex-direction:column; gap:var(--dc-4); width:100%; max-width:400px; margin-inline:auto; padding:var(--dc-6); border:1px solid var(--dc-line); border-radius:var(--dc-r-lg); background:var(--dc-surface); box-shadow:var(--dc-sh-1); font-family:var(--dc-font); }
.dc-login__head { display:flex; flex-direction:column; gap:var(--dc-1); }
.dc-login__title { font-size:20px; font-weight:700; letter-spacing:-.01em; color:var(--dc-text); }
.dc-login__sub { font-size:13px; color:var(--dc-text-sub); }
.dc-login__alert { padding:var(--dc-3); border:1px solid var(--dc-danger); border-radius:var(--dc-r-sm); background:var(--dc-danger-soft); color:var(--dc-danger); font-size:13px; line-height:1.5; }
.dc-login__field { display:flex; flex-direction:column; gap:var(--dc-2); }
.dc-login__label { font-size:13px; font-weight:600; color:var(--dc-text); }
.dc-login__input { width:100%; min-height:44px; 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:15px; transition:border-color var(--dc-fast), box-shadow var(--dc-fast); }
.dc-login__input::placeholder { color:var(--dc-text-mute); }
.dc-login__input:focus { border-color:var(--dc-brand); box-shadow:0 0 0 3px var(--dc-brand-soft); }
.dc-login__input--bad { border-color:var(--dc-danger); }
.dc-login__error { font-size:12px; color:var(--dc-danger); }
.dc-login__row { display:flex; align-items:center; justify-content:space-between; gap:var(--dc-3); flex-wrap:wrap; }
.dc-login__check { display:inline-flex; align-items:center; gap:var(--dc-2); min-height:44px; font-size:13px; color:var(--dc-text-sub); cursor:pointer; }
.dc-login__checkbox { width:18px; height:18px; accent-color:var(--dc-brand); }
.dc-login__link { color:var(--dc-brand); font-size:13px; }
.dc-login__submit { min-height:48px; padding:0 var(--dc-4); border:1px solid transparent; border-radius:var(--dc-r-sm); background:var(--dc-brand); color:var(--dc-text-on); font-size:15px; font-weight:700; cursor:pointer; transition:background var(--dc-fast); }
.dc-login__submit:hover { background:var(--dc-brand-hi); }
.dc-login__foot { font-size:13px; color:var(--dc-text-sub); text-align:center; }
.dc-login__divider { display:flex; align-items:center; gap:var(--dc-3); font-size:12px; color:var(--dc-text-mute); }
.dc-login__divider::before, .dc-login__divider::after { content:""; flex:1; height:1px; background:var(--dc-line); }
.dc-login__social { display:flex; flex-direction:column; gap:var(--dc-2); }
.dc-login__social-btn { min-height:48px; border:1px solid var(--dc-line-field); border-radius:var(--dc-r-sm); background:var(--dc-surface); color:var(--dc-text); font-size:14px; font-weight:600; cursor:pointer; }
.dc-login__social-btn:hover { background:var(--dc-sunken); }

이렇게 씁니다

묻는 것은 두 개로 끝낸다 — 로그인 화면에 칸이 늘어날 이유는 거의 없다
autocomplete 에 username 과 current-password 를 적어 브라우저와 비밀번호 관리자가 채우게 한다
비밀번호 찾기와 회원가입을 같은 화면에 둔다 — 로그인에 실패한 사람이 갈 곳이 여기다

주의할 점

이메일과 비밀번호 중 무엇이 틀렸는지는 밝히지 않되, 오류 문장은 role=alert 로 읽히게 한다
입력칸 테두리는 --dc-line-field 로 둔다 — 옅은 --dc-line 은 3:1 을 넘지 못한다

다음에 볼 것