codeit-bootcamp-frontend · GANGYIKIM · Mar 20, 2025 · Mar 10, 2025 · Mar 10, 2025 · Mar 10, 2025
diff --git a/images/Img_home_01.png b/images/Img_home_01.png
diff --git a/images/Img_home_02.png b/images/Img_home_02.png
diff --git a/images/Img_home_03.png b/images/Img_home_03.png
diff --git a/images/Img_home_bottom.png b/images/Img_home_bottom.png
diff --git a/images/Img_home_top.png b/images/Img_home_top.png
diff --git a/images/Property 1=sm.png b/images/Property 1=sm.png
diff --git a/images/Property [email protected] b/images/Property [email protected]
diff --git a/images/btn_visibility_off.png b/images/btn_visibility_off.png
diff --git a/images/btn_visibility_on.png b/images/btn_visibility_on.png
diff --git a/images/ic_facebook.png b/images/ic_facebook.png
diff --git a/images/ic_google.png b/images/ic_google.png
diff --git a/images/ic_instagram.png b/images/ic_instagram.png
diff --git a/images/ic_kakao.png b/images/ic_kakao.png
diff --git a/images/ic_twitter.png b/images/ic_twitter.png
diff --git a/images/ic_youtube.png b/images/ic_youtube.png
diff --git a/images/img_home_01.png b/images/img_home_01.png
diff --git a/images/img_home_02.png b/images/img_home_02.png
diff --git a/images/img_home_03.png b/images/img_home_03.png
diff --git a/images/img_home_bottom.png b/images/img_home_bottom.png
diff --git a/images/img_home_top.png b/images/img_home_top.png
diff --git a/images/logo_lg.png b/images/logo_lg.png
diff --git a/images/Property [email protected] → images/logo_sm.png b/images/Property [email protected] → images/logo_sm.png
diff --git a/style.css → index.css b/style.css → index.css
@@ -1,17 +1,5 @@
-* {
-  box-sizing: border-box;
-  font-family: Pretendard, sans-serif;
-  color: #374151;
-  font-size: 16px;
-}
-
-a {
-  text-decoration: none;
-  cursor: pointer;
-}
-
-p {
-  margin: 0;
+html {
+  color: var(--gray700);
 }
 
 body {
@@ -20,26 +8,36 @@ body {
 }
 
 header {
+  position: sticky;
+  top: 0;
+  left: 0;
+  right: 0;
   background-color: #FFFFFF;
   border-bottom: 1px solid #DDE0E3
 }
 
 footer {
-  background-color: #111827;
+  background-color: var(--gray900);
   height: 10rem;
 }
 
 .gnb {
-  padding: 9px 400px;
   display: flex;
   justify-content: space-between;
   align-items: center;
+  padding: 9px 400px;
 }
 
 .gnb img {
   max-width: 10rem;
 }
 
+.btn-login {
+  width: 8rem;
+  height: 3rem;
+  text-align: center;
+}
+
 .wrap {
   max-width: 1920px;
   width: 100%;
@@ -143,35 +141,12 @@ footer {
   gap: 0.75rem;
 }
 
-.btn-large, .btn-login {
-  background-color: #3692FF;
-}
-
-.btn-large:hover, .btn-login:hover {
-  background-color: #1967D6;
-}
-
-.btn-large:active, .btn-login:active {
-  background-color: #1251AA;
-}
-
-.btn-login {
-  color: #F3F4F6;
-  width: 8rem;
-  height: 3rem;
-  padding: 0.75rem 1.5rem;
-  border-radius: 8px;
-  text-align: center;
-}
-
-.btn-large {
-  color: #F9FAFB;
-  padding: 1rem 7.75rem;
-  border-radius: 40px;
+.sns img{
+  max-width: 1.25rem;
 }
 
 .keyword {
-  color: #3692FF;
+  color: var(--blue);
   margin-bottom: 0.75rem;
 }
 
@@ -181,45 +156,11 @@ footer {
 }
 
 .copyright {
-  color: #9CA3AF;
+  color: var(--gray400);
 }
 
 .faq a {
-  color: #E5E7EB;
-}
-
-.bold {
-  font-weight: 700;
-}
-
-.semibold {
-  font-weight: 600;
-}
-
-.medium {
-  font-weight: 500;
-}
-
-.text-4xl {
-  font-size: 2.5rem;
-  line-height: 3.5rem;
-  letter-spacing: -0.125rem;
-}
-
-.text-2xl {
-  font-size: 1.5rem;
-  line-height: 2rem;
-  letter-spacing: -0.0625rem;
-}
-
-.text-xl {
-  font-size: 1.25rem;
-  line-height: 2rem;
-}
-
-.text-2lg {
-  font-size: 1.125rem;
-  line-height: 1.625rem;
+  color: var(--gray200);
 }
 
 @media (max-width:1920px) {
@@ -229,7 +170,7 @@ footer {
 }
 
 @media (max-width:1280px) {
-  * {
+  html {
     font-size: 12px;
   }
 }
diff --git a/index.html b/index.html
@@ -4,15 +4,17 @@
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>판다마켓</title>
-  <link rel="stylesheet" href="style.css">
+  <link rel="stylesheet" href="reset.css">
+  <link rel="stylesheet" href="utility.css">
+  <link rel="stylesheet" href="index.css">
 </head>
 <body>
   <header>
     <div class="gnb wrap">
       <a href="/" class="logo">
-        <img src="./images/Property 1=sm.png" alt="판다마켓 로고">
+        <img src="./images/logo_sm.png" alt="판다마켓">
       </a>
-      <a href="/login" class="btn-login Text-lg semibold">로그인</a>
+      <a href="/login.html" class="btn-login btn-small Text-lg semibold">로그인</a>
     </div>
   </header>
 
@@ -21,19 +23,19 @@
       <div class="home-top wrap">
         <div class="home-top-content">
           <p class="text-4xl bold">
-            일상의 모든 물건을 <br>
+            일상의 모든 물건을<br>
             거래해 보세요
           </p>
-          <a href="/items" class="btn-large text-xl semibold">구경하러 가기</a>
+          <a href="/items.html" class="btn-large text-xl semibold">구경하러 가기</a>
         </div>
-        <img src="./images/Img_home_top.png" alt="판다 이미지">
+        <img src="./images/img_home_top.png" alt="판다 이미지">
       </div>
     </section>
 
     <section class="home-section">
       <div class="home">
         <div class="home-content">
-          <img src="./images/Img_home_01.png" alt="인기 상품">
+          <img src="./images/img_home_01.png" alt="인기 상품">
           <div class="home-content-1">
             <p class="keyword text-2lg bold">
               Hot item
@@ -64,12 +66,12 @@
               쉽게 찾아보세요
             </p>
           </div>
-          <img src="./images/Img_home_02.png" alt="상품 검색">
+          <img src="./images/img_home_02.png" alt="상품 검색">
         </div>
       </div>
       <div class="home">
         <div class="home-content">
-          <img src="./images/Img_home_03.png" alt="상품 등록">
+          <img src="./images/img_home_03.png" alt="상품 등록">
           <div class="home-content-3">
             <p class="keyword text-2lg bold">
               Register
@@ -91,11 +93,11 @@
       <div class="home-bottom wrap">
         <div class="home-bottom-content">
           <p class="text-4xl bold">
-            믿을 수 있는 <br>
+            믿을 수 있는<br>
             판다마켓 중고 거래
           </p>
         </div>
-        <img src="./images/Img_home_bottom.png" alt="판다 이미지">
+        <img src="./images/img_home_bottom.png" alt="판다 이미지">
       </div>
     </section>
   </main>
@@ -104,23 +106,31 @@
     <div class="footer-content wrap">
       <p class="copyright">@codeit - 2024</p>
       <div class="faq"> 
-        <a href="/privacy">Privacy Policy</a>
-        <a href="/faq">FAQ</a>
-      </div>
-      <div class="sns">
-        <a href="https://facebook.com" target="_blank">
-          <img src="./images/ic_facebook.png" alt="페이스북">
-        </a>
-        <a href="https://twitter.com" target="_blank">
-          <img src="./images/ic_twitter.png" alt="트위터">
-        </a>
-        <a href="https://youtube.com" target="_blank">
-          <img src="./images/ic_youtube.png" alt="유튜브">
-        </a>
-        <a href="https://instagram.com" target="_blank">
-          <img src="./images/ic_instagram.png" alt="인스타그램">
-        </a>
+        <a href="/privacy.html">Privacy Policy</a>
+        <a href="/faq.html">FAQ</a>
       </div>
+      <ul class="sns">
+        <li>
+          <a href="https://facebook.com" target="_blank">
+            <img src="./images/ic_facebook.png" alt="페이스북">
+          </a>
+        </li>
+        <li>
+          <a href="https://twitter.com" target="_blank">
+            <img src="./images/ic_twitter.png" alt="트위터">
+          </a>
+        </li>
+        <li>
+          <a href="https://youtube.com" target="_blank">
+            <img src="./images/ic_youtube.png" alt="유튜브">
+          </a>
+        </li>
+        <li>
+          <a href="https://instagram.com" target="_blank">
+            <img src="./images/ic_instagram.png" alt="인스타그램">
+          </a>
+        </li>
+      <ul/>
     </div>
   </footer>
 </body>

diff --git a/login.css b/login.css
@@ -0,0 +1,80 @@
+html {
+  color: var(--gray800);
+}
+
+.wrap {
+  max-width: 640px;
+  width: 100%;
+  margin: 0 auto;
+}
+
+.logo {
+  margin-top: 240px;
+}
+
+.logo a{
+  display: flex;
+  justify-content: center;
+}
+
+.logo img  {
+  width: 60%;
+}
+
+.login-form{
+  display: flex;
+  flex-direction: column;
+  gap: 24px;
+  margin-top: 40px;
+}
+
+.input-group{
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+  position: relative;
+}
+
+.input-group input{
+  padding: 16px 24px;
+  background-color: var(--gray100);
+  border-width: 0;
+  border-radius: 12px;
+}
+
+.input-group img {
+  position: absolute;
+  right: 24px;
+  bottom: 16px;
+  width: 24px;
+}
+
+.simple-login{
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 16px 23px;
+  border-radius: 8px;
+  margin-top: 24px;
+  background-color: #E6F2FF;
+}
+
+.simple-login ul{
+  display: flex;
+  gap: 16px;
+}
+
+.simple-login ul li img{
+  width: 42px;
+}
+
+.to-signup{
+  display: flex;
+  justify-content: center;
+  gap: 4px;
+  margin-top: 24px;
+}
+
+.to-signup a {
+  text-decoration: underline;
+}