From 585a4090445a922711153762d90b6b80429edd0d Mon Sep 17 00:00:00 2001 From: kmryuuu <138556024+kmryuuu@users.noreply.github.com> Date: Wed, 2 Aug 2023 02:22:19 +0900 Subject: [PATCH 1/5] =?UTF-8?q?[#11]=20=EB=A1=9C=EA=B7=B8=EC=9D=B8=20?= =?UTF-8?q?=EB=AA=A8=EB=8B=AC=20=EB=B0=8F=20=EA=B8=B0=EB=8A=A5=20=EA=B5=AC?= =?UTF-8?q?=ED=98=84?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- 11-login/css/login.css | 254 +++++++++++++++++++++++++++++++++ 11-login/img/check-box.svg | 6 + 11-login/img/checked-box.svg | 6 + 11-login/img/close.svg | 4 + 11-login/img/facebook-logo.png | Bin 0 -> 408 bytes 11-login/img/google-logo.png | Bin 0 -> 768 bytes 11-login/img/kakao-logo.png | Bin 0 -> 530 bytes 11-login/img/naver-logo.png | Bin 0 -> 323 bytes 11-login/login.html | 70 +++++++++ 9 files changed, 340 insertions(+) create mode 100644 11-login/css/login.css create mode 100644 11-login/img/check-box.svg create mode 100644 11-login/img/checked-box.svg create mode 100644 11-login/img/close.svg create mode 100644 11-login/img/facebook-logo.png create mode 100644 11-login/img/google-logo.png create mode 100644 11-login/img/kakao-logo.png create mode 100644 11-login/img/naver-logo.png create mode 100644 11-login/login.html diff --git a/11-login/css/login.css b/11-login/css/login.css new file mode 100644 index 0000000..7927bc3 --- /dev/null +++ b/11-login/css/login.css @@ -0,0 +1,254 @@ +@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; +} + +button:enabled { + cursor: pointer; +} + +hr { + border: 0; +} + +ul, +li { + list-style: none; +} + +/* 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; +} + +.warning-pw { + margin: 10px 0 13px; +} + +/* 로그인 상태 유지 */ +.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: -3px; + 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: 472px; + 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; +} + +/* 소셜 로그인 */ +.login-sns-group { + margin: 20px 0 25px; + display: flex; + gap: 10px; + flex-direction: column; + align-items: center; + justify-content: center; +} + +.login-sns-group li { + width: 472px; + height: 50px; + border-radius: 5px; +} + +.login-sns-group a { + display: flex; + align-items: center; + justify-content: center; + margin: 15px 0; +} + +.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; +} diff --git a/11-login/img/check-box.svg b/11-login/img/check-box.svg new file mode 100644 index 0000000..79a8b3b --- /dev/null +++ b/11-login/img/check-box.svg @@ -0,0 +1,6 @@ + + + + + + diff --git a/11-login/img/checked-box.svg b/11-login/img/checked-box.svg new file mode 100644 index 0000000..f1d0906 --- /dev/null +++ b/11-login/img/checked-box.svg @@ -0,0 +1,6 @@ + + + + + + diff --git a/11-login/img/close.svg b/11-login/img/close.svg new file mode 100644 index 0000000..6564003 --- /dev/null +++ b/11-login/img/close.svg @@ -0,0 +1,4 @@ + + + + diff --git a/11-login/img/facebook-logo.png b/11-login/img/facebook-logo.png new file mode 100644 index 0000000000000000000000000000000000000000..2b271bd1ec33621542a7410c25c0a2f0f828b5ee GIT binary patch literal 408 zcmV;J0cZY+P)HK~#7F?UhYV z!!Qtq-`HW_BeaVw*r411Za|Mfgu16EfFpEGh1wgG8xU>~39)Gx_y}c3xH>zW& zRu^sG!f|HC`Qq`63>>=%4U~<(S};Fd4RO8c;rYjX+IOu@5DI&qX4>cpnA#Swd$ zWCAn+VO@aGFD@?YN7bSy;b2&?EIZ1N8q|luO(#2-R^knbfAsf^Avn{lOoo3)+<(@Z z=t!o`VnCFyZVrT4CB>U0&FPC|%@)~H@kW1-$}@cHT?e{Du#SkPAg7B!1X+MmSTt-~ z^j_ANjT+*@OjG=*R1@+w(fNKQUEOPAAQVFqV_u{s;)B<%(d}2)V@~E&X@LM{FMU|i z;6LHc7-dUqzyBEm-J8XJ#-82w2#x{qJLL}|fr2eIv<`fAFCdz{s_P~k0}?n8EDz*V zw}rnYVW~E`@7c~2&o0=I6>vsE2Nht+r4XAQd%;s}j+6)@&=Af?0Vf1Of{gM2YgZ@* zO>U4Xu-_&2MH=kCvHAUL@FuHh0Pm)&^KF6&$sxH?h>%%a#l}K*mFr_`(Z97#e)+}T z4VO4KXDeXeOb;a+I-~FDj>fl_<*|0l>TqZL$vQvtFmu}_&8q;#f8d*HL^}9gc5fn zY`YYAL+2k*njFX=(iLv1a!eM77og?mJ&<;974zatPtJ^25EsZ}Odf?M5%{G-U~9;5 zgs)eBeA=iX&Y?STMJmxg%cFBfDdLqDPN<3vz8E2lL4ELd!O7K;g&J#O yy{dcz!L!F8pDJDX0(V1Y_;5|GjxOj&)&2qf=J+S8y^$mU0000~!x>kANp2oS<+6Jb@em1G*I#h6ES%2;2aoBrZBL&nZd* zZE0Ft7AAbl>GXZ```!Q?$QVr0nWk20DTJvcnt)VV1>or9T<#p#`?EMPVhO*-Rz(=H zNeUWTTiOw6#6Y!9YR?X&5iTb;O-0n+De?zo&@P+}J3GHe{rvfUW$RhBAt{Kx)7s!J zk?>=D-2g@p@JA4_Tc{0Mv4q~9xlF$3WvoC7P{C!PJ{)bfv9OLVmv&m22XV0dZ7jSe zTtF7+ICFiKB8AI|Wo9wEHQbd}q>xa=I{tAX+8%sRC{zXZNN^7sUqF@+Eh2?daR)Ml z5jv5=vQEMTkeO8EjcDO7kB|jA#g(i5=p|i2kjY7vk_VDF3m+KXLQ3>?Xq7{1``W z$lZxy-8q?;Kn_c~qpu?a!^VE@KZ&eB{tZtT$B+ufw^PsaHW^49mA9?@l3`=Wb@zbi zi~|OZh0Nv->IEzkOU*5<8hn{H{$?WC)51;Jz?O|d(?y@*^qj$<{zAMo? z4xaE>xcbxPg=*qO?Mb|a=?M;h;|k8+XgG9=<>0dZ^_Nlu?FCZfm#5XV-M;hujqI!A zuFr&2ay)|zf3YyCuh3ThEXh)HdBW1I;yT~j6E~hr;C%R@^o{G*jsN;nJYUB&*|9Nd z-*}SD*QDw>x#P63&dh!7rZpFq26%Ji-*1YsJD2c}L(6vWhMsE;;#v+{nR Q1<;QSp00i_>zopr0Qq-(cK`qY literal 0 HcmV?d00001 diff --git a/11-login/login.html b/11-login/login.html new file mode 100644 index 0000000..012198c --- /dev/null +++ b/11-login/login.html @@ -0,0 +1,70 @@ + + + + + + + login + + + + +
+ + + + +
+

위니브에서 여러분의 궁금증을 해결하세요! :)

+
+ +

아이디를 입력해 주세요.

+ +

아이디 혹은 비밀번호가 일치하지 않습니다.

+
+ + +
+ +
+
+ 회원가입 + | + 아이디/비밀번호 찾기 +
+
+ +
+
+ 또는 +
+
+ +
+ + From 0862e26d5ed8a90c4fb8f98aaa18c28cff777832 Mon Sep 17 00:00:00 2001 From: kmryuuu <138556024+kmryuuu@users.noreply.github.com> Date: Fri, 4 Aug 2023 14:46:58 +0900 Subject: [PATCH 2/5] =?UTF-8?q?[#11]=20label,=20cursor,=20color=20?= =?UTF-8?q?=EC=B6=94=EA=B0=80=20=EB=B0=98=EC=98=81?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- 11-login/css/login.css | 22 +++++++++++++++++++--- 11-login/login.html | 11 +++++++++-- 2 files changed, 28 insertions(+), 5 deletions(-) diff --git a/11-login/css/login.css b/11-login/css/login.css index 7927bc3..cff29fc 100644 --- a/11-login/css/login.css +++ b/11-login/css/login.css @@ -46,6 +46,10 @@ li { list-style: none; } +svg { + cursor: pointer; +} + /* CSS 시작 */ body { background-color: #eee; @@ -116,11 +120,21 @@ body { } .warning-id { - margin: 6px 0 10px; + margin: 6px 0 10px 3px; } .warning-pw { - margin: 10px 0 13px; + 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); } /* 로그인 상태 유지 */ @@ -171,7 +185,7 @@ body { /* 로그인 버튼 */ .btn-login { - width: 472px; + width: 100%; height: 50px; background-color: #2f80ed; border-radius: 5px; @@ -204,6 +218,7 @@ body { .or span { margin: 0 13px; + color: #767676; } /* 소셜 로그인 */ @@ -214,6 +229,7 @@ body { flex-direction: column; align-items: center; justify-content: center; + color: #767676; } .login-sns-group li { diff --git a/11-login/login.html b/11-login/login.html index 012198c..f816086 100644 --- a/11-login/login.html +++ b/11-login/login.html @@ -29,9 +29,16 @@

로그인 또는 회원가입

위니브에서 여러분의 궁금증을 해결하세요! :)

- + +

아이디를 입력해 주세요.

- + +

아이디 혹은 비밀번호가 일치하지 않습니다.

From 17e994cc116afefe7bab3afb279bed8f90ffd41b Mon Sep 17 00:00:00 2001 From: kmryuuu <138556024+kmryuuu@users.noreply.github.com> Date: Mon, 7 Aug 2023 17:44:29 +0900 Subject: [PATCH 3/5] =?UTF-8?q?[#11]=20button=EC=9C=BC=EB=A1=9C=20?= =?UTF-8?q?=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- 11-login/css/login.css | 11 +++++++++-- 11-login/login.html | 8 ++++---- 2 files changed, 13 insertions(+), 6 deletions(-) diff --git a/11-login/css/login.css b/11-login/css/login.css index cff29fc..5c507f4 100644 --- a/11-login/css/login.css +++ b/11-login/css/login.css @@ -50,6 +50,12 @@ svg { cursor: pointer; } +button { + border: 0; + background: none; + font: inherit; +} + /* CSS 시작 */ body { background-color: #eee; @@ -238,11 +244,12 @@ body { border-radius: 5px; } -.login-sns-group a { +.login-sns-group button { + height: 50px; display: flex; align-items: center; justify-content: center; - margin: 15px 0; + margin: 0 auto; } .icon-gl { diff --git a/11-login/login.html b/11-login/login.html index f816086..0d230a2 100644 --- a/11-login/login.html +++ b/11-login/login.html @@ -60,16 +60,16 @@

위니브에서 여러분의 궁금증을 해결하세요! :)

From 202178f84e618490e92b43984be88ad7a448db5f Mon Sep 17 00:00:00 2001 From: kmryuuu <138556024+kmryuuu@users.noreply.github.com> Date: Mon, 7 Aug 2023 18:16:28 +0900 Subject: [PATCH 4/5] =?UTF-8?q?[#11]=20button=20color=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- 11-login/css/login.css | 1 + 1 file changed, 1 insertion(+) diff --git a/11-login/css/login.css b/11-login/css/login.css index 5c507f4..8c6a828 100644 --- a/11-login/css/login.css +++ b/11-login/css/login.css @@ -31,6 +31,7 @@ a { button { border: 0; background: none; + color: inherit; } button:enabled { From c5507866cdbdf67eb3ea619de4648cf57043c0a7 Mon Sep 17 00:00:00 2001 From: kmryuuu <138556024+kmryuuu@users.noreply.github.com> Date: Tue, 8 Aug 2023 13:53:32 +0900 Subject: [PATCH 5/5] =?UTF-8?q?=EB=A1=9C=EA=B7=B8=EC=9D=B8=20=EC=83=81?= =?UTF-8?q?=ED=83=9C=20=EC=9C=A0=EC=A7=80=20=EB=B2=84=ED=8A=BC=20=EC=9C=84?= =?UTF-8?q?=EC=B9=98=20=EC=A1=B0=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- 11-login/css/login.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/11-login/css/login.css b/11-login/css/login.css index 8c6a828..0bc596f 100644 --- a/11-login/css/login.css +++ b/11-login/css/login.css @@ -177,7 +177,7 @@ body { .lable-hold::after { content: ""; position: absolute; - top: -3px; + top: -1px; left: 20px; width: 22px; height: 22px;