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

css/style.css

@@ -0,0 +1,279 @@
+@font-face {
+  font-family: 'SpoqaHan';
+  src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2108@1.1/SpoqaHanSansNeo-Regular.woff') format('woff');
+  font-weight: normal;
+  font-style: normal;
+}
+
+/* CSS 초기화 */
+body,
+section,
+h1,
+h2,
+h3,
+p
+label,
+input,
+div,
+button,
+form {
+  margin: 0;
+  padding: 0;
+}
+img {
+  vertical-align: top;
+}
+a {
+  color: inherit;
+  text-decoration: none;
+}
+input,
+button {
+font: inherit;
+}
+button {
+border: 0;
+background: none;
+}
+button:enabled {
+cursor: pointer;
+}
+
+
+/* CSS 적용 */
+.a11y-hidden {
+  clip: rect(1px, 1px, 1px, 1px);
+  clip-path: inset(50%);
+  width: 1px;
+  height: 1px;
+  margin: -1px;
+  overflow: hidden;
+  padding: 0;
+  position: absolute;
+}
+
+body { 
+font-family: 'SpoqaHan'
+}
+
+.wrap {
+  width: 520px;
+  border-radius: 10px;
+  border: 1px solid #C4C4C4;
+  margin: 50px auto;
+}
+
+.title-wrap {
+  display: flex;
+  padding-top: 20px;
+  padding-left: 188px;
+}
+
+.title {
+  color: #000;
+  font-size: 16px;
+  font-weight: 700;
+}
+
+/* 닫기 버튼 */
+.back {
+  display: inline-block;
+  width: 16px;
+  height: 16px;
+  margin: 2px 24px auto auto;
+
+  cursor: pointer;
+}
+
+
+.line {
+  width: 520px;
+  height: 1px;
+  margin-top: 18px;
+}
+
+
+/* main */
+.main {
+  margin: 26px 24px;
+}
+
+h2 {
+  color: #000;
+  font-size: 20px;
+  font-weight: 500;
+  line-height: 24px;
+}
+
+/* 입력 폼 */
+.login-form {
+  display: flex; 
+  flex-direction: column;
+  gap: 10px;
+  margin-top: 24px;
+}
+
+.login-form input {
+  width: 472px;
+  height: 50px;
+  border-radius: 5px;
+  border: 1px solid #C4C4C4;
+}
+
+/* 경고 메세지 */
+.login-form span{
+  display: none;
+  color: #F4492E;
+  font-size: 14px;
+  font-weight: 400;
+  margin-left: 4px;
+}
+
+.login-form input:hover {
+  border: 2px solid #F4492E;
+}
+
+.login-form input:hover+span {
+  display: block;
+}
+
+.login-form input::placeholder {
+  color: #767676;
+  font-size: 16px;
+  font-weight: 400;
+  padding-left: 16px;
+}
+
+/* 로그인 유지 선택 버튼 */
+.keep-login {
+  margin-top: 17px;
+  margin-left: 4px;
+}
+
+.check-label {
+  display: inline-block;
+  align-items: center; 
+
+  cursor: pointer;
+}
+
+.keep-login span {
+  color: #767676;
+  font-size: 16px;
+  font-weight: 500;
+  margin-left: 30px;
+}
+
+input[type='checkbox'] + label {
+  cursor: pointer;
+  height: 22px;
+  background: url('../img/check-box.svg') no-repeat;
+}
+
+input[type='checkbox']:checked + label {
+  background-image: url('../img/check-box_blue.svg'); 
+  height: 22px;
+}
+
+/* 로그인 버튼 */
+.login-submit {
+  width: 472px;
+  height: 50px;
+  border-radius: 5px;
+  background-color: #2F80ED;
+  margin-top: 21px;
+
+  color: #FFF;
+  font-size: 18px;
+  font-weight: 700;
+  line-height: 22px; 
+}
+
+.find { 
+  display: flex;
+  justify-content: center;
+  margin-top: 20px;
+  gap: 12px;
+
+  color: #767676;
+  font-size: 14px;
+  font-weight: 400;
+}
+
+
+.or {
+  color:#767676;
+  font-size: 14px;
+  font-weight: 400;
+  text-align: center;
+  margin-top: 30px;
+  /* margin-bottom: 9px; */
+}
+
+.or::before {
+  display: inline-block;
+  content:'';
+  width: 210px;
+  height: 1px;
+  background-color: #C4C4C4;
+  vertical-align: middle;
+  margin-right: 13px;
+}
+
+.or::after {
+  display: inline-block;
+  content:'';
+  width: 210px;
+  height: 1px;
+  background-color: #C4C4C4;
+  vertical-align: middle;
+  margin-left: 13px;
+}
+
+/* 다른 방식으로 로그인 */
+.way-to-login {
+  margin-top: 18px;
+  margin-bottom: 25px;
+}
+
+.way-to-login button {
+  display: block;
+  width: 472px;
+  height: 50px;
+  border-radius: 5px;
+  margin: 10px 24px;
+
+  color: #767676;
+  font-size: 16px;
+  font-weight: 500;
+}
+
+.google {
+  background-image: url(../img/Google__G__Logo\ 1.png);
+  background-repeat: no-repeat;
+  background-position: 11px 12px;
+
+  border: 1px solid #767676;
+}
+.facebook {
+  background-image: url(../img/facebook.png);
+  background-repeat: no-repeat;
+  background-position: 11px 12px;
+
+  border: 1px solid #2D9CDB;
+}
+.naver {
+  background-image: url(../img/naver-logo.png);
+  background-repeat: no-repeat;
+  background-position: 11px 12px;
+
+  border: 1px solid #00BF18;
+}
+.kakao {
+  background-image: url(../img/message-circle.png);
+  background-repeat: no-repeat;
+  background-position: 11px 12px;
+
+  border: 1px solid #F2C94C;
+}
+

index.html

@@ -0,0 +1,69 @@
+<!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>로그인 또는 회원가입 | 위니브</title>
+    <link rel="stylesheet" href="./css/style.css">
+</head>
+
+<body>
+    <article class="wrap">
+        <header class="header">
+            <div class="title-wrap">
+                <h1 class="title">로그인 또는 회원가입</h1>
+                <!-- <div class="close"></div> -->
+                <svg class="back" 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>
+            </div>
+            <img class="line" src="./img/line1.png" alt="">
+        </header>
+
+        <main class="main">
+            <h2>위니브에서 여러분의 궁금증을 해결하세요! :)</h2>
+
+            <form>
+                <div class="login-form">
+                    <input type="text" placeholder="아이디">
+                    <span>아이디를 입력해 주세요.</span>
+
+                    <input type="text" placeholder="비밀번호">
+                    <span>아이디 혹은 비밀번호가 일치하지 않습니다.</span>
+                </div>
+
+                <div class="keep-login">
+                    <input type="checkbox" id="check" class="a11y-hidden">
+                    <label for="check" class="check-label">
+                        <span>로그인 상태 유지</span>
+                    </label>
+                </div>
+
+                <button class="login-submit" type="submit">로그인</button>
+            </form>
+
+            <div class="find">
+                <a class="join" href="#">회원가입</a>
+                <span class="bar">|</span>
+                <a href="#">아이디/비밀번호 찾기</a>
+            </div>
+
+        </main>
+
+        <p class="or">또는</p>
+
+
+        <div class="way-to-login">
+            <button class="google" type="button">구글 계정으로 로그인</button>
+            <button class="facebook" type="button">페이스북 계정으로 로그인</button>
+            <button class="naver" type="button">네이버 계정으로 로그인</button>
+            <button class="kakao" type="button">카카오톡 계정으로 로그인</button>
+        </div>
+    </article>
+</body>
+
+</html>