From 6578987e0e7c7393c95399fff0f954d6a660c44b Mon Sep 17 00:00:00 2001 From: kys0417 <92397578+kys0417@users.noreply.github.com> Date: Mon, 31 Jul 2023 19:37:02 +0900 Subject: [PATCH 1/3] =?UTF-8?q?[#11]=20=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?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- img/Google__G__Logo 1.svg | 10 ++ img/check-box.svg | 6 + img/close.svg | 6 + img/facebook.svg | 5 + img/icon_sprites.png | Bin 0 -> 1921 bytes img/message-circle.svg | 5 + img/naver-logo.svg | 5 + modal.css | 223 ++++++++++++++++++++++++++++++++++++++ modal.html | 74 +++++++++++++ 9 files changed, 334 insertions(+) create mode 100644 img/Google__G__Logo 1.svg create mode 100644 img/check-box.svg create mode 100644 img/close.svg create mode 100644 img/facebook.svg create mode 100644 img/icon_sprites.png create mode 100644 img/message-circle.svg create mode 100644 img/naver-logo.svg create mode 100644 modal.css create mode 100644 modal.html diff --git a/img/Google__G__Logo 1.svg b/img/Google__G__Logo 1.svg new file mode 100644 index 0000000..5f66be1 --- /dev/null +++ b/img/Google__G__Logo 1.svg @@ -0,0 +1,10 @@ + + + diff --git a/img/check-box.svg b/img/check-box.svg new file mode 100644 index 0000000..79a8b3b --- /dev/null +++ b/img/check-box.svg @@ -0,0 +1,6 @@ + + + + + + diff --git a/img/close.svg b/img/close.svg new file mode 100644 index 0000000..b0315f6 --- /dev/null +++ b/img/close.svg @@ -0,0 +1,6 @@ + + + + + + diff --git a/img/facebook.svg b/img/facebook.svg new file mode 100644 index 0000000..91ccb3c --- /dev/null +++ b/img/facebook.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/img/icon_sprites.png b/img/icon_sprites.png new file mode 100644 index 0000000000000000000000000000000000000000..58b78838866a08a19938d136aaed504e0f242ec4 GIT binary patch literal 1921 zcmcJQ=|9wa1BSmdgOQyqWtT0KwPgLwSjzG+_9e?$bFz&@8T-#J6p|c53L!!wJ0lJr z`*J*GH^^>`rOe0~$N8MU;dyai_x0<8H-4tA@yJjF= z;P&#H8GbNR71K;8vUiK@D_l5kfBCe8o-mwQ;N4p*3Ks6AeSe*st0^^BR%u$Pxe%M| z>ne{JLN)wm97-Dilt2Vy7S~pj2d>hRxxuqaA(F!Ub8g^%8|kt(4p>K<8_ zcR;CFfec*UeZL;QS*n<&xEC_yEF&kOh;FIZx3y_dm3eTTc%^PeuDhQ`FHRjvT)$GoQk36c!aK2G% z3ODwdp8zD6jn-b=aT)E^BI9wCk!@N1y)fGu?4D;pT0Ne+bQ7%h6)&eZ$Aym={h=b$ zMdJP6JFe`3hLfs2T7LY&;&$g8et9&V+iqf#wAE+k(XtUE9%PmQe-PcG5I6Lidi1m^ zenx{lJwd1E_w*v{%`TJXW8x(1jDp5)vMh3ux0^*&I_sq|%sv-m0(_mCE@Ru;-WfE2;KSz(9u zIcBHP6(%T0$glEL@!1nNi-c}_8cc5eqBr5rCb2QwluX-=oSqh6q<>8A-!C0IT>Nxe z$~;<^lp<0yY3cGrc5OL(9Ime+tm!B?ry|*qTdJ|YIj7!9S_``t5VkiWM}U#l$lH#K zcZ~nQyE2gZcD;I$CF>J+3(348^68j*g|-X!Hdl=d64bfedx2S&ka>|{wp-o1_*9mzHUnqrU~x`@ljuGGNfwnS_@(ptwY zROLvaoynJ`ed@~AZi;H~(s`b1c1W^<6Il11=Od((w?=$%La{W*q|^j6h7zBv7Jc4d zF}oBu`LN%!o2d+S(o+e4YIogfg~0f>>;hrBxzVh%!Xx6cK-Wsy&x{0A6rHOFaXPaD zspRmiXf44mU3`##dzCdkg;QB~;KXU) z()LH&F~_l8JNz!EcGC#qVR!7Ov}D;xHAq>)X_~)d;G460Y%pfS=u@d+{OcQC!8JKx z!`6CC7{msNxr>En5;WRGn?69R_ zHJ1Hbl#d%c_w1GLXJ_FP?O$~dpsiK^i8C`$QaU-QB#0Kyx9t88vr(bs6l!5T*2>4z zKfx2vk*>#rPtzu_L&fqEp;CP=HYvBDt!9@qC0`UcEW`IltfLOc+D}NI3nTNSmQ*dY ziWs0&mtW7_^R--%C@CG?+&wRGHM zA&qJO2^`9i%eSN`U2YV;#y}uTUVD$^etx=xV#UZ%I4i!v$nc5F0NK7`wBO` z^)3cj^H}egfq(Ww`F^>>!Eu?plfJgVWlRrSW*(LKac0Zai29m>zxpItzf-l%B&nU_ zod;7`>!`acIjTf>@z3Yz-5Rm?IUkcc?X_7`n^eN5Of(^^X+%Ss9$?9m0RMVMnq3qm y@+fL)g#wsj6+|Td7r_X*(X+6d3ID4q${CE;b}xDbXB2ntRA6))qhGD-8v8e&Duh7* literal 0 HcmV?d00001 diff --git a/img/message-circle.svg b/img/message-circle.svg new file mode 100644 index 0000000..e507e20 --- /dev/null +++ b/img/message-circle.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/img/naver-logo.svg b/img/naver-logo.svg new file mode 100644 index 0000000..f8b9d27 --- /dev/null +++ b/img/naver-logo.svg @@ -0,0 +1,5 @@ + + + diff --git a/modal.css b/modal.css new file mode 100644 index 0000000..860fd3e --- /dev/null +++ b/modal.css @@ -0,0 +1,223 @@ +/* font */ +@import url(//spoqa.github.io/spoqa-han-sans/css/SpoqaHanSansNeo.css); + +:root { + --text-color: #767676; + --border-color: #c4c4c4; + --warn-color: #f4492e; + --button-color: #2f80ed; +} +/* reset */ +body, +ul, +li, +h1, +h2 { + margin: 0; + padding: 0; +} +img { + vertical-align: top; +} +h1, +h2, +input { + font: inherit; +} +a { + text-decoration: none; + color: inherit; +} +button { + padding: 0; + margin: 0; + box-sizing: border-box; + font: inherit; + border: 0; + background: none; +} +button:enabled, +img:hover, +a:hover { + cursor: pointer; +} +ul, +li { + list-style: none; +} +/* layout */ +body { + display: flex; + flex-direction: column; + min-height: 100vh; +} +.modal { + width: 520px; + max-width: 100%; + margin: auto; +} +/* css */ +body { + font-family: "Spoqa Han Sans Neo", "sans-serif"; + color: var(--text-color); +} +.modal { + border-radius: 10px; + border: 1px solid var(--border-color); + font-size: 16px; +} +/* header */ +.header { + box-sizing: border-box; + border-bottom: 1px solid var(--border-color); + text-align: center; +} +.header img { + float: right; + width: 16px; + padding: 5px 24px 5px 0; +} +.header .title { + color: black; + font-weight: 500; + padding: 20px 0; +} +.main { + padding: 26px 24px 25px 24px; +} +/* section1 */ +.section1 { + margin-bottom: 36px; +} +.section1 .subtitle { + color: black; + font-size: 20px; + font-weight: 500; +} +.section1 .login-form { + margin: 24px 0 20px 0; + display: flex; + flex-direction: column; +} +[class^="input"] { + box-sizing: border-box; + padding: 15px 0 15px 16px; + border-radius: 5px; + border: 1px solid var(--border-color); +} +/* warn*/ +.section1 .input-id { + border: 2px solid #f4492e; +} +[class^="warn"] { + box-sizing: border-box; + padding: 6px 0 10px 0.3em; + color: #f4492e; + font-size: 14px; +} +/* section1 custom-check-box */ +.section1 .check-box { + display: flex; +} +.section1 .check-box .check-hide { + overflow: hidden; + width: 1px; + height: 1px; + margin: 1px; + clip-path: inset(50%); +} +.section1 .label-check-box { + position: relative; +} +.section1 .label-check-box::before { + display: inline-block; + content: ""; + width: 22px; + height: 22px; + border: 1px solid var(--text-color); + vertical-align: -6px; + margin-right: 8px; + border-radius: 50%; +} +.check-hide:checked + .label-check-box::before { + background-color: var(--button-color); + border: 1px solid var(--button-color); +} +.section1 .label-check-box::after { + content: ""; + position: absolute; + width: 8px; + height: 5px; + left: 8px; + top: 8px; + border-left: 1px solid var(--text-color); + border-bottom: 1px solid var(--text-color); + transform: rotate(-45deg); +} +.check-hide:checked + .label-check-box::after { + border-left: 1px solid white; + border-bottom: 1px solid white; +} +/* section1 login-button */ +.section1 .login-button { + box-sizing: border-box; + background-color: var(--button-color); + color: white; + font-size: 18px; + font-weight: 600; + padding: 14px 0; + border-radius: 5px; + margin-top: 21px; +} +/* section1 help-link */ +.section1 .help-link { + font-size: 14px; + text-align: center; +} +.section1 .help-link span { + margin: 0 10px; +} +/* section2 */ +.section2 { + position: relative; + padding-top: 28px; + border-top: 1px solid var(--border-color); +} +.section2::before { + position: absolute; + content: "또는"; + padding: 0 13px; + background-color: white; + font-size: 14px; + top: -10px; + left: calc(50% - 26px); +} +.section2 .btn-list { + display: flex; + flex-direction: column; + gap: 10px; +} +[class^="portal-login"] { + display: block; + border-radius: 5px; + background: #fff; + padding: 11px 0; + text-align: center; + font-weight: 500; +} +.google { + background: url("./img/Google__G__Logo\ 1.svg") no-repeat 12px center; + border: 1px solid #767676; +} +.facebook { + background: url("./img/facebook.svg") no-repeat 12px center; + border: 1px solid #2d9cdb; +} +.naver { + background: url("./img/naver-logo.svg") no-repeat 12px center; + border: 1px solid #00bf18; +} +.kakao { + background: url("./img/message-circle.svg") no-repeat 12px center; + border: 1px solid #f2c94c; +} diff --git a/modal.html b/modal.html new file mode 100644 index 0000000..56ca988 --- /dev/null +++ b/modal.html @@ -0,0 +1,74 @@ + + + + + + + + + + + + +
+ + +
+

로그인 또는 회원가입 + 닫기 +

+
+ +
+
+

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

+ + + + + +
+ + | + 아이디/비밀번호 찾기 +
+ +
+ +
+ + + + +
+
+
+ + + \ No newline at end of file From 2d05db1937fdc8d123bb5056a63f5b3163dd5100 Mon Sep 17 00:00:00 2001 From: kys0417 <92397578+kys0417@users.noreply.github.com> Date: Mon, 31 Jul 2023 22:30:30 +0900 Subject: [PATCH 2/3] =?UTF-8?q?[#11]=20header=20=ED=85=8D=EC=8A=A4?= =?UTF-8?q?=ED=8A=B8,=20=EC=9D=B4=EB=AF=B8=EC=A7=80=20=EC=A0=95=EB=A0=AC?= =?UTF-8?q?=20=EC=88=98=EC=A0=95=20+=20css=EB=B3=80=EC=88=98=20=EC=B6=94?= =?UTF-8?q?=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- modal.css | 19 +++++++++++-------- modal.html | 5 ++--- 2 files changed, 13 insertions(+), 11 deletions(-) diff --git a/modal.css b/modal.css index 860fd3e..d125980 100644 --- a/modal.css +++ b/modal.css @@ -3,6 +3,7 @@ :root { --text-color: #767676; + --title-color: black; --border-color: #c4c4c4; --warn-color: #f4492e; --button-color: #2f80ed; @@ -68,17 +69,19 @@ body { } /* header */ .header { - box-sizing: border-box; + display: flex; border-bottom: 1px solid var(--border-color); - text-align: center; + justify-content: center; + position: relative; } .header img { - float: right; width: 16px; - padding: 5px 24px 5px 0; + position: absolute; + right: 24px; + top: 23px; } .header .title { - color: black; + color: var(--title-color); font-weight: 500; padding: 20px 0; } @@ -90,7 +93,7 @@ body { margin-bottom: 36px; } .section1 .subtitle { - color: black; + color: var(--title-color); font-size: 20px; font-weight: 500; } @@ -107,12 +110,12 @@ body { } /* warn*/ .section1 .input-id { - border: 2px solid #f4492e; + border: 2px solid var(--warn-color); } [class^="warn"] { box-sizing: border-box; padding: 6px 0 10px 0.3em; - color: #f4492e; + color: var(--warn-color); font-size: 14px; } /* section1 custom-check-box */ diff --git a/modal.html b/modal.html index 56ca988..36cd0d1 100644 --- a/modal.html +++ b/modal.html @@ -14,9 +14,8 @@
-

로그인 또는 회원가입 - 닫기 -

+

로그인 또는 회원가입

+ 닫기
From af9227f99f20ffacfd069793e2d8a26b61bed912 Mon Sep 17 00:00:00 2001 From: kys0417 <92397578+kys0417@users.noreply.github.com> Date: Tue, 8 Aug 2023 10:52:11 +0900 Subject: [PATCH 3/3] =?UTF-8?q?[#11]=20warn=20=ED=91=9C=EC=8B=9C=20label?= =?UTF-8?q?=20->=20strong=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- modal.css | 1 + modal.html | 6 ++++-- 2 files changed, 5 insertions(+), 2 deletions(-) diff --git a/modal.css b/modal.css index d125980..f977233 100644 --- a/modal.css +++ b/modal.css @@ -117,6 +117,7 @@ body { padding: 6px 0 10px 0.3em; color: var(--warn-color); font-size: 14px; + font-weight: 400; } /* section1 custom-check-box */ .section1 .check-box { diff --git a/modal.html b/modal.html index 36cd0d1..121137f 100644 --- a/modal.html +++ b/modal.html @@ -25,9 +25,11 @@

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