From a2291ea2341e1d968abd6ed6befdbfa14e2ce19e Mon Sep 17 00:00:00 2001 From: HyoEun Cho Date: Sun, 6 Aug 2023 21:31:10 +0900 Subject: [PATCH 1/2] =?UTF-8?q?=EB=A1=9C=EA=B7=B8=EC=9D=B8=20=EB=AA=A8?= =?UTF-8?q?=EB=8B=AC=20=EB=B0=8F=20=EA=B8=B0=EB=8A=A5=20=EA=B5=AC=ED=98=84?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- css/style.css | 271 +++++++++++++++++++++++++++++++++++ images/button_exit.svg | 4 + images/facebook.svg | 3 + images/google.svg | 6 + images/kakao.svg | 3 + images/login-checked.svg | 4 + images/login-not-checked.svg | 4 + images/naver.svg | 3 + index.html | 60 ++++++++ 9 files changed, 358 insertions(+) create mode 100644 css/style.css create mode 100644 images/button_exit.svg create mode 100644 images/facebook.svg create mode 100644 images/google.svg create mode 100644 images/kakao.svg create mode 100644 images/login-checked.svg create mode 100644 images/login-not-checked.svg create mode 100644 images/naver.svg create mode 100644 index.html diff --git a/css/style.css b/css/style.css new file mode 100644 index 0000000..5fc7b27 --- /dev/null +++ b/css/style.css @@ -0,0 +1,271 @@ +@font-face { + font-family: 'Spoqa Han Sans Neo'; + src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2108@1.1/SpoqaHanSansNeo-Regular.woff') format('woff'); + font-weight: normal; + font-style: normal; +} +h1, +input, +h2, +p, +input, +button{ + margin: 0; + padding: 0; + border:0; +} +body{ + width: 100%; + height: 100vh; + margin:0; + display: flex; + justify-content: center; + align-items: center; + background-color: #F2F2F2; + +} + +main{ + display: inline-block; + width: 520px; + + margin:0%; + background-color: #FFF; + border-radius: 10px; + border: 1px solid var(--c-4-c-4-c-4, #C4C4C4); + background: #FFF; +} +.title{ + position: relative; +} +.title h1{ + margin: 20px auto 18px auto; + text-align: center; + color: #000; + font-family: Spoqa Han Sans Neo; + font-size: 16px; + font-style: normal; + font-weight: 500; + line-height: normal; + border-radius: 10px; +} +.title .exit{ + width: 16px; + height: 16px; + position: absolute; + background: url(../images/button_exit.svg) 0 0 /16px no-repeat ; + right:24px; + top:2px; + cursor: pointer; +} +.title div{ + width: 520px; + height: 1px; + background: #C4C4C4; +} + +.login h2{ + margin-top: 26px; + margin-left: 24px; + margin-bottom: 13px; + color: #000; + font-family: Spoqa Han Sans Neo; + font-size: 20px; + font-style: normal; + font-weight: 500; + line-height: 24px; +} +.login input#id, +.login input#pw { + margin-left: 24px; + width: 472px; + height: 50px; + border-radius: 5px; + border: 1px solid var(--c-4-c-4-c-4, #C4C4C4); + background: #FFF; + padding-left: 16px; + margin-top:10px; + box-sizing: border-box; +} +.login input#id{ + border: 2px solid #F4492E; +} +.login .warning{ + margin-top: 6px; + margin-left: 24px; + color: #F4492E; + font-family: Spoqa Han Sans Neo; + font-size: 14px; + font-style: normal; + font-weight: 400; + line-height: normal; +} + +.login .keep-login{ + display: flex; + margin-left: 24px; + margin-top:13px; +} +.login .keep-login input{ + width: 22px; + height: 22px; +} +.login .keep-login .txt-hide{ + overflow: hidden; + width: 1px; + height: 1px; + clip-path: inset(50%); + +} +.labl-hold::before{ + display: inline-block; + content: ""; + width: 22px; + height: 22px; + margin-right: 10px; + background: url("../images/login-not-checked.svg") 0 0 / 22px no-repeat; + vertical-align: -5px; +} +.login .keep-login input:focus-visible + +.labl-hold::before { + outline: 2px solid #2F80ED ; + outline-offset: 2px; +} +.labl-hold::after{ + content: ""; + position: absolute; + left: 20px; + width: 22px; + height: 22px; + background: url("../images/login-checked.svg") 0 0 / 22px no-repeat; + opacity: 0; +} +.login .keep-login input:checked + +.labl-hold::after { + left: 0; + top:0.5px; + opacity: 1; +} + + +.labl-hold{ + color: var(--767676, #767676); + font-family: Spoqa Han Sans Neo; + font-size: 16px; + font-style: normal; + font-weight: 500; + line-height: normal; + margin-left:8px; + position: relative; +} +.login .login-button{ + margin-top: 21px; + margin-left: 24px; + border-radius: 5px; + background: #2F80ED; + width: 472px; + height: 50px; + color: #FFF; + font-family: Spoqa Han Sans Neo; + font-size: 18px; + font-style: normal; + font-weight: 700; + line-height: 22px; + text-align: center; + border: 0; + cursor: pointer; +} + +.login .signin-container{ + + text-align: center; + margin: 20px 0 0 24px; +} +.login .signin-container .signin::after{ + margin: 0 12px 0 12px; + content : "|"; + +} +.login .signin-container a{ + text-decoration: none; + color: var(--767676, #767676); + font-family: Spoqa Han Sans Neo; + font-size: 14px; + font-style: normal; + font-weight: 400; + line-height: normal; +} + +.login .or{ + position: relative; + margin-top: 30px; +} +.login .or div{ + margin-left: 24px; + background: #C4C4C4; + width: 472px; + height: 1px; +} +.login .or p{ + position: absolute; + padding: 0 13px 0 13px; + color: var(--767676, #767676); + font-family: Spoqa Han Sans Neo; + font-size: 14px; + font-style: normal; + font-weight: 400; + line-height: normal; + background-color: #FFF; + top:50%; + left: 50%; + transform: translate(-50%, -50%); + +} + + +/* 외부 로그인 */ +.external-login{ + padding-top:28px; + display: flex; + flex-direction: column; + gap:10px; + justify-content: center; + align-items: center; +} +.external-login a{ + cursor: pointer; + display: flex; + align-items: center; + text-decoration: none; + width: 472px; + height: 50px; + border-radius: 5px; + border: 1px solid var(--767676, #767676); + background: #FFF; +} +.external-login a img { + margin-left: 12px; +} +.external-login a p{ + color: var(--767676, #767676); + text-align: center; + font-family: Spoqa Han Sans Neo; + font-size: 16px; + font-style: normal; + font-weight: 500; + line-height: normal; + flex-grow: 1; +} + +.external-login .facebook{ + border: 1px solid #2D9CDB; +} +.external-login .naver{ + border: 1px solid #00BF18; +} +.external-login .kakao{ + border: 1px solid #F2C94C; +} +.external-login:last-child{ + margin-bottom:25px; +} \ No newline at end of file diff --git a/images/button_exit.svg b/images/button_exit.svg new file mode 100644 index 0000000..0f5d2e2 --- /dev/null +++ b/images/button_exit.svg @@ -0,0 +1,4 @@ + + + + \ No newline at end of file diff --git a/images/facebook.svg b/images/facebook.svg new file mode 100644 index 0000000..2d45a86 --- /dev/null +++ b/images/facebook.svg @@ -0,0 +1,3 @@ + + + \ No newline at end of file diff --git a/images/google.svg b/images/google.svg new file mode 100644 index 0000000..3cf1351 --- /dev/null +++ b/images/google.svg @@ -0,0 +1,6 @@ + + + + + + \ No newline at end of file diff --git a/images/kakao.svg b/images/kakao.svg new file mode 100644 index 0000000..2e50fc1 --- /dev/null +++ b/images/kakao.svg @@ -0,0 +1,3 @@ + + + \ No newline at end of file diff --git a/images/login-checked.svg b/images/login-checked.svg new file mode 100644 index 0000000..3fea706 --- /dev/null +++ b/images/login-checked.svg @@ -0,0 +1,4 @@ + + + + \ No newline at end of file diff --git a/images/login-not-checked.svg b/images/login-not-checked.svg new file mode 100644 index 0000000..3146d02 --- /dev/null +++ b/images/login-not-checked.svg @@ -0,0 +1,4 @@ + + + + \ No newline at end of file diff --git a/images/naver.svg b/images/naver.svg new file mode 100644 index 0000000..8e8ccea --- /dev/null +++ b/images/naver.svg @@ -0,0 +1,3 @@ + + + \ No newline at end of file diff --git a/index.html b/index.html new file mode 100644 index 0000000..517053a --- /dev/null +++ b/index.html @@ -0,0 +1,60 @@ + + + + + + + login page + + + +
+
+

로그인 또는 회원가입

+ +
+
+ + +
+ + From 5c436b65d81b1ac127919f487286a12b2f102a54 Mon Sep 17 00:00:00 2001 From: HyoEun Cho Date: Mon, 7 Aug 2023 23:43:18 +0900 Subject: [PATCH 2/2] =?UTF-8?q?[#11]=20=ED=94=BC=EB=93=9C=EB=B0=B1=20?= =?UTF-8?q?=EB=B0=98=EC=98=81=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- css/style.css | 105 +++++++++++++++++++------------------------------- index.html | 12 +++--- 2 files changed, 47 insertions(+), 70 deletions(-) diff --git a/css/style.css b/css/style.css index 5fc7b27..5821c3d 100644 --- a/css/style.css +++ b/css/style.css @@ -16,24 +16,25 @@ button{ } body{ width: 100%; - height: 100vh; + min-height: 100vh; margin:0; display: flex; justify-content: center; - align-items: center; + align-items: center; background-color: #F2F2F2; - + font-family: Spoqa Han Sans Neo; +} +ul{ + list-style: none; + margin: 0; + padding: 0; } - main{ - display: inline-block; width: 520px; - - margin:0%; background-color: #FFF; border-radius: 10px; - border: 1px solid var(--c-4-c-4-c-4, #C4C4C4); - background: #FFF; + border: 1px solid var(--c-4-c-4-c-4, #C4C4C4); + background: #FFF; } .title{ position: relative; @@ -42,11 +43,7 @@ main{ margin: 20px auto 18px auto; text-align: center; color: #000; - font-family: Spoqa Han Sans Neo; - font-size: 16px; - font-style: normal; font-weight: 500; - line-height: normal; border-radius: 10px; } .title .exit{ @@ -63,21 +60,20 @@ main{ height: 1px; background: #C4C4C4; } +.login{ + padding-left: 24px; +} .login h2{ margin-top: 26px; - margin-left: 24px; margin-bottom: 13px; color: #000; - font-family: Spoqa Han Sans Neo; font-size: 20px; - font-style: normal; font-weight: 500; line-height: 24px; } .login input#id, .login input#pw { - margin-left: 24px; width: 472px; height: 50px; border-radius: 5px; @@ -92,18 +88,12 @@ main{ } .login .warning{ margin-top: 6px; - margin-left: 24px; color: #F4492E; - font-family: Spoqa Han Sans Neo; - font-size: 14px; - font-style: normal; - font-weight: 400; - line-height: normal; + font-size: 14px; } .login .keep-login{ display: flex; - margin-left: 24px; margin-top:13px; } .login .keep-login input{ @@ -150,50 +140,43 @@ main{ .labl-hold{ color: var(--767676, #767676); - font-family: Spoqa Han Sans Neo; font-size: 16px; - font-style: normal; font-weight: 500; - line-height: normal; margin-left:8px; position: relative; } .login .login-button{ margin-top: 21px; - margin-left: 24px; border-radius: 5px; - background: #2F80ED; + background: #2F80ED; width: 472px; height: 50px; color: #FFF; - font-family: Spoqa Han Sans Neo; - font-size: 18px; - font-style: normal; - font-weight: 700; - line-height: 22px; - text-align: center; - border: 0; - cursor: pointer; + font-size: 18px; + font-weight: 700; + line-height: 22px; + text-align: center; + border: 0; + cursor: pointer; } .login .signin-container{ - - text-align: center; - margin: 20px 0 0 24px; + margin-top: 20px; } .login .signin-container .signin::after{ margin: 0 12px 0 12px; + color: var(--767676, #767676); content : "|"; - } -.login .signin-container a{ +.login .signin-container ul{ + display: flex; + justify-content: center; + margin-left: -24px; +} +.login .signin-container li a{ text-decoration: none; color: var(--767676, #767676); - font-family: Spoqa Han Sans Neo; - font-size: 14px; - font-style: normal; - font-weight: 400; - line-height: normal; + font-size: 14px; } .login .or{ @@ -201,24 +184,20 @@ main{ margin-top: 30px; } .login .or div{ - margin-left: 24px; background: #C4C4C4; width: 472px; height: 1px; } + .login .or p{ position: absolute; padding: 0 13px 0 13px; color: var(--767676, #767676); - font-family: Spoqa Han Sans Neo; - font-size: 14px; - font-style: normal; - font-weight: 400; - line-height: normal; - background-color: #FFF; - top:50%; - left: 50%; - transform: translate(-50%, -50%); + font-size: 14px; + background-color: #FFF; + top:50%; + left: 50%; + transform: translate(-50%, -50%); } @@ -247,14 +226,10 @@ main{ margin-left: 12px; } .external-login a p{ - color: var(--767676, #767676); - text-align: center; - font-family: Spoqa Han Sans Neo; - font-size: 16px; - font-style: normal; - font-weight: 500; - line-height: normal; - flex-grow: 1; + color: var(--767676, #767676); + text-align: center; + font-weight: 500; + flex-grow: 1; } .external-login .facebook{ diff --git a/index.html b/index.html index 517053a..a44bccd 100644 --- a/index.html +++ b/index.html @@ -14,7 +14,7 @@

로그인 또는 회원가입

- +