From 0ce37de7d4a4c12de4769dfc2b62385edf67e372 Mon Sep 17 00:00:00 2001 From: yujin1228 Date: Mon, 7 Aug 2023 23:33:07 +0900 Subject: [PATCH 1/2] =?UTF-8?q?[#11]=20=EB=A1=9C=EA=B7=B8=EC=9D=B8/=20?= =?UTF-8?q?=ED=9A=8C=EC=9B=90=EA=B0=80=EC=9E=85=20=EB=AA=A8=EB=8B=AC=20?= =?UTF-8?q?=EB=A0=88=EC=9D=B4=EC=95=84=EC=9B=83=20=EA=B5=AC=ED=98=84?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- css/login.css | 32 ++++++ css/modal.css | 226 ++++++++++++++++++++++++++++++++++++++++++ css/reset-common.css | 95 ++++++++++++++++++ img/check.svg | 3 + img/checked.svg | 3 + img/close.svg | 4 + img/facebook-logo.svg | 3 + img/google-logo.svg | 6 ++ img/kakao-logo.svg | 3 + img/naver-logo.svg | 3 + img/weniv-logo.svg | 7 ++ login.html | 77 ++++++++++++++ login.js | 71 +++++++++++++ 13 files changed, 533 insertions(+) create mode 100644 css/login.css create mode 100644 css/modal.css create mode 100644 css/reset-common.css create mode 100644 img/check.svg create mode 100644 img/checked.svg create mode 100644 img/close.svg create mode 100644 img/facebook-logo.svg create mode 100644 img/google-logo.svg create mode 100644 img/kakao-logo.svg create mode 100644 img/naver-logo.svg create mode 100644 img/weniv-logo.svg create mode 100644 login.html create mode 100644 login.js diff --git a/css/login.css b/css/login.css new file mode 100644 index 0000000..61d70d0 --- /dev/null +++ b/css/login.css @@ -0,0 +1,32 @@ +.login { + width: 500px; + height: fit-content; + background-color: white; + border-radius: 5px; + border: 1px solid #c4c4c4; + text-align: center; + padding: 30px; +} + +.login * { + margin: 0; +} + +.login p { + margin: 28px 0; + font-size: 1rem; +} + +.login .loginBtn { + height: 60px; + font-size: 22px;/*1.375rem*/ + font-weight: 700; + margin-top: 4px; +} + +.login h2 { + font-size: 16px; + color: var(--black); + font-weight: 400; + margin: 28px 0 30px 0; +} diff --git a/css/modal.css b/css/modal.css new file mode 100644 index 0000000..7182224 --- /dev/null +++ b/css/modal.css @@ -0,0 +1,226 @@ +.modal { + /* position: fixed; */ + background-color: rgba(0, 0, 0, 0.3); + height: 100vh; + width: 100%; + display: none; +} + +.modal a { + color: var(--gray); +} + +.modal-content { + /* position: fixed; */ + width: 32.5rem; + height: fit-content; + background-color: var(--white); + border-radius: 10px; + border: 1px solid var(--light-gray); +} + +.header { + width: 100%; + height: 58px; + border-bottom: 1px solid var(--light-gray); +} + +.title { + font-size: 1rem; + font-weight: medium; + line-height: 3.625rem; + text-align: center; +} + +.closeBtn { + position: absolute; + background: url(../img/close.svg) no-repeat; + background-size: contain; + width: 1rem; + height: 1rem; + top: 0; + right: 0; + margin: 20px; + +} + +.modal-content section { + padding: 24px; + display: flex; + flex-direction: column; + align-items: start; +} + +.login-section p { + font-weight: medium; + font-size: 1.25rem; + padding-top: 2px; + padding-bottom: 24px; +} + +.login-section .login-form{ + width: 100%; +} + +.login-section .login-form * { + width: 100%; +} + +.login-section input { + font-size: 1rem; + padding: 0 1em; +} + +.login-section input[type="password"] { + margin-top: 10px; +} + +.login-section input::placeholder { + color: var(--gray); +} + +.login-section input:focus::placeholder{ + color: transparent; +} + +.login-form >input:focus{ + border: 2px solid var(--touch-blue); +} + +.login-form .message { + color: red; + font-size: 14px; + padding: 0; + margin-top: 6px; +} + + +/*로그인유지 체크박스 커스텀*/ +.check-keep label { + color: var(--gray); + font-weight: medium; + display: flex; + align-items: center; + gap: 8px; + cursor: pointer; + margin-top: 1rem; + width: fit-content; +} + +.check-keep label::before{ + content: ""; + display: block; + width: 1.375rem; + height: 1.375rem; + border: 1px solid var(--gray); + border-radius: 50%; + background: url(../img/check.svg) no-repeat 50% 50%; +} + +.check-keep input:checked+label::before { + background: url(../img/checked.svg) no-repeat 50% 50%; + background-color: var(--blue); + border-color: var(--blue); +} + +.login-section .loginBtn{ + margin: 20px 0; + font-size: 18px; + height: 50px; +} + +.box { + border: 1px solid var(--light-gray); + border-radius: 5px; + width: 100%; + height: 50px; +} + +.join-find { + width: 100%; + display: flex; + justify-content: center; + color: var(--gray); + font-size: 14px; +} + +.join-find li+li{ + position: relative; + padding-left: 25px; +} + +li:nth-child(2)::before{ + content: ''; + position: absolute; + top: 1px; + left: 12px; + width: 1px; + height: 14px; + background-color: var(--gray); +} + + +.or { + padding: 14px 24px 5px 24px; + position: relative; + height: fit-content; +} + +.or hr { + background:var(--light-gray); + height:1px; + border:0; +} + +.or span{ + position: absolute; + left: 50%; + transform: translate(-50%,-50%); + background-color: var(--white); + padding: 0 13px; + color: var(--gray); + font-size: 0.8rem; + +} + +/*social-login--------------------*/ +.login-social { + display: flex; + /* flex-direction: column; */ + gap: 10px; +} + +.socialBtn { + display: flex; +} + +.socialBtn img { + margin-left: 12px; +} + +.socialBtn span { + margin: 0 auto; + line-height: 50px; +} + +.google { + border-color: var(--gray); +} + +.facebook { + border-color: var(--sky); +} + +.naver { + border-color: var(--green); +} + +.kakao { + border-color: var(--yellow); +} + +/*modal open-close*/ +.modal.active { + display: block; +} + diff --git a/css/reset-common.css b/css/reset-common.css new file mode 100644 index 0000000..734cbdf --- /dev/null +++ b/css/reset-common.css @@ -0,0 +1,95 @@ +/* font-import ----------------------------------*/ +@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-css ------------------------------------*/ +.a11y-hidden { + overflow: hidden; + position: absolute; + clip: rect(0 0 0 0); /* IE 6,7 */ + clip: rect(0,0,0,0); + width: 1px; + height: 1px; + margin: -1px; + border: 0; + padding: 0; +} + +ul, +ol { + list-style: none; +} + +button { + border: none; + background-color: transparent; +} + +a { + color: inherit; + text-decoration: none; + outline: none; +} + +a:hover, a:active { + text-decoration: none; +} + +input, +input:focus, +textarea, +textarea:focus { + outline: none; + box-shadow: none; +} +/* common-css-----------------------------------*/ +:root { + --bg-gray: #F2F2F2; + --light-gray: #C4C4C4; + --gray: #767676; + --black: #000000; + --white: #ffffff; + --green: #00BF18; + --sky: #2D9CDB; + --blue: #2F80ED; + --touch-blue: #1c6cd4; + --yellow: #F2C94C; +} + + +body { + height: 100vh; + background-color: var(--bg-gray); +} + +* { + box-sizing: border-box; + margin: 0; + padding: 0; + font-family: 'SpoqaHanSansNeo-Regular'; +} + +.center { + position: fixed; + inset: 0; + margin: auto; +} + +.loginBtn { + width: 100%; + color: var(--white); + border-radius: 5px; + background-color: var(--blue); +} + +.loginBtn:hover { + background-color: var(--touch-blue); +} + +button:hover { + cursor: pointer; +} \ No newline at end of file diff --git a/img/check.svg b/img/check.svg new file mode 100644 index 0000000..2a63bc8 --- /dev/null +++ b/img/check.svg @@ -0,0 +1,3 @@ + + + diff --git a/img/checked.svg b/img/checked.svg new file mode 100644 index 0000000..f7688cb --- /dev/null +++ b/img/checked.svg @@ -0,0 +1,3 @@ + + + diff --git a/img/close.svg b/img/close.svg new file mode 100644 index 0000000..6564003 --- /dev/null +++ b/img/close.svg @@ -0,0 +1,4 @@ + + + + diff --git a/img/facebook-logo.svg b/img/facebook-logo.svg new file mode 100644 index 0000000..9ba9fbf --- /dev/null +++ b/img/facebook-logo.svg @@ -0,0 +1,3 @@ + + + diff --git a/img/google-logo.svg b/img/google-logo.svg new file mode 100644 index 0000000..801e609 --- /dev/null +++ b/img/google-logo.svg @@ -0,0 +1,6 @@ + + + + + + diff --git a/img/kakao-logo.svg b/img/kakao-logo.svg new file mode 100644 index 0000000..138a72d --- /dev/null +++ b/img/kakao-logo.svg @@ -0,0 +1,3 @@ + + + diff --git a/img/naver-logo.svg b/img/naver-logo.svg new file mode 100644 index 0000000..964c406 --- /dev/null +++ b/img/naver-logo.svg @@ -0,0 +1,3 @@ + + + diff --git a/img/weniv-logo.svg b/img/weniv-logo.svg new file mode 100644 index 0000000..c37b6df --- /dev/null +++ b/img/weniv-logo.svg @@ -0,0 +1,7 @@ + + + + + + + diff --git a/login.html b/login.html new file mode 100644 index 0000000..28b9568 --- /dev/null +++ b/login.html @@ -0,0 +1,77 @@ + + + + + + + login + + + + + + +
+ weniv-logo +

weniv

+

위니브를 더 즐겁고 편리하게 이용하세요.

+ +
+ + + + + + \ No newline at end of file diff --git a/login.js b/login.js new file mode 100644 index 0000000..66f4819 --- /dev/null +++ b/login.js @@ -0,0 +1,71 @@ +const modal = document.getElementById('modal'); +const openBtn = document.querySelector('.openBtn'); +const closeBtn = document.querySelector('.closeBtn'); +const loginForm = document.getElementById('login-form'); + +const loginBtn = document.getElementById('loginBtn'); +const idInput = document.querySelector('.text-id'); +const pwInput = document.querySelector('.text-pw'); + +const message = document.createElement("p"); +message.classList.add("message"); + + +/* input 하단에 경고메시지추가 & input border 빨간색 */ +function inputCheck(input) { + input.after(message); + input.focus(); + let focusInput = document.querySelector('.login-form >input:focus'); + focusInput.style.borderColor = "red"; +} + +/* 경고메시지&border-color 초기화 */ +function inputReset(input) { + input.removeAttribute("style"); + let message = document.querySelector('.message'); + let parent = message.parentElement; + parent.removeChild(message); +} + + +/* open-modal */ +openBtn.addEventListener("click", function(e) { + e.preventDefault(); + modal.classList.add('active'); + + /* login check */ + loginBtn.addEventListener("click", function (event) { + event.preventDefault(); + if(idInput.value === "" && pwInput.value === ""){ + inputCheck(idInput); + message.innerHTML = "아이디를 입력해 주세요."; + }else if(idInput.value === ""){ + inputCheck(idInput); + message.innerHTML = "아이디를 입력해 주세요."; + }else if(pwInput.value === ""){ + inputCheck(pwInput); + message.innerHTML = "비밀번호를 입력해 주세요."; + }else { + inputCheck(pwInput); + message.innerHTML = "아이디 혹은 비밀번호가 일치하지 않습니다."; + } + + //idInput에 값이 입력되었을때 + idInput.addEventListener("change", function(e) { + inputReset(idInput); + }) + + //pwInput에 값이 입력되었을때 + pwInput.addEventListener("change", function(e) { + inputReset(pwInput); + }) + }) +}) + +/* close-modal */ +closeBtn.addEventListener("click", function(e) { + loginForm.reset(); + modal.classList.remove('active'); + inputReset(idInput); + inputReset(pwInput); +}) \ No newline at end of file From caf848ed051b949e7c15fe170d3c2ab2bc12bbee Mon Sep 17 00:00:00 2001 From: yujin1228 Date: Tue, 8 Aug 2023 00:12:57 +0900 Subject: [PATCH 2/2] =?UTF-8?q?[#11]=20=ED=8F=B0=ED=8A=B8=EC=9E=84?= =?UTF-8?q?=ED=8F=AC=ED=8A=B8=20=EB=B0=8F=20=EA=B5=B5=EA=B8=B0=20=EC=88=98?= =?UTF-8?q?=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- css/modal.css | 12 ++++++++---- css/reset-common.css | 14 +++++--------- 2 files changed, 13 insertions(+), 13 deletions(-) diff --git a/css/modal.css b/css/modal.css index 7182224..88be092 100644 --- a/css/modal.css +++ b/css/modal.css @@ -27,7 +27,7 @@ .title { font-size: 1rem; - font-weight: medium; + font-weight: 500; line-height: 3.625rem; text-align: center; } @@ -52,7 +52,7 @@ } .login-section p { - font-weight: medium; + font-weight: 500; font-size: 1.25rem; padding-top: 2px; padding-bottom: 24px; @@ -90,21 +90,23 @@ .login-form .message { color: red; font-size: 14px; + font-weight: 400; padding: 0; margin-top: 6px; + margin-left: 4px; } /*로그인유지 체크박스 커스텀*/ -.check-keep label { +.check-keep label[for="keep"] { color: var(--gray); - font-weight: medium; display: flex; align-items: center; gap: 8px; cursor: pointer; margin-top: 1rem; width: fit-content; + font-weight: 500; } .check-keep label::before{ @@ -115,6 +117,7 @@ border: 1px solid var(--gray); border-radius: 50%; background: url(../img/check.svg) no-repeat 50% 50%; + margin-left: 4px; } .check-keep input:checked+label::before { @@ -126,6 +129,7 @@ .login-section .loginBtn{ margin: 20px 0; font-size: 18px; + font-weight: 700; height: 50px; } diff --git a/css/reset-common.css b/css/reset-common.css index 734cbdf..0acf500 100644 --- a/css/reset-common.css +++ b/css/reset-common.css @@ -1,10 +1,5 @@ /* font-import ----------------------------------*/ -@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; -} +@import url(//spoqa.github.io/spoqa-han-sans/css/SpoqaHanSansNeo.css); /* reset-css ------------------------------------*/ .a11y-hidden { @@ -43,8 +38,8 @@ input, input:focus, textarea, textarea:focus { - outline: none; - box-shadow: none; + outline: none; + box-shadow: none; } /* common-css-----------------------------------*/ :root { @@ -70,7 +65,8 @@ body { box-sizing: border-box; margin: 0; padding: 0; - font-family: 'SpoqaHanSansNeo-Regular'; + font-family: 'Spoqa Han Sans Neo', 'sans-serif'; + font-weight: 400; } .center {