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

login2/login2.css

@@ -0,0 +1,252 @@
+@import url(//spoqa.github.io/spoqa-han-sans/css/SpoqaHanSansNeo.css);
+
+* {
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+  font-family: "Spoqa Han Sans Neo", "sans-serif";
+}
+
+input::placeholder {
+  color: var(--767676, #767676);
+  font-size: 16px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: normal;
+}
+
+a {
+  text-decoration: none;
+  color: var(--767676, #767676);
+}
+
+button:enabled {
+  cursor: pointer;
+}
+
+body {
+  padding-top: 5%;
+}
+
+.wrap {
+  margin: 0 auto;
+  width: 520px;
+  border-radius: 10px;
+  border: 1px solid var(--c-4-c-4-c-4, #c4c4c4);
+  background: white;
+  display: flex;
+  flex-direction: column;
+}
+
+.header {
+  display: flex;
+  justify-content: center;
+  border-bottom: 1px solid #c4c4c4;
+  padding-top: 20px;
+  padding-bottom: 18px;
+}
+
+.main1 {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.main1::after {
+  content: "";
+  display: block;
+  width: 472px;
+  height: 1px;
+  border-bottom: 1px solid #c4c4c4;
+}
+
+.main1 h1 {
+  margin-top: 26px;
+  width: 472px;
+  color: #000;
+  font-size: 20px;
+  font-style: normal;
+  font-weight: 500;
+  line-height: 24px;
+  margin-bottom: 24px;
+}
+
+.main1 input {
+  display: block;
+  width: 472px;
+  height: 50px;
+  border-radius: 5px;
+  border: 1px solid var(--767676, #767676);
+  padding-left: 10px;
+  margin-bottom: 6px;
+}
+
+.warning {
+  padding-left: 4px;
+  width: 472px;
+  color: #f4492e;
+  font-size: 14px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: normal;
+}
+
+.main1 input:nth-of-type(1) {
+  border: 2px solid red;
+}
+
+.main1 input:nth-of-type(2) {
+  margin-top: 10px;
+}
+
+.check {
+  width: 472px;
+  display: flex;
+  justify-content: flex-start;
+  align-items: center;
+  margin-top: 17px;
+  margin-bottom: 21px;
+}
+
+#chk {
+  display: none;
+  width: 20px;
+  height: 20px;
+  margin: 0;
+}
+
+.main1 label {
+  display: flex;
+  color: var(--767676, #767676);
+  font-size: 16px;
+  font-style: normal;
+  font-weight: 500;
+  line-height: normal;
+}
+
+.main1 label div {
+  position: relative;
+  width: 22px;
+  height: 22px;
+  background: url(./img/check-box2.png) no-repeat;
+  margin-right: 5px;
+}
+
+#chk:checked + label .box::after {
+  display: block;
+  content: "";
+  width: 22px;
+  height: 22px;
+  background: url(./img/check-box.png) no-repeat;
+  margin-right: 5px;
+}
+
+.main1 button {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 472px;
+  height: 50px;
+  border: none;
+  border-radius: 5px;
+  background: #2f80ed;
+  color: #fff;
+  font-size: 18px;
+  font-style: normal;
+  font-weight: 700;
+  letter-spacing: 5px;
+  margin-bottom: 20px;
+  font-family: "Spoqa Han Sans Neo", "sans-serif";
+}
+
+.membership {
+  position: relative;
+  width: 472px;
+  display: flex;
+  justify-content: space-between;
+  padding: 0 136px;
+  margin-bottom: 38px;
+}
+
+.membership::before {
+  font-size: 14px;
+  color: var(--767676, #767676);
+  position: absolute;
+  content: "|";
+  left: 197px;
+}
+
+.membership a {
+  display: block;
+  color: var(--767676, #767676);
+  font-size: 14px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: normal;
+}
+
+.main2 {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 10px;
+}
+
+.main2::before {
+  position: absolute;
+  display: block;
+  width: 50px;
+  height: 20px;
+  background-color: white;
+  content: "또는";
+  color: var(--767676, #767676);
+  font-size: 14px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: normal;
+  top: -11px;
+  left: 231px;
+  display: flex;
+  justify-content: center;
+}
+
+.main2 a {
+  position: relative;
+  display: block;
+  width: 472px;
+  height: 50px;
+  border-radius: 5px;
+  border: 1px solid var(--767676, #767676);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.main2 a:nth-of-type(1) {
+  margin-top: 29px;
+}
+
+.main2 a:nth-of-type(2) {
+  border: 1px solid #2d9cdb;
+}
+
+.main2 a:nth-of-type(3) {
+  border: 1px solid #00bf18;
+}
+.main2 a:nth-of-type(4) {
+  border: 1px solid #f2c94c;
+  margin-bottom: 25px;
+}
+.main2 a p {
+  color: var(--767676, #767676);
+  font-size: 16px;
+  font-weight: 500;
+}
+.main2 a img {
+  position: absolute;
+  width: 28px;
+  height: 28px;
+  top: 11px;
+  left: 12px;
+}

login2/login2.html

@@ -0,0 +1,49 @@
+<!DOCTYPE html>
+<html lang="ko-KR">
+  <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="./login2.css" />
+    <title>로그인 페이지2</title>
+  </head>
+  <body>
+    <div class="wrap">
+      <div class="header"><p>로그인 또는 회원가입</p></div>
+      <div class="main1">
+        <h1>위니브에서 여러분의 궁금증을 해결하세요! :)</h1>
+        <input type="text" placeholder="아이디"></input>
+        <p class="warning">아이디를 입력해 주세요</p>
+        <input type="password" placeholder="비밀번호"></input>
+        <p class="warning two">아이디 혹은 비밀번호가 일치하지 않습니다.</p>
+        <div class="check">
+            <input type="checkbox" id="chk">
+            <label for="chk"><div class="box"></div>로그인 상태 유지</label>
+        </div>
+        <button>로그인</button>
+        <div class="membership">
+            <a href="">회원가입</a>
+            <a href="">아이디/비밀번호 찾기</a>
+        </div>
+      </div>
+      <div class="main2">
+        <a href="https://www.google.co.kr/?hl=ko"
+          ><img src="./img/google.png" alt="구글" />
+          <p>구글 계정으로 로그인</p></a
+        >
+        <a href="https://www.google.co.kr/?hl=ko"
+          ><img src="./img/facebook.png" alt="구글" />
+          <p>페이스북 계정으로 로그인</p></a
+        >
+        <a href="https://www.google.co.kr/?hl=ko"
+          ><img src="./img/naver-logo.png" alt="구글" />
+          <p>네이버 계정으로 로그인</p></a
+        >
+        <a href="https://www.google.co.kr/?hl=ko"
+          ><img src="./img/vector.png" alt="구글" />
+          <p>카카오톡 계정으로 로그인</p></a
+        >
+      </div>
+    </div>
+  </body>
+</html>