codeit-bootcamp-frontend · dongqui · May 15, 2025 · May 14, 2025 · May 14, 2025 · May 14, 2025
diff --git a/images/home/bottom-banner-image.png b/images/home/bottom-banner-image.png
diff --git a/images/logo/no-panda-logo.png b/images/logo/no-panda-logo.png
diff --git a/images/social/panda-maket-share.png b/images/social/panda-maket-share.png
diff --git a/index.html b/index.html
@@ -13,6 +13,20 @@
     />
     <link rel="stylesheet" href="styles/global.css" />
     <link rel="stylesheet" href="styles/homepage/home.css" />
+
+    <meta property="og:title" content="판다 마켓" />
+    <meta property="og:description" content="일상의 모든 물건을 거래해보세요" />
+    <meta property="og:image" content="images/social/panda-maket-share.png" />
+    <meta property="og:url" content="https://sprint-mission-ktw.netlify.app/" />
+    <meta property="og:type" content="website" />
+
+    <meta name="twitter:card" content="summary_large_image" />
+    <meta name="twitter:title" content="판다 마켓" />
+    <meta
+      name="twitter:description"
+      content="일상의 모든 물건을 거래해보세요"
+    />
+    <meta name="twitter:image" content="images/social/panda-maket-share.png" />
   </head>
 
   <body>
@@ -22,17 +36,27 @@
           src="images/logo/panda-market-logo.png"
           alt="판다마켓 홈"
           width="153"
+          class="responsive-img"
       /></a>
-      <a href="login.html" id="loginLinkButton" class="button">로그인</a>
+      <a href="login.html" id="login-Link-Button" class="button">로그인</a>
     </header>
+
     <main>
-      <section id="hero" class="banner">
-        <div class="wrapper">
-          <h1>
-            일상의 모든 물건을<br />
-            거래해 보세요
-          </h1>
-          <a href="items.html" class="button pill-button">구경하러 가기</a>
+      <section class="banner">
+        <div class="top-wrapper">
+          <div id="top-banner-text">
+            <h1>
+              일상의 모든 물건을<br />
+              거래해 보세요
+            </h1>
+            <a href="items.html" class="button pill-button">구경하러 가기</a>
+          </div>
+          <img
+            src="images/home/hero-image.png"
+            width="746px"
+            height="340px"
+            id="hero-banner"
+          />
         </div>
       </section>
 
@@ -51,6 +75,7 @@ <h1>인기 상품을<br />확인해 보세요</h1>
             </p>
           </div>
         </div>
+
         <div class="feature">
           <div class="feature-content">
             <h2 class="feature-tag">Search</h2>
@@ -66,6 +91,7 @@ <h1>구매를 원하는<br />상품을 검색하세요</h1>
             width="50%"
           />
         </div>
+
         <div class="feature">
           <img
             src="images/home/feature3-image.png"
@@ -83,24 +109,34 @@ <h1>판매를 원하는<br />상품을 등록하세요</h1>
         </div>
       </section>
 
-      <section id="bottomBanner" class="banner">
-        <div class="wrapper">
-          <h1>
-            믿을 수 있는
-            <br />
-            판다마켓 중고거래
-          </h1>
+      <section class="bottom-banner">
+        <div class="bottom-wrapper">
+          <div id="bottom-text">
+            <h1>
+              믿을 수 있는
+              <br />
+              판다마켓 중고거래
+            </h1>
+          </div>
+          <img
+            src="/images/home/bottom-banner-image.png"
+            alt="바텀배너이미지"
+            width="746px"
+            height="397px"
+            id="bottom-Banner-img"
+          />
         </div>
       </section>
     </main>
 
     <footer>
-      <div>©codeit - 2024</div>
-      <div id="footerMenu">
+      <div id="footer-codeit">©codeit - 2024</div>
+      <div id="footer-Menu">
         <a href="privacy.html">Privacy Policy</a>
         <a href="faq.html">FAQ</a>
       </div>
-      <div id="socialMedia">
+
+      <div id="social-Media">
         <a
           href="https://www.facebook.com/"
           target="_blank"

diff --git a/signup.html b/signup.html
@@ -1,78 +1,90 @@
 <!DOCTYPE html>
 <html lang="ko">
+  <!-- 헤더 부분 -->
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>판다마켓 회원가입</title>
     <link rel="icon" href="images/logo/favicon.ico" />
     <link
       rel="stylesheet"
-      as="style"
       crossorigin
       href="https://cdn.jsdelivr.net/gh/orioncactus/[email protected]/dist/web/static/pretendard.min.css"
     />
     <link rel="stylesheet" href="styles/global.css" />
     <link rel="stylesheet" href="styles/signup&loginpage/signup.css" />
   </head>
+  <!-- 헤더 부분 -->
+  <!-- 바디부분 -->
   <body>
-    <div class="signuppage">
+    <div class="signup-page">
       <a href="index.html">
         <img
           src="./images/logo/panda-market-logo.png"
           alt="panda-market-logo"
-          id="mainlogo"
+          id="main-logo"
         />
       </a>
-      <section class="signupsection">
-        <div class="signupbox">
-          <label class="signuplabel"> 이메일 </label>
-          <input class="logininput" alt="email" />
+      <section class="signup-section">
+        <div class="signup-box">
+          <label class="signup-label"> 이메일 </label>
+          <input
+            class="login-input"
+            alt="email"
+            placeholder="이메일을 입력해주세요"
+          />
         </div>
 
-        <div class="signupbox">
-          <label class="signuplabel"> 닉네임 </label>
-          <input class="logininput" alt="nickname" />
+        <div class="signup-box">
+          <label class="signup-label"> 닉네임 </label>
+          <input
+            class="login-input"
+            alt="nickname"
+            placeholder="닉네임을 입력해주세요"
+          />
         </div>
 
-        <div class="signupbox">
-          <label class="signuplabel"> 비밀번호 </label>
+        <div class="signup-box">
+          <label class="signup-label"> 비밀번호 </label>
           <div class="password-wrapper">
             <input
-              class="logininput"
-              id="passwardinput"
+              placeholder="비밀번호를 입력해주세요"
+              class="login-input"
+              id="passward-input"
               type="password"
               alt="passward"
             />
             <img
               src="./images/anyicons/passwardcancel.svg"
               alt="비밀번호 보기 토글"
-              id="togglePassword"
+              id="toggle-Password"
             />
           </div>
         </div>
 
-        <div class="signupbox">
-          <label class="signuplabel"> 비밀번호 확인 </label>
+        <div class="signup-box">
+          <label class="signup-label"> 비밀번호 확인 </label>
           <div class="password-wrapper">
             <input
-              class="logininput"
-              id="passwardinput"
+              placeholder="비밀번호를 다시 한 번 입력해주세요"
+              class="login-input"
+              id="passward-input"
               type="password"
               alt="passward"
             />
             <img
               src="./images/anyicons/passwardcancel.svg"
               alt="비밀번호 보기 토글"
-              id="togglePassword"
+              id="toggle-Password"
             />
           </div>
         </div>
 
-        <button id="signupbutton" class="button pill-button">회원가입</button>
+        <button id="signup-button" class="button pill-button">회원가입</button>
 
-        <section class="socialloginsection">
-          <div id="sociallogintext">간편 로그인하기</div>
-          <div id="socialloginicon">
+        <section class="social-login-section">
+          <div id="social-login-text">간편 로그인하기</div>
+          <div id="social-login-icon">
             <a href="https://www.google.co.kr/">
               <img src="./images/social/google-logo.png" alt="googleicon" />
             </a>
@@ -82,11 +94,12 @@
           </div>
         </section>
 
-        <div id="gologin">
+        <div id="go-login">
           이미 회원이신가요?
-          <a id="loginlink" href="login.html">로그인</a>
+          <a id="login-link" href="login.html">로그인</a>
         </div>
       </section>
     </div>
   </body>
+  <!-- 바디부분 -->
 </html>
diff --git a/styles/global.css b/styles/global.css
@@ -28,28 +28,6 @@ body {
   font-family: "Pretendard", sans-serif;
 }
 
-header {
-  position: fixed;
-  width: 100%;
-  height: 70px;
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  padding: 0 200px;
-  background-color: #ffffff;
-  border-bottom: 1px solid #dfdfdf;
-}
-
-footer {
-  background-color: #111827;
-  color: #9ca3af;
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  padding: 32px 200px 108px 200px;
-  font-size: 16px;
-}
-
 #footerMenu {
   display: flex;
   gap: 30px;