구현 과제 - 로그인/회원가입 모달 - 시하

004.css

@@ -0,0 +1,303 @@
+@import url(//spoqa.github.io/spoqa-han-sans/css/SpoqaHanSansNeo.css);
+
+h1,
+h2,
+p,
+input,
+form {
+  margin: 0;
+  padding: 0;
+}
+
+a {
+  color: inherit;
+  text-decoration: none;
+}
+
+input {
+  background-color: none;
+  border: 0;
+}
+
+button {
+  border: 0;
+  background-color: unset;
+}
+
+body {
+  font-family: Spoqa Han Sans Neo;
+  background-color: #ddd;
+}
+
+button:hover {
+  cursor: pointer;
+}
+/* -------- */
+
+.txt-hide {
+  overflow: hidden;
+  width: 1px;
+  height: 1px;
+  clip-path: inset(50%);
+}
+
+.login {
+  width: 520px;
+  margin: auto;
+
+  border-radius: 10px;
+  border: 1px solid #c4c4c4;
+  background: #fff;
+}
+
+header {
+  padding: 18px;
+  border-bottom: 1px solid #c4c4c4;
+}
+
+header h1 {
+  text-align: center;
+  color: #000;
+  font-size: 16px;
+  font-style: normal;
+  font-weight: 500;
+  line-height: normal;
+}
+
+.close-btn {
+  display: block;
+  background: url(./img/close.svg) no-repeat 0 0/16px;
+  width: 16px;
+  height: 16px;
+
+  float: right;
+  position: relative;
+  top: -19px;
+  left: -5px;
+}
+
+.section-login h2 {
+  font-size: 20px;
+  font-style: normal;
+  font-weight: 500;
+  line-height: 24px;
+
+  margin: 26px 24px;
+}
+
+.login-input {
+  margin: 0 15px;
+  text-align: center;
+}
+
+.login-input input {
+  width: calc(100% - 20px);
+  height: 50px;
+
+  border-radius: 5px;
+  border: 1px solid #c4c4c4;
+  background: #fff;
+  padding: 0 15px;
+  padding-top: 3px;
+  margin: 5px 0;
+  box-sizing: border-box;
+}
+
+.login-input input::placeholder {
+  color: #767676;
+  font-size: 16px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: normal;
+}
+
+.login-input p {
+  text-align: justify;
+  margin-left: 13px;
+  color: #f4492e;
+  font-size: 14px;
+  display: none;
+}
+
+input:focus {
+  outline-color: #f4492e;
+  margin: 0;
+}
+
+input:focus + p {
+  display: block;
+}
+
+input:focus + .id {
+  padding: 6px 0 10px;
+}
+
+input:focus + .false {
+  padding: 10px 0 13px;
+}
+
+.lg-continue {
+  margin: 7px 0 0 20px;
+  position: relative;
+
+  color: #767676;
+}
+
+.check_svg {
+  position: relative;
+  top: 5px;
+  margin-right: 5px;
+}
+
+.txt-hide:checked + .lg-continue .circle {
+  fill: #2f80ed;
+  stroke: #2f80ed;
+}
+
+.txt-hide:checked + .lg-continue .path {
+  fill: transparent;
+  stroke: white;
+}
+
+.lg-continue:hover {
+  cursor: pointer;
+}
+
+.txt-hide:checked + .lg-continue::after {
+  opacity: 1;
+
+  position: absolute;
+  top: 0;
+  left: 0;
+}
+
+.login-btn {
+  width: 472px;
+  height: 50px;
+
+  border-radius: 5px;
+  background: #2f80ed;
+  margin: 20px 23px;
+
+  color: #fff;
+  font-size: 18px;
+  font-style: normal;
+  font-weight: 700;
+}
+
+.join {
+  margin: 0 20px;
+  display: flex;
+  justify-content: center;
+  gap: 12px;
+  align-items: center;
+}
+
+.join span {
+  color: #767676;
+}
+
+.join a {
+  color: #767676;
+  font-size: 14px;
+  font-weight: 400;
+}
+
+.join_find > a,
+.join_find > p {
+  color: #767676;
+  font-family: Spoqa Han Sans Neo;
+  font-size: 14px;
+  font-style: normal;
+  font-weight: 400;
+
+  padding: 20px 0 10px 0;
+  text-align: center;
+}
+
+.or::before,
+.or::after {
+  display: inline-block;
+  content: "";
+  background-color: #c4c4c4;
+  width: 210px;
+  height: 0.5px;
+
+  position: relative;
+  top: -4px;
+}
+
+.or::before {
+  left: -10px;
+}
+
+.or::after {
+  left: 10px;
+}
+
+.other-login {
+  margin-bottom: 20px;
+}
+
+.other-login {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 10px;
+
+  background: #fff;
+  color: #767676;
+}
+
+.other-login a {
+  width: 472px;
+  padding: 15px 0;
+  border-radius: 5px;
+  margin: 0 24px 0 24px;
+  position: relative;
+
+  text-align: center;
+}
+
+[class^="bg-icon"]::before {
+  position: absolute;
+  display: block;
+  content: "";
+  width: 28px;
+  height: 28px;
+  background-image: url(./img/css_sprites.png);
+  background-size: 96px 96px;
+  left: 10px;
+}
+
+.bg-icon_google::before {
+  background-position: -58px -12px;
+}
+
+.bg-icon_facebook::before {
+  background-position: -10px -12px;
+}
+
+.bg-icon_naver::before {
+  background-position: -58px -60px;
+}
+
+.bg-icon_kakao::before {
+  background-position: -10px -60px;
+}
+
+.bg-icon_google {
+  border: 1px solid #767676;
+}
+
+.bg-icon_facebook {
+  border: 1px solid #2d9cdb;
+}
+
+.bg-icon_naver {
+  border: 1px solid #00bf18;
+}
+
+.bg-icon_kakao {
+  border: 1px solid #f2c94c;
+}

004.html

@@ -0,0 +1,67 @@
+<!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">
+  <link rel="stylesheet" href="004.css">
+  <title></title>
+</head>
+
+<body>
+  <div class="login">
+    <header>
+      <h1>로그인 또는 회원가입</h1>
+      <button class="close-btn" type="button"></button>
+    </header>
+
+    <section class="section-login">
+      <h2>위니브에서 여러분의 궁금증을 해결하세요! :)</h2>
+
+      <div class="login-input">
+        <form>
+          <label for="user-id"></label>
+          <input id="user-id" type="text" placeholder="아이디">
+          <p class="id">아이디를 입력해 주세요.</p>
+          <label for="user-pw"></label>
+          <input id="user-pw" type="password" placeholder="비밀번호">
+          <p class="false">아이디 혹은 비밀번호가 일치하지 않습니다.</p>
+      </div>
+
+      <div>
+        <input class="txt-hide" id="check-btn" type="checkbox">
+        <label class="lg-continue" for="check-btn">
+          <svg class="check_svg" width="22" height="22" viewBox="0 0 22 22" fill="none"
+            xmlns="http://www.w3.org/2000/svg">
+            <circle class="circle" cx="11" cy="11" r="10.5" stroke="#767676" />
+            <path class="path" d="M15.5 8.5L10.5 14L7 10.5" stroke="#767676" stroke-linecap="round"
+              stroke-linejoin="round" />
+          </svg>
+          로그인 상태 유지
+        </label>
+      </div>
+
+      <button class="login-btn" type="submit">로그인</button>
+      </form>
+
+      <div class="join_find">
+        <div class="join">
+          <a href="#">회원가입</a>
+          <span>|</span>
+          <a href="#">아이디/비밀번호 찾기</a>
+        </div>
+        <p class="or">또는</p>
+      </div>
+
+      <div class="other-login">
+        <a class="bg-icon_google" href="#">구글 계정으로 로그인</a>
+        <a class="bg-icon_facebook" href="#">페이스북 계정으로 로그인</a>
+        <a class="bg-icon_naver" href="#">네이버 계정으로 로그인</a>
+        <a class="bg-icon_kakao" href="#">카카오톡 계정으로 로그인</a>
+      </div>
+    </section>
+  </div>
+</body>
+
+</html>