[이수지] sprint2

.gitignore

@@ -0,0 +1 @@
+.vscode/settings.json

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;
+}

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');
-}

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);
+}

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;
 }