From ab0d6791019c66caaf9b6acfdd8a2e6ade2aa6b2 Mon Sep 17 00:00:00 2001 From: sorikikikim Date: Thu, 3 Aug 2023 16:10:54 +0900 Subject: [PATCH 1/2] =?UTF-8?q?[#11]=20=EB=A1=9C=EA=B7=B8=EC=9D=B8/?= =?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?=EA=B5=AC=ED=98=84?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- css/login.css | 272 +++++++++++++++++++++++++++++++++++ css/reset.css | 48 +++++++ images/.DS_Store | Bin 0 -> 6148 bytes images/Google__G__Logo 1.png | Bin 0 -> 1470 bytes images/checkbox.svg | 19 +++ images/checkedbox.svg | 17 +++ images/close.svg | 4 + images/facebook.png | Bin 0 -> 521 bytes images/message-circle.png | Bin 0 -> 869 bytes images/naver-logo.png | Bin 0 -> 555 bytes login.html | 120 ++++++++++++++++ 11 files changed, 480 insertions(+) create mode 100644 css/login.css create mode 100644 css/reset.css create mode 100644 images/.DS_Store create mode 100644 images/Google__G__Logo 1.png create mode 100644 images/checkbox.svg create mode 100644 images/checkedbox.svg create mode 100644 images/close.svg create mode 100644 images/facebook.png create mode 100644 images/message-circle.png create mode 100644 images/naver-logo.png create mode 100644 login.html diff --git a/css/login.css b/css/login.css new file mode 100644 index 0000000..7d3ac43 --- /dev/null +++ b/css/login.css @@ -0,0 +1,272 @@ +@import url(//spoqa.github.io/spoqa-han-sans/css/SpoqaHanSansNeo.css); + +/* **************** 초기설정 **************** */ +body, +h1, +h2, +div, +p, +button, +input, +label, +span, +a { + font-family: 'Spoqa Han Sans Neo', 'sans-serif'; + margin: 0; + padding: 0; + box-sizing: border-box; +} + +body { + background-color: #F2F2F2; + position:absolute; + top:50%; + left:50%; + transform:translate(-50%,-50%); +} + +a { + text-decoration: none; + color: inherit; +} + +button:enabled { + cursor: pointer; +} + +img { + vertical-align: top; +} + +.a11y-hidden { + clip: rect(1px, 1px, 1px, 1px); + clip-path: inset(50%); + width: 1px; + height: 1px; + margin: -1px; + overflow: hidden; + padding: 0; + position: absolute; +} + +/* **************** container **************** */ +.container { + display: flex; + flex-direction: column; + margin: auto; + width: 520px; + border-radius: 10px; + border: 1px solid #C4C4C4; + background: #FFF; +} + +/* **************** header - 제목 **************** */ +header { + position: relative; + margin: 0 24px; +} + +header h1 { + text-align: center; + margin: 20px 0; + font-weight: 500; + font-size: 16px; +} + +header .close-btn { + position: absolute; + background: none; + border: none; + right: 12px; + top: 50%; + transform: translate(50%, -50%); +} + +.close-btn img { + width: 16px; + height: 16px; +} + +.underline { + width: 100%; + height: 1px; + flex-shrink: 0; + background-color: #C4C4C4; +} + +/* **************** main - 본문 **************** */ +main { + margin: 0 24px; +} +main h2 { + margin: 26px 0; + line-height: 24px; + font-weight: 500; + font-size: 20px; +} + +/* **************** 로그인 폼 **************** */ +.login-form { + color: #767676; + display: flex; + flex-direction: column; +} + +.login-insert { + display: flex; + flex-direction: column; + gap: 10px; +} + +.login-insert input { + width: 472px; + height: 50px; + border: 1px solid #C4C4C4; + border-radius: 5px; + padding: 15px 16px; + font-size: 16px; +} + +.warning-id, .warning-match { + margin: 6px 0 10px 4px; + font-size: 14px; + font-weight: 400; + color: #F4492E; +} + +.login-hold { + display: flex; + margin-top: 17px; +} + +.login-hold label { + margin-left: 8px; + cursor: pointer; +} + +input#login-hold{ + display:none; +} + +/* 체크하기 전 상태 */ +input#login-hold+label:before{ + content: ''; + display: inline-block; + width: 22px; + height: 22px; + background-image: url('../images/checkbox.svg'); + vertical-align: middle; + margin-right: 8px; +} + +/* 체크 된 상태 */ +input#login-hold:checked+label:before{ + content: ''; + background-image: url('../images/checkedbox.svg'); + background-repeat: no-repeat; + background-position: 50%; +} + +.login-btn { + width: 472px; + height: 50px; + display: flex; + align-items: center; + justify-content: center; + cursor: pointer; + border-radius: 5px; +} + +.login-form button { + font-size: 18px; + font-weight: 700; + margin: 20px 0; + border: none; + background: #2F80ED; + color: #FFF; +} + +.href-group { + margin: 0 auto 10px auto; + font-size: 14px; + font-weight: 400; +} + +.href-group span { + margin: 0 12px; +} + +.href-group a:hover { + text-decoration: underline; + font-weight: 500; +} + +/* 구분선 */ +.divider { + position: relative; + margin: 20px 0px; + text-align: center; + color: #767676; +} + +.divider::after{ + content: ""; + height: 1px; + width: 100%; + background-color: #C4C4C4; + position: absolute; + top: 0.5em; + left: 0; +} + +.divider span { + font-size: 14px; + padding: 0 10px; + background-color: #FFF; + z-index: 2; + position: relative; +} + +/* **************** sns 로그인 **************** */ +.btn-group { + display: flex; + flex-direction: column; + gap: 10px; + margin-bottom: 25px; + +} +.sns-login { + background: #FFF; + background: none; + border: 1px solid #767676; + color: #767676; +} + +.login-btn img { + width: 28px; + height: 28px; + margin-left: 12px; +} + +.login-btn span { + margin: auto; + font-size: 16px; +} + +.login-btn:hover { + font-weight: 600; + border-width: 3px; +} + +.fb-btn { + border: 1px solid #2D9CDB; +} + +.nv-btn { + border: 1px solid #00BF18; +} + +.kt-btn { + border: 1px solid #F2C94C; +} + diff --git a/css/reset.css b/css/reset.css new file mode 100644 index 0000000..9ff51eb --- /dev/null +++ b/css/reset.css @@ -0,0 +1,48 @@ +/* http://meyerweb.com/eric/tools/css/reset/ + v2.0 | 20110126 + License: none (public domain) +*/ + +html, body, div, span, applet, object, iframe, +h1, h2, h3, h4, h5, h6, p, blockquote, pre, +a, abbr, acronym, address, big, cite, code, +del, dfn, em, img, ins, kbd, q, s, samp, +small, strike, strong, sub, sup, tt, var, +b, u, i, center, +dl, dt, dd, ol, ul, li, +fieldset, form, label, legend, +table, caption, tbody, tfoot, thead, tr, th, td, +article, aside, canvas, details, embed, +figure, figcaption, footer, header, hgroup, +menu, nav, output, ruby, section, summary, +time, mark, audio, video { + margin: 0; + padding: 0; + border: 0; + font-size: 100%; + font: inherit; + vertical-align: baseline; +} +/* HTML5 display-role reset for older browsers */ +article, aside, details, figcaption, figure, +footer, header, hgroup, menu, nav, section { + display: block; +} +body { + line-height: 1; +} +ol, ul { + list-style: none; +} +blockquote, q { + quotes: none; +} +blockquote:before, blockquote:after, +q:before, q:after { + content: ''; + content: none; +} +table { + border-collapse: collapse; + border-spacing: 0; +} \ No newline at end of file diff --git a/images/.DS_Store b/images/.DS_Store new file mode 100644 index 0000000000000000000000000000000000000000..a45f0853e1173d34b40ae040270dfcdee51fc2ac GIT binary patch literal 6148 zcmeHK&2G~`5Z-Om)@~^ArfI{!EOJ3=BvL4#3JF45gdz?taaB^aCAE`HFm=4ab{a~l zlq-l8wdJ#f6*Q|^q zq#%SOP>zv7X#OC4o@-{&<~fLtN`w%X^bxbmI~)iZ2pRa_7~tRTY0^(9`9S2o z-!FMh6!?;(qzYCqSTbmg*yIf=p=$(@X5M0D!(s+x;M+%x>$Z@?XEj=GLu7q#G%VBg zGMUe~r#I5qKOhZAQE6Fw$Xc4Gdrdc|JBz$G$CzbwY~7eQX{)3prkL&NrcE6`z^qVk zS-Nl971qkJrd@IUSS^^4WJxY5$&HPP@$s}enb}OM8ZENhmzre`vHVbAQslE1n~>v_A%U`74}GY#(M z&Qr$)?20cg=#Hb?HJV#rwseD9Gj@)79;+8ksDeMazkt@z%cfmR-Q2qOb_Lj$Q`rjv z`+VpJHx&eC;o~;@TnI&a6hoz;8;KLa@A+p(rOw#Dok zWawnypZtJ5kwl6fFfMct83-9T`V8>>K?UWQ71$2Y-#Vc2uKnwL3Ty`$gd;32A6Tr6#SI1ft3!U(cSkrIVAzHXgbeIw zpf~6${QSTD_xu0;ps*J*5HfJ27{HNfZ8`@fiLK4MGScC`N6nh)dQam3phA6p3DlgT#qLk^>SYLbb&q2auAU z;D&RklJZsOhA6Q&x6mMJsRD!$>h{nUQq;IfoH(|39y3mYn#$gtU9a6B`6pTanCIE~ z@0)$|=IsJBY0{)g6YmhHGb<5YE#?XuKruutRH-DX5~W#`NtU2&27;}bj--)=I#Cya z_xpQv1nVpyMA%nN;4db783<(V==}90_=s-;xu;628zVsIC>y8>-Z25BDMcZ39p5dQ zP$RwwT<+^0A%L+Og*}eRW5MUY_@eXFi}wTjz5ydZ2T z;L$QFYEJ_ zpS}|j3i2c(O#30OJQ@+B)%Uy7`Ja#Ij)sI}tdcbFtl>Qaxuxr>h}T7N6j;0#(AmJ# zg_}>q#t+8;^K!MWOv{qOwTP<+jzNY&uO>}!t{Ndi=YH&!8dRrH6BbAV3h zK#7LfnTvu?uw{Vt2Z?I!PC-Uis)v7ow6L{OM^^ekF_+;ZaOXX4q z2qIB1sDvO6xoFo)9mZ(8o7mk+RBF4j`5a8;UgjUOr539zGm!K>qV`X$>68+ODgwq+ z)B5yw#j`M@aD0iM4 zzFzj;UPBz|nR!bCA2~Czsi8oLBxsdvg~Bs1lZ$VdtbQ=i0$Xz04^O@^k-NzDp}LcuM4Y#2 zLN%F_Gv`>aL7|c%58E;-;l=Z_Cb%RLLv>BbO`=%!&SblYE+-@5vf+u@!6{}uB5KcU z6HI7aM5xZDb}lbPkdVoi2NAVpWdH;iw%aB>G7d5L^`&gdH_&Z*Mj%Nj&Vejv+LfYd zu;qjc%I90v0u*#vl3qo`C_IuC1vX!VgUjy%DIKZYB`YS+e;5pd0Io{+-Cw>LLQ2!n zfD}z);@aI_O7P*A^TH;mgr-g^GO z-w7qd>G8Hj(SBSB|_ + + + + + + + + + + + + + + + + + + diff --git a/images/checkedbox.svg b/images/checkedbox.svg new file mode 100644 index 0000000..1ff08f0 --- /dev/null +++ b/images/checkedbox.svg @@ -0,0 +1,17 @@ + + + + + + + + + + + + + + + + + diff --git a/images/close.svg b/images/close.svg new file mode 100644 index 0000000..0f5d2e2 --- /dev/null +++ b/images/close.svg @@ -0,0 +1,4 @@ + + + + \ No newline at end of file diff --git a/images/facebook.png b/images/facebook.png new file mode 100644 index 0000000000000000000000000000000000000000..640f844f8cec327a019ab0ec35e1236b8ad471c4 GIT binary patch literal 521 zcmV+k0`~ohP)# z97{2GuL=P=33Oq-s?rk|^?;6%2mX$ld2ypwAOZ3*$DQh z??V?iKxBlMsGJ}HB!PbPV$Qq&XhzV=Yb1i?CL>@A+jtDVD~p?T;7+9pNub^1=HfOm z^YxfE&Ldq1>xnmXAYx!QI52k{n7gA7Jou4CfBHGw`KGl)G_Vj#2$b~)nZ;^+@r(e6 zFZ6pv)N#9=D>QC*#47?NeTkk(qYx@a9GE)}%pC{jjstVYfw|+r+#P)&%|D%l9W@!U@{Y zNJtRRV5^O&P~)BbN#aQUq`btlt9%_qHFO#!vu-3C_is z@ZfeYWdA64ORG*L^+}7>pkQ=*cXV%dAtSj3r^DB6Vmg8)qQ~c` ztV(aQ^ky!>tMAQ2Cg{LQ!0{G^FVae87F?~|ob-|bWWc25>g5bv`xDMSrnw@u;IBce zM$8>p7YxzlTeBk#Pc3-;1Pho3a-hf6p;<&oVp9qJ9K6~yPY@h{Aow7OOV@(|9D*z8 z2YoeYMoD2}LH*W@mNAj%fdgnK#fSx&@g2BFbfK4swg7pGIx_bDqZ0mBku5+ZI32d? zuBGQ3MviRlB0*wR14q$Q#;&bhB&av0>GyT3g0W_67LGytP1cKj=ww=pZW3N_1F#mU zgn~QST$z`XwUamVtP-hFiwg~HxDMP`&J5ZuPP`XitD0g z%S1do2L~{{xAXMmp(Iw^gNkN*;0UCPztUK-pgzNU0}h}I&fRL!m2Fpc^hR!{aoS09 zjcg_3Kze48Gn6Dj*XhZy4)hD<5((b#G)|5o1Brq+Z_gU613mAO3iqoyPI(grO?skq zGBFDQM!i4d7UV(S2NiU;8~M-a69p5~Q~wxNa8`!W@%-HGLZ3hd;p{+P_FVc$1e1z@ z+zS-+ixB(w^DHc!-0zTDgpmycRX3G6{jeU~ZqwgQP|+x$^637vzID-@6|3OnYx78_ vXZt2nEaejR6h*8sad*?CJRXn7;}P-~sJ1YKi=gjt00000NkvXXu0mjf<@JF_ literal 0 HcmV?d00001 diff --git a/images/naver-logo.png b/images/naver-logo.png new file mode 100644 index 0000000000000000000000000000000000000000..386818c34b8e0afb3ce05455d63a0b652c3a82a4 GIT binary patch literal 555 zcmV+`0@VG9P)uwD>~L^e?cu%w2cx7dBLFe(V(j59&$Xdi;yckNrXvqB^f@QgR6Apm?c!t)vhN zw4JXf5JSC+PVJ&YNQ^Wwrwr8?rP|2NM@h1o6DiRLQb)&hBrpqkLwkPC!}Brg#KWQO zGmVr`RihSe8>S8mOdS@OI;Sj5E#_Jg2C0s`ahCmcv=ia~E1(l5~U tOB9?ZOAL;ESlV4H75bEmVHk#K!w&^hV-Hd302lxO002ovPDHLkV1mIl + + + + + + + + + + + + +
+ +
+

로그인 또는 회원가입

+ +
+ +
+ +
+

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

+ + + + +
+ 또는 +
+ + +
+ + + + +
+ +
+ +
+ + + + + \ No newline at end of file From 81c93512678e0c3bb702b6da043c93c77302b61e Mon Sep 17 00:00:00 2001 From: sorikikikim Date: Fri, 4 Aug 2023 15:42:00 +0900 Subject: [PATCH 2/2] =?UTF-8?q?[#11]=20=EB=A1=9C=EA=B7=B8=EC=9D=B8/?= =?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?=ED=94=BC=EB=93=9C=EB=B0=B1=20=EB=B0=98=EC=98=81?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- css/login.css | 19 +------------------ css/reset.css | 17 ++++++++++++++++- 2 files changed, 17 insertions(+), 19 deletions(-) diff --git a/css/login.css b/css/login.css index 7d3ac43..d680a8d 100644 --- a/css/login.css +++ b/css/login.css @@ -1,23 +1,9 @@ @import url(//spoqa.github.io/spoqa-han-sans/css/SpoqaHanSansNeo.css); /* **************** 초기설정 **************** */ -body, -h1, -h2, -div, -p, -button, -input, -label, -span, -a { - font-family: 'Spoqa Han Sans Neo', 'sans-serif'; - margin: 0; - padding: 0; - box-sizing: border-box; -} body { + font-family: 'Spoqa Han Sans Neo', 'sans-serif'; background-color: #F2F2F2; position:absolute; top:50%; @@ -144,9 +130,6 @@ main h2 { cursor: pointer; } -input#login-hold{ - display:none; -} /* 체크하기 전 상태 */ input#login-hold+label:before{ diff --git a/css/reset.css b/css/reset.css index 9ff51eb..bd3a11b 100644 --- a/css/reset.css +++ b/css/reset.css @@ -45,4 +45,19 @@ q:before, q:after { table { border-collapse: collapse; border-spacing: 0; -} \ No newline at end of file +} + +body, +h1, +h2, +div, +p, +button, +input, +label, +span, +a { + margin: 0; + padding: 0; + box-sizing: border-box; +}