구현 과제 - 로그인/회원가입 모달 - 경민

11-login/css/login.css

@@ -0,0 +1,278 @@
+@font-face {
+  font-family: "SpoqaHanSansNeo-Regular";
+  src: url("https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2108@1.1/SpoqaHanSansNeo-Regular.woff")
+    format("woff");
+  font-weight: normal;
+  font-style: normal;
+}
+
+/* reset */
+
+* {
+  margin: 0;
+  padding: 0;
+}
+
+h1,
+h2 {
+  font-weight: normal;
+}
+
+label {
+  cursor: pointer;
+}
+
+a {
+  text-decoration: none;
+  color: inherit;
+  cursor: pointer;
+}
+
+button {
+  border: 0;
+  background: none;
+  color: inherit;
+}
+
+button:enabled {
+  cursor: pointer;
+}
+
+hr {
+  border: 0;
+}
+
+ul,
+li {
+  list-style: none;
+}
+
+svg {
+  cursor: pointer;
+}
+
+button {
+  border: 0;
+  background: none;
+  font: inherit;
+}
+
+/* CSS 시작 */
+body {
+  background-color: #eee;
+  font-family: "SpoqaHanSansNeo-Regular";
+}
+
+.wrapper {
+  margin: 50px auto;
+  width: 520px;
+  background-color: #fff;
+  border: 1px solid #c4c4c4;
+  border-radius: 10px;
+  position: relative;
+}
+
+/* 로그인 창 상단 */
+.login-top {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-bottom: 1px solid #c4c4c4;
+}
+
+.login-top h1 {
+  margin: 20px 0 18px;
+  font-size: 16px;
+}
+
+.login-top svg {
+  width: 16px;
+  height: 16px;
+  position: absolute;
+  right: 24px;
+}
+
+/* 로그인 창 form */
+.login-form {
+  padding: 0 24px;
+}
+
+.login-form h2 {
+  margin: 26px 0 24px;
+  font-size: 20px;
+  font-weight: 500;
+}
+
+[class^="user"] {
+  padding: 0 16px;
+  width: 472px;
+  height: 50px;
+  font-size: 16px;
+  border-radius: 5px;
+  box-sizing: border-box;
+}
+
+.user-id {
+  border: 2px solid #f4492e;
+}
+
+.user-pw {
+  border: 1px solid #c4c4c4;
+}
+
+.warning-id,
+.warning-pw {
+  color: #f4492e;
+  font-size: 14px;
+}
+
+.warning-id {
+  margin: 6px 0 10px 3px;
+}
+
+.warning-pw {
+  margin: 10px 0 13px 3px;
+}
+
+.a11y-hidden {
+  /* 말 숨김 처리 */
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  margin: -1px;
+  overflow: hidden;
+  clip-path: polygon(0 0, 0 0, 0 0);
+}
+
+/* 로그인 상태 유지 */
+.keep-wrap {
+  margin-bottom: 21px;
+}
+
+.txt-hide {
+  /* 기본 체크박스 숨김 처리 */
+  width: 1px;
+  height: 1px;
+  overflow: hidden;
+  clip-path: inset(50%);
+}
+
+.lable-hold {
+  position: relative;
+  color: #767676;
+  font-size: 16px;
+  font-weight: 500;
+}
+
+.lable-hold::before {
+  content: "";
+  display: inline-block;
+  width: 22px;
+  height: 22px;
+  background: url(../img/check-box.svg) no-repeat;
+  margin-right: 10px;
+  vertical-align: bottom;
+}
+
+.lable-hold::after {
+  content: "";
+  position: absolute;
+  top: -1px;
+  left: 20px;
+  width: 22px;
+  height: 22px;
+  background: url(../img/checked-box.svg) no-repeat;
+  opacity: 0;
+}
+
+.inphold:checked + .lable-hold::after {
+  left: 0;
+  opacity: 1;
+}
+
+/* 로그인 버튼 */
+.btn-login {
+  width: 100%;
+  height: 50px;
+  background-color: #2f80ed;
+  border-radius: 5px;
+  color: #fff;
+  font-size: 18px;
+  font-weight: 700;
+}
+
+/* 아이디/비밀번호 찾기 */
+.find-wrap {
+  margin: 20px 0 30px;
+  display: flex;
+  gap: 12px;
+  justify-content: center;
+  color: #767676;
+  font-size: 14px;
+}
+
+.or {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.or hr {
+  width: 210px;
+  height: 1px;
+  background-color: #c4c4c4;
+}
+
+.or span {
+  margin: 0 13px;
+  color: #767676;
+}
+
+/* 소셜 로그인 */
+.login-sns-group {
+  margin: 20px 0 25px;
+  display: flex;
+  gap: 10px;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  color: #767676;
+}
+
+.login-sns-group li {
+  width: 472px;
+  height: 50px;
+  border-radius: 5px;
+}
+
+.login-sns-group button {
+  height: 50px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin: 0 auto;
+}
+
+.icon-gl {
+  background: url(../img/google-logo.png) no-repeat;
+  background-position: 12px;
+  border: 1px solid #767676;
+}
+
+.icon-fb {
+  background: url(../img/facebook-logo.png) no-repeat;
+  background-position: 12px;
+  border: 1px solid #2d9cdb;
+}
+
+.icon-naver {
+  background: url(../img/naver-logo.png) no-repeat;
+  background-position: 11px 12px;
+  border: 1px solid #00bf18;
+}
+
+.icon-kakao {
+  background: url(../img/kakao-logo.png) no-repeat;
+  background-position: 11px 12px;
+  border: 1px solid #f2c94c;
+}

11-login/login.html

@@ -0,0 +1,77 @@
+<!DOCTYPE html>
+<html lang="ko">
+  <head>
+    <meta charset="UTF-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>login</title>
+    <link rel="stylesheet" href="./css/login.css" />
+  </head>
+
+  <body>
+    <div class="wrapper">
+      <!-- header -->
+      <header class="login-top">
+        <h1>로그인 또는 회원가입</h1>
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          width="18"
+          height="18"
+          viewBox="0 0 18 18"
+          fill="none"
+        >
+          <path d="M1.15918 16.9999L17 1.15915" stroke="#767676" />
+          <path d="M16.8408 16.8408L1.00003 1" stroke="#767676" />
+        </svg>
+      </header>
+      <!-- //header -->
+      <!-- main -->
+      <main class="login-form">
+        <h2>위니브에서 여러분의 궁금증을 해결하세요! :)</h2>
+        <form>
+          <label for="id" class="a11y-hidden">아이디</label>
+          <input type="text" id="id" class="user-id" placeholder="아이디" />
+          <p class="warning-id">아이디를 입력해 주세요.</p>
+          <label for="pw" class="a11y-hidden">비밀번호</label>
+          <input
+            type="password"
+            id="pw"
+            class="user-pw"
+            placeholder="비밀번호"
+          />
+          <p class="warning-pw">아이디 혹은 비밀번호가 일치하지 않습니다.</p>
+          <div class="keep-wrap">
+            <input type="checkbox" id="inpHold" class="inphold txt-hide" />
+            <label for="inpHold" class="lable-hold">로그인 상태 유지</label>
+          </div>
+          <button class="btn-login" type="submit">로그인</button>
+        </form>
+        <div class="find-wrap">
+          <a href="#" class="join">회원가입</a>
+          <span>|</span>
+          <a href="#" class="find-id-pw">아이디/비밀번호 찾기</a>
+        </div>
+      </main>
+      <!-- //main -->
+      <div class="or">
+        <hr />
+        <span>또는</span>
+        <hr />
+      </div>
+      <ul class="login-sns-group">
+        <li class="icon-gl">
+          <button type="button">구글 계정으로 로그인</button>
+        </li>
+        <li class="icon-fb">
+          <button type="button">페이스북 계정으로 로그인</button>
+        </li>
+        <li class="icon-naver">
+          <button type="button">네이버 계정으로 로그인</button>
+        </li>
+        <li class="icon-kakao">
+          <button type="button">카카오톡 계정으로 로그인</button>
+        </li>
+      </ul>
+    </div>
+  </body>
+</html>