codeit-bootcamp-frontend · addiescode-sj · Apr 11, 2025 · Apr 4, 2025 · Apr 4, 2025 · Apr 5, 2025
diff --git a/faq.html b/faq.html
@@ -4,6 +4,12 @@
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>판다마켓 FAQ</title>
+    <link
+      rel="icon"
+      type="image/png"
+      sizes="16x16"
+      href="images/favicon-16x16.png"
+    />
   </head>
   <body></body>
 </html>
diff --git a/images/Img_home_bottom_mb.png b/images/Img_home_bottom_mb.png
diff --git a/images/Img_home_top_mb.png b/images/Img_home_top_mb.png
diff --git a/images/favicon-16x16.png b/images/favicon-16x16.png
diff --git a/images/ic_google-44.png b/images/ic_google-44.png
diff --git a/images/ic_google-88.png b/images/ic_google-88.png
diff --git a/images/ic_kakao-44.png b/images/ic_kakao-44.png
diff --git a/images/ic_kakao-88.png b/images/ic_kakao-88.png
diff --git a/images/ic_visibility_off.svg b/images/ic_visibility_off.svg
diff --git a/images/ic_visibility_on.svg b/images/ic_visibility_on.svg
diff --git a/images/logo-396.png b/images/logo-396.png
diff --git a/index.html b/index.html
@@ -3,7 +3,29 @@
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta
+      name="description"
+      content="판다마켓으로 일상의 모든 것을 거래해보세요."
+    />
+    <meta property="og:title" content="판다마켓" />
+    <meta
+      property="og:description"
+      content="판다마켓으로 일상의 모든 것을 거래해보세요."
+    />
+    <meta property="og:image" content="images/logo-396.png" />
+    <meta name="twitter:card" content="images/logo-396.png" />
+    <meta name="twitter:title" content="판다마켓" />
+    <meta
+      name="twitter:description"
+      content="판다마켓으로 일상의 모든 것을 거래해보세요."
+    />
     <title>판다마켓</title>
+    <link
+      rel="icon"
+      type="image/png"
+      sizes="16x16"
+      href="images/favicon-16x16.png"
+    />
     <link
       rel="stylesheet"
       as="style"
@@ -13,121 +35,148 @@
     <link rel="stylesheet" href="styles/style.css" />
   </head>
   <body>
-    <header>
-      <div class="inner">
-        <a href="/" aria-label="판다마켓 홈으로 이동">
-          <picture>
-            <source srcset="images/logo-153.png" media="(min-width: 480px)" />
-            <img src="images/logo-100.png" alt="판다마켓 로고" />
-          </picture>
+    <header class="header">
+      <div class="header-container">
+        <a href="/" class="logo" aria-label="판다마켓 홈으로 이동">
+          <img src="images/logo-153.png" alt="판다마켓 로고" />
         </a>
         <a
           href="login.html"
           aria-label="로그인 페이지로 이동"
-          class="login-button btn btn-primary"
+          class="login-button btn-sm btn-primary"
           >로그인</a
         >
       </div>
     </header>
     <main class="content">
-      <div class="banner top" aria-label="상단 배너">
-        <div class="inner">
-          <div class="info">
-            <h2>일상의 모든 물건을<br />거래해 보세요</h2>
+      <div class="banner banner-hero" aria-label="상단 배너">
+        <div class="banner-container">
+          <div class="banner-info">
+            <h2 class="banner-title">일상의 모든 물건을<br />거래해 보세요</h2>
             <a
               href="items.html"
               aria-label="상품 페이지로 이동"
-              class="btn btn-primary"
+              class="btn-lg btn-primary"
               >구경하러 가기</a
             >
           </div>
+          <img
+            class="banner-img"
+            srcset="
+              images/Img_home_top_mb.png 448w,
+              images/Img_home_top.png    746w
+            "
+            sizes="
+              (min-width: 768px) 746px,
+              448px
+            "
+            src="images/Img_home_top.png"
+            alt="팬더가 파란 장바구니를 메고 마을 가운데에 서있는 일러스트"
+          />
         </div>
       </div>
-      <section class="section-hotitem" aria-label="인기 상품 확인">
-        <div class="inner">
+      <section class="section section-hotitem" aria-label="인기 상품 확인">
+        <div class="section-container">
           <img
             srcset="
               images/Img_home_01-344.png 344w,
               images/Img_home_01-696.png 696w
             "
             sizes="
-              (min-width: 960px) 580px,
+              (min-width: 768px) 580px,
               (min-width: 480px) 696px,
               344px
             "
             src="images/Img_home_01.png"
-            alt="두 마리의 팬더가 인기 상품인 초록색 티셔츠를 보고 있는 모습입니다."
+            alt="두 마리의 팬더가 인기 상품인 초록색 티셔츠를 보고 있는 일러스트"
           />
-          <div class="info">
-            <div class="info-label">Hot item</div>
-            <h2>인기 상품을<br />확인해 보세요</h2>
-            <p>
+          <div class="section-info">
+            <div class="section-label">Hot item</div>
+            <h2 class="section-title">인기 상품을<br />확인해 보세요</h2>
+            <p class="section-desc">
               가장 HOT한 중고거래 물품을<br />
               판다 마켓에서 확인해 보세요
             </p>
           </div>
         </div>
       </section>
-      <section class="section-search" aria-label="상품 검색">
-        <div class="inner">
+      <section class="section section-search" aria-label="상품 검색">
+        <div class="section-container">
           <img
             srcset="
               images/Img_home_02-344.png 344w,
               images/Img_home_02-696.png 696w
             "
             sizes="
-              (min-width: 960px) 580px,
+              (min-width: 768px) 580px,
               (min-width: 480px) 696px,
               344px
             "
             src="images/Img_home_02.png"
-            alt="돋보기로 상품들 중 가운데 상품을 확대해서 보는 모습입니다."
+            alt="돋보기로 상품들 중 가운데 상품을 확대해서 보는 일러스트"
           />
-          <div class="info">
-            <div class="info-label">Search</div>
-            <h2>
+          <div class="section-info">
+            <div class="section-label">Search</div>
+            <h2 class="section-title">
               구매를 원하는<br />
               상품을 검색하세요
             </h2>
-            <p>구매하고 싶은 물품은 검색해서<br />쉽게 찾아보세요</p>
+            <p class="section-desc">
+              구매하고 싶은 물품은 검색해서<br />쉽게 찾아보세요
+            </p>
           </div>
         </div>
       </section>
-      <section class="section-register" aria-label="상품 등록">
-        <div class="inner">
+      <section class="section section-register" aria-label="상품 등록">
+        <div class="section-container">
           <img
             srcset="
               images/Img_home_03-344.png 344w,
               images/Img_home_03-696.png 696w
             "
             sizes="
-              (min-width: 960px) 580px,
+              (min-width: 768px) 580px,
               (min-width: 480px) 696px,
               344px
             "
             src="images/Img_home_03.png"
-            alt="아래에 폴더들이 있고, 그 위에 마법봉으로 가운데의 연필꽂이, 공책, 하트 프레임 안경을 가리키는 모습입니다."
+            alt="아래에 폴더들이 있고, 그 위에 마법봉으로 가운데의 연필꽂이, 공책, 하트 프레임 안경을 가리키는 일러스트"
           />
-          <div class="info">
-            <div class="info-label">Register</div>
-            <h2>판매를 원하는<br />상품을 등록하세요</h2>
-            <p>어떤 물건이든 판매하고 싶은 상품을<br />쉽게 등록하세요</p>
+          <div class="section-info">
+            <div class="section-label">Register</div>
+            <h2 class="section-title">판매를 원하는<br />상품을 등록하세요</h2>
+            <p class="section-desc">
+              어떤 물건이든 판매하고 싶은 상품을<br />쉽게 등록하세요
+            </p>
           </div>
         </div>
       </section>
-      <div class="banner bottom" aria-label="하단 배너">
-        <div class="inner">
-          <div class="info">
-            <h2>
+      <div class="banner" aria-label="하단 배너">
+        <div class="banner-container">
+          <div class="banner-info">
+            <h2 class="banner-title">
               믿을 수 있는<br />
               판다마켓 중고 거래
             </h2>
           </div>
+          <img
+            class="banner-img"
+            srcset="
+              images/Img_home_bottom_mb.png 448w,
+              images/Img_home_bottom.png    746w
+            "
+            sizes="
+              (min-width: 768px) 746px,
+              448px
+            "
+            src="images/Img_home_bottom.png"
+            alt="팬더 두 마리가 파란 장바구니를 메고 서로 상품 후기를 주고받는 일러스트"
+          />
         </div>
       </div>
     </main>
-    <footer aria-label="하단 정보">
-      <div class="inner">
+    <footer class="footer" aria-label="하단 정보">
+      <div class="footer-container">
         <div class="copyright">©codeit - 2024</div>
         <div class="footer-menu">
           <a href="privacy.html" aria-label="개인정보처리방침"
@@ -140,27 +189,31 @@ <h2>
             href="https://www.facebook.com/?locale=ko_KR"
             target="_blank"
             aria-label="페이스북 열기"
+            rel="noopener noreferrer"
           >
             <img src="images/ic_facebook.png" alt="페이스북 아이콘" />
           </a>
           <a
             href="https://x.com/login?lang=ko"
             target="_blank"
             aria-label="트위터 열기"
+            rel="noopener noreferrer"
           >
             <img src="images/ic_twitter.png" alt="트위터 아이콘" />
           </a>
           <a
             href="https://www.youtube.com/?hl=ko&gl=KR&app=desktop"
             target="_blank"
             aria-label="유튜브 열기"
+            rel="noopener noreferrer"
           >
             <img src="images/ic_youtube.png" alt="유튜브 아이콘" />
           </a>
           <a
             href="https://www.instagram.com/"
             target="_blank"
             aria-label="인스타그램 열기"
+            rel="noopener noreferrer"
           >
             <img src="images/ic_instagram.png" alt="인스타그램 아이콘" />
           </a>

diff --git a/items.html b/items.html
@@ -4,6 +4,12 @@
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>판다마켓 items</title>
+    <link
+      rel="icon"
+      type="image/png"
+      sizes="16x16"
+      href="images/favicon-16x16.png"
+    />
   </head>
   <body></body>
 </html>
diff --git a/login.html b/login.html
@@ -4,6 +4,91 @@
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>판다마켓 로그인</title>
+    <link
+      rel="icon"
+      type="image/png"
+      sizes="16x16"
+      href="images/favicon-16x16.png"
+    />
+    <link
+      rel="stylesheet"
+      as="style"
+      crossorigin
+      href="https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/static/pretendard.min.css"
+    />
+    <link rel="stylesheet" href="styles/style.css" />
   </head>
-  <body></body>
+  <body>
+    <main>
+      <div class="form-container">
+        <form class="form" id="loginForm" method="POST">
+          <div class="form-logo">
+            <a href="/login.html" aria-label="새로고침">
+              <img src="images/logo-396.png" alt="판다마켓 로고" width="396" />
+            </a>
+          </div>
+          <div class="form-contents">
+            <div class="form-control">
+              <label class="form-label" for="userEmail">이메일</label>
+              <input
+                class="form-input"
+                type="email"
+                id="userEmail"
+                name="userEmail"
+                autocomplete="email"
+                placeholder="이메일"
+                required
+              />
+            </div>
+            <div class="form-control">
+              <label class="form-label" for="userPassword">비밀번호</label>
+              <div class="visible-wrap">
+                <input
+                  class="form-input"
+                  type="password"
+                  id="userPassword"
+                  name="userPassword"
+                  autocomplete="current-password"
+                  placeholder="비밀번호"
+                  required
+                />
+                <button
+                  type="button"
+                  class="btn-password-visible off"
+                  title="패스워드 표시/숨김"
+                ></button>
+              </div>
+            </div>
+            <button class="btn-lg btn-primary">로그인</button>
+            <div class="easy-login">
+              간편 로그인하기
+              <div class="easy-login-icons">
+                <a
+                  href="https://www.google.com"
+                  aria-label="구글 계정으로 로그인하기"
+                >
+                  <img src="images/ic_google-44.png" alt="구글 아이콘" />
+                </a>
+                <a
+                  href="https://www.kakaocorp.com/page"
+                  aria-label="카카오 계정으로 로그인하기"
+                >
+                  <img src="images/ic_kakao-44.png" alt="카카오 아이콘" />
+                </a>
+              </div>
+            </div>
+            <div class="form-footer">
+              판다마켓이 처음이신가요?
+              <a
+                class="form-footer-link"
+                href="signup.html"
+                aria-label="회원가입 페이지로 이동"
+                >회원가입</a
+              >
+            </div>
+          </div>
+        </form>
+      </div>
+    </main>
+  </body>
 </html>