diff --git a/.gitignore b/.gitignore
new file mode 100644
index 00000000..c6f9a448
--- /dev/null
+++ b/.gitignore
@@ -0,0 +1 @@
+.vscode/settings.json
diff --git a/.vscode/settings.json b/.vscode/settings.json
deleted file mode 100644
index 292efa8c..00000000
--- a/.vscode/settings.json
+++ /dev/null
@@ -1,3 +0,0 @@
-{
- "cSpell.words": ["codeit", "Pretendard"]
-}
diff --git a/assets/fonts/Pretendard-Black.woff b/assets/fonts/Pretendard-Black.woff
deleted file mode 100644
index d07848c8..00000000
Binary files a/assets/fonts/Pretendard-Black.woff and /dev/null differ
diff --git a/assets/fonts/Pretendard-Black.woff2 b/assets/fonts/Pretendard-Black.woff2
deleted file mode 100644
index eafe6835..00000000
Binary files a/assets/fonts/Pretendard-Black.woff2 and /dev/null differ
diff --git a/assets/fonts/Pretendard-ExtraBold.woff b/assets/fonts/Pretendard-ExtraBold.woff
deleted file mode 100644
index 8058b761..00000000
Binary files a/assets/fonts/Pretendard-ExtraBold.woff and /dev/null differ
diff --git a/assets/fonts/Pretendard-ExtraBold.woff2 b/assets/fonts/Pretendard-ExtraBold.woff2
deleted file mode 100644
index dcd57e75..00000000
Binary files a/assets/fonts/Pretendard-ExtraBold.woff2 and /dev/null differ
diff --git a/assets/fonts/Pretendard-ExtraLight.woff b/assets/fonts/Pretendard-ExtraLight.woff
deleted file mode 100644
index f9498d85..00000000
Binary files a/assets/fonts/Pretendard-ExtraLight.woff and /dev/null differ
diff --git a/assets/fonts/Pretendard-ExtraLight.woff2 b/assets/fonts/Pretendard-ExtraLight.woff2
deleted file mode 100644
index e5104022..00000000
Binary files a/assets/fonts/Pretendard-ExtraLight.woff2 and /dev/null differ
diff --git a/assets/fonts/Pretendard-Light.woff b/assets/fonts/Pretendard-Light.woff
deleted file mode 100644
index 2cad6082..00000000
Binary files a/assets/fonts/Pretendard-Light.woff and /dev/null differ
diff --git a/assets/fonts/Pretendard-Light.woff2 b/assets/fonts/Pretendard-Light.woff2
deleted file mode 100644
index 7f82fe84..00000000
Binary files a/assets/fonts/Pretendard-Light.woff2 and /dev/null differ
diff --git a/assets/fonts/Pretendard-Thin.woff b/assets/fonts/Pretendard-Thin.woff
deleted file mode 100644
index d28e4486..00000000
Binary files a/assets/fonts/Pretendard-Thin.woff and /dev/null differ
diff --git a/assets/fonts/Pretendard-Thin.woff2 b/assets/fonts/Pretendard-Thin.woff2
deleted file mode 100644
index 6c9bc960..00000000
Binary files a/assets/fonts/Pretendard-Thin.woff2 and /dev/null differ
diff --git a/assets/images/btn-visibility-off.svg b/assets/images/btn-visibility-off.svg
new file mode 100644
index 00000000..442fc5eb
--- /dev/null
+++ b/assets/images/btn-visibility-off.svg
@@ -0,0 +1,3 @@
+
diff --git a/assets/images/btn-visibility-on.svg b/assets/images/btn-visibility-on.svg
new file mode 100644
index 00000000..119d5520
--- /dev/null
+++ b/assets/images/btn-visibility-on.svg
@@ -0,0 +1,3 @@
+
diff --git a/assets/images/ic_facebook.svg b/assets/images/ic-facebook.svg
similarity index 100%
rename from assets/images/ic_facebook.svg
rename to assets/images/ic-facebook.svg
diff --git a/assets/images/ic-google.svg b/assets/images/ic-google.svg
new file mode 100644
index 00000000..e01c78b1
--- /dev/null
+++ b/assets/images/ic-google.svg
@@ -0,0 +1,9 @@
+
diff --git a/assets/images/ic_instagram.svg b/assets/images/ic-instagram.svg
similarity index 100%
rename from assets/images/ic_instagram.svg
rename to assets/images/ic-instagram.svg
diff --git a/assets/images/ic-kakao.svg b/assets/images/ic-kakao.svg
new file mode 100644
index 00000000..46853fcf
--- /dev/null
+++ b/assets/images/ic-kakao.svg
@@ -0,0 +1,4 @@
+
diff --git a/assets/images/ic_twitter.svg b/assets/images/ic-twitter.svg
similarity index 100%
rename from assets/images/ic_twitter.svg
rename to assets/images/ic-twitter.svg
diff --git a/assets/images/ic_youtube.svg b/assets/images/ic-youtube.svg
similarity index 100%
rename from assets/images/ic_youtube.svg
rename to assets/images/ic-youtube.svg
diff --git a/assets/images/Img_home_01.jpg b/assets/images/img-home-01.jpg
similarity index 100%
rename from assets/images/Img_home_01.jpg
rename to assets/images/img-home-01.jpg
diff --git a/assets/images/Img_home_02.jpg b/assets/images/img-home-02.jpg
similarity index 100%
rename from assets/images/Img_home_02.jpg
rename to assets/images/img-home-02.jpg
diff --git a/assets/images/Img_home_03.jpg b/assets/images/img-home-03.jpg
similarity index 100%
rename from assets/images/Img_home_03.jpg
rename to assets/images/img-home-03.jpg
diff --git a/assets/images/Img_home_bottom.png b/assets/images/img-home-bottom.png
similarity index 100%
rename from assets/images/Img_home_bottom.png
rename to assets/images/img-home-bottom.png
diff --git a/assets/images/Img_home_top.png b/assets/images/img-home-top.png
similarity index 100%
rename from assets/images/Img_home_top.png
rename to assets/images/img-home-top.png
diff --git a/assets/images/logo-lg.png b/assets/images/logo-lg.png
new file mode 100644
index 00000000..2695e335
Binary files /dev/null and b/assets/images/logo-lg.png differ
diff --git a/css/common.css b/css/common.css
new file mode 100644
index 00000000..96290bd3
--- /dev/null
+++ b/css/common.css
@@ -0,0 +1,40 @@
+@import url('https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.min.css');
+@import url('fonts.css');
+
+:root {
+ --Primary-100: #3692ff;
+ --Primary-200: #1967d6;
+ --Primary-300: #1251aa;
+ --Gray-50: #f9fafb;
+ --Gray-100: #f3f4f6;
+ --Gray-200: #e5e7eb;
+ --Gray-400: #9ca3af;
+ --Gray-500: #6b7280;
+ --Gray-600: #4b5563;
+ --Gray-700: #374151;
+ --Gray-800: #1f2937;
+ --Gray-900: #111827;
+ --Error-red: #f74747;
+}
+
+* {
+ box-sizing: border-box;
+ list-style: none;
+ margin: 0;
+ padding: 0;
+}
+
+html {
+ font-size: 62.5%;
+}
+
+body {
+ font-family: 'Pretendard', sans-serif;
+ word-break: keep-all;
+}
+
+a {
+ text-decoration: none;
+ cursor: pointer;
+ white-space: nowrap;
+}
diff --git a/css/fonts.css b/css/fonts.css
index c8e6b038..e0420d60 100644
--- a/css/fonts.css
+++ b/css/fonts.css
@@ -7,24 +7,6 @@ This license is copied below, and is also available with a FAQ at:
http://scripts.sil.org/OFL
*/
-@font-face {
- font-family: 'Pretendard';
- font-weight: 900;
- font-display: swap;
- src: local('Pretendard Black'),
- url(../assets/fonts/Pretendard-Black.woff2) format('woff2'),
- url(../assets/fonts/Pretendard-Black.woff) format('woff');
-}
-
-@font-face {
- font-family: 'Pretendard';
- font-weight: 800;
- font-display: swap;
- src: local('Pretendard ExtraBold'),
- url(../assets/fonts/Pretendard-ExtraBold.woff2) format('woff2'),
- url(../assets/fonts/Pretendard-ExtraBold.woff) format('woff');
-}
-
@font-face {
font-family: 'Pretendard';
font-weight: 700;
@@ -60,30 +42,3 @@ http://scripts.sil.org/OFL
url(../assets/fonts/Pretendard-Regular.woff2) format('woff2'),
url(../assets/fonts/Pretendard-Regular.woff) format('woff');
}
-
-@font-face {
- font-family: 'Pretendard';
- font-weight: 300;
- font-display: swap;
- src: local('Pretendard Light'),
- url(../assets/fonts/Pretendard-Light.woff2) format('woff2'),
- url(../assets/fonts/Pretendard-Light.woff) format('woff');
-}
-
-@font-face {
- font-family: 'Pretendard';
- font-weight: 200;
- font-display: swap;
- src: local('Pretendard ExtraLight'),
- url(../assets/fonts/Pretendard-ExtraLight.woff2) format('woff2'),
- url(../assets/fonts/Pretendard-ExtraLight.woff) format('woff');
-}
-
-@font-face {
- font-family: 'Pretendard';
- font-weight: 100;
- font-display: swap;
- src: local('Pretendard Thin'),
- url(../assets/fonts/Pretendard-Thin.woff2) format('woff2'),
- url(../assets/fonts/Pretendard-Thin.woff) format('woff');
-}
diff --git a/css/login.css b/css/login.css
new file mode 100644
index 00000000..c2d90e7b
--- /dev/null
+++ b/css/login.css
@@ -0,0 +1,135 @@
+main {
+ width: 64rem;
+ margin: 23.1rem auto;
+}
+
+.login__header {
+ text-align: center;
+ margin-bottom: 4rem;
+}
+
+.login__label {
+ font-size: 1.8rem;
+ font-weight: 700;
+ margin-bottom: 1.6rem;
+ display: block;
+ color: var(--Gray-800);
+}
+
+.login__input {
+ width: 100%;
+ height: 100%;
+ padding: 1.6rem 2.4rem;
+ font-size: 1.6rem;
+ color: var(--Gray-800);
+ background-color: var(--Gray-100);
+ border: none;
+ border-radius: 1.2rem;
+}
+
+.login__input::placeholder {
+ color: var(--Gray-400);
+}
+
+.login__input:focus {
+ outline: 1px solid #3692ff;
+}
+
+.login__field--password {
+ position: relative;
+ height: 5.6rem;
+ margin-bottom: 2.4rem;
+}
+
+.login__field--id {
+ margin-bottom: 2.4rem;
+ height: 5.6rem;
+}
+
+.login__field--password button {
+ position: absolute;
+ top: 50%;
+ right: 2.4rem;
+ transform: translateY(-50%);
+ border: none;
+ display: flex;
+ align-items: center;
+ cursor: pointer;
+ background: none;
+}
+
+.login__password-toggle-icon--active {
+ display: none;
+}
+
+.login__submit {
+ width: 100%;
+ height: 5.6rem;
+ padding: 1.6rem 0;
+ border: none;
+ border-radius: 4rem;
+ background-color: var(--Gray-400);
+ color: var(--Gray-100);
+ font-size: 2rem;
+ font-weight: 600;
+ cursor: pointer;
+ transition: background-color 0.2s;
+}
+
+.login__submit:hover {
+ background-color: var(--Primary-100);
+}
+
+.social-login {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ padding: 1.6rem 2.3rem;
+ margin: 2.4rem 0;
+ background-color: #e6f2ff;
+ border-radius: 0.8rem;
+ color: var(--Gray-800);
+}
+
+.social-login__header {
+ font-size: 1.6rem;
+ font-weight: 500;
+}
+
+.social-login ul {
+ display: flex;
+ gap: 1.6rem;
+}
+
+.social-button {
+ width: 4.2rem;
+ height: 4.2rem;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ border-radius: 50%;
+}
+
+.social-button--kakao {
+ background-color: #f5e14b;
+}
+
+.social-button--google {
+ background-color: #fff;
+}
+
+.signup-link {
+ text-align: center;
+}
+
+.signup-link__text {
+ font-size: 1.4rem;
+ font-weight: 500;
+ color: var(--Gray-800);
+}
+
+.signup-link__text a {
+ margin-left: 0.4rem;
+ color: var(--Primary-100);
+ border-bottom: 1px solid var(--Primary-100);
+}
diff --git a/css/main.css b/css/main.css
index c1f87139..e226fb36 100644
--- a/css/main.css
+++ b/css/main.css
@@ -1,35 +1,3 @@
-:root {
- --Cool-Gray-100: #f3f4f6;
- --brand-blue: #3692ff;
- --Primary-100: #3692ff;
- --Secondary-200: #e5e7eb;
- --Secondary-400: #9ca3af;
- --Secondary-700: #374151;
- --Secondary-900: #111827;
-}
-
-* {
- box-sizing: border-box;
- list-style: none;
-}
-
-html {
- font-size: 62.5%;
-}
-
-body {
- font-family: 'Pretendard', sans-serif;
- width: 100%;
- word-break: keep-all;
-}
-
-a {
- text-decoration: none;
- cursor: pointer;
- white-space: nowrap;
- font-family: 'Pretendard', sans-serif;
-}
-
header {
width: 100%;
height: 7rem;
@@ -58,7 +26,7 @@ header {
padding: 1.2rem 2.3rem;
background-color: var(--Primary-100);
border-radius: 0.8rem;
- color: var(--Cool-Gray-100);
+ color: var(--Gray-100);
font-weight: 600;
font-size: 1.6rem;
}
@@ -68,9 +36,9 @@ header {
align-items: center;
justify-content: center;
padding: 1.2rem 12.4rem;
- background-color: var(--brand-blue);
+ background-color: var(--Primary-100);
border-radius: 4rem;
- color: var(--Cool-Gray-100);
+ color: var(--Gray-100);
font-weight: 600;
font-size: 2rem;
}
@@ -116,14 +84,14 @@ header {
}
.main__background--text .btn__large {
- margin-bottom: 6rem;
+ margin: 3.2rem 0 6rem;
height: 56px;
}
h2 {
font-size: 4rem;
font-weight: 700;
- color: var(--Secondary-700);
+ color: var(--Gray-700);
line-height: 5.6rem;
}
@@ -182,22 +150,26 @@ section:nth-of-type(4) .section__card {
.section__card--text h3,
.main__background h3 {
- color: var(--Secondary-700);
+ color: var(--Gray-700);
font-size: 4rem;
font-weight: 700;
letter-spacing: 0.08rem;
line-height: 5.6rem;
}
+.section__card--text h3 {
+ margin: 1.2rem 0 2.4rem;
+}
+
.section__card--text p {
- color: var(--Secondary-700);
+ color: var(--Gray-700);
font-size: 2.4rem;
line-height: 3.2rem;
font-weight: 500;
}
footer {
- background-color: var(--Secondary-900);
+ background-color: var(--Gray-900);
height: 16rem;
padding: 3.2rem 20rem;
}
@@ -209,7 +181,7 @@ footer {
}
.footer__text--copyright {
- color: var(--Secondary-400);
+ color: var(--Gray-400);
font-size: 1.6rem;
font-weight: 400;
}
@@ -220,7 +192,7 @@ footer {
}
.footer__nav-item a {
- color: var(--Secondary-200);
+ color: var(--Gray-200);
font-size: 1.6rem;
font-weight: 400;
}
diff --git a/css/signup.css b/css/signup.css
new file mode 100644
index 00000000..2101fc1e
--- /dev/null
+++ b/css/signup.css
@@ -0,0 +1,133 @@
+main {
+ width: 64rem;
+ margin: 23.1rem auto;
+}
+
+.signup__header {
+ text-align: center;
+ margin-bottom: 4rem;
+}
+
+.signup__label {
+ font-size: 1.8rem;
+ font-weight: 700;
+ margin-bottom: 1.6rem;
+ display: block;
+ color: var(--Gray-800);
+}
+
+.signup__input {
+ width: 100%;
+ height: 100%;
+ padding: 1.6rem 2.4rem;
+ font-size: 1.6rem;
+ color: var(--Gray-800);
+ background-color: var(--Gray-100);
+ border: none;
+ border-radius: 1.2rem;
+}
+
+.signup__input::placeholder {
+ color: var(--Gray-400);
+}
+
+.signup__input:focus {
+ outline: 1px solid #3692ff;
+}
+
+.signup__field {
+ height: 5.6rem;
+ margin-bottom: 2.4rem;
+}
+
+.signup__field--password {
+ position: relative;
+}
+
+.signup__field--password button {
+ position: absolute;
+ top: 50%;
+ right: 2.4rem;
+ transform: translateY(-50%);
+ border: none;
+ display: flex;
+ align-items: center;
+ cursor: pointer;
+ background: none;
+}
+
+.signup__password-toggle-icon--active {
+ display: none;
+}
+
+.signup__submit {
+ width: 100%;
+ height: 5.6rem;
+ padding: 1.6rem 0;
+ border: none;
+ border-radius: 4rem;
+ background-color: var(--Gray-400);
+ color: var(--Gray-100);
+ font-size: 2rem;
+ font-weight: 600;
+ cursor: pointer;
+ transition: background-color 0.2s;
+}
+
+.signup__submit:hover {
+ background-color: var(--Primary-100);
+}
+
+.social-login {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ padding: 1.6rem 2.3rem;
+ margin: 2.4rem 0;
+ background-color: #e6f2ff;
+ border-radius: 0.8rem;
+ color: var(--Gray-800);
+}
+
+.social-login__header {
+ font-size: 1.6rem;
+ font-weight: 500;
+}
+
+.social-login ul {
+ display: flex;
+ gap: 1.6rem;
+}
+
+.social-button {
+ width: 4.2rem;
+ height: 4.2rem;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ border-radius: 50%;
+}
+
+.social-button--kakao {
+ background-color: #f5e14b;
+}
+
+.social-button--google {
+ background-color: #fff;
+}
+
+.login-link {
+ text-align: center;
+}
+
+.login-link__text {
+ font-size: 1.4rem;
+ font-weight: 500;
+ color: var(--Gray-800);
+}
+
+.login-link__text a {
+ margin-left: 0.4rem;
+ color: var(--Primary-100);
+ border-bottom: 1px solid var(--Primary-100);
+}
diff --git a/index.html b/index.html
index d4d6c734..ee2a1604 100644
--- a/index.html
+++ b/index.html
@@ -4,14 +4,7 @@
판다마켓
-
-
+
@@ -22,7 +15,7 @@
- 로그인
+ 로그인
@@ -34,7 +27,7 @@ 일상의 모든 물건을 거래해 보세요
@@ -44,7 +37,7 @@ 일상의 모든 물건을 거래해 보세요
@@ -64,7 +57,7 @@
구매를 원하는 상품을 검색하세요
@@ -74,7 +67,7 @@ 구매를 원하는 상품을 검색하세요
+ 
+ 
diff --git a/pages/login.html b/pages/login.html
new file mode 100644
index 00000000..d140f5ce
--- /dev/null
+++ b/pages/login.html
@@ -0,0 +1,89 @@
+
+
+
+
+
+
+
+ 
+
+