diff --git a/README.md b/README.md
index 4f341277d..e246ca6f9 100644
--- a/README.md
+++ b/README.md
@@ -1 +1,6 @@
 # Troubleshooting
+
+# Tools
+
+- Text Editor : VS Code
+- Formatting : Prettier
\ No newline at end of file
diff --git a/index.html b/index.html
index a649b6182..f756ac2e3 100644
--- a/index.html
+++ b/index.html
@@ -3,6 +3,11 @@
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <!-- Open Graph 메타 태그 -->
+    <meta property="og:image" content="img/Img_home_03.png" />
+    <meta property="og:title" content="판다 마켓" />
+    <meta property="og:description" content="일상의 모든 물건을 거래해보세요" />
+    <meta property="og:url" content="https://tokyun02.github.io/" />
     <title>판다마켓</title>
     <link rel="icon" href="img/favicon.svg" type="image/svg" />
     <link rel="preconnect" href="https://fonts.googleapis.com" />
@@ -21,10 +26,7 @@
   <body>
     <header class="top-navigation">
       <a href="./index.html"
-        ><img
-          src="img/logo.png"
-          alt="이미지를 생성하지 못했습니다."
-          class="logo"
+        ><img src="img/logo.png" alt="logo img 생성 불가" class="logo"
       /></a>
       <a class="login" href="login.html">로그인</a>
     </header>
@@ -32,16 +34,16 @@
     <main>
       <section class="banner top-banner">
         <div class="banner-explain">
-          <h1></h1>
+          <h1>판다마켓을 소개합니다.</h1>
           <h2>
-            일상의 모든 물건을<br />
+            일상의 모든 물건을<br class="top-banner-title-next-line" />
             거래해 보세요
           </h2>
           <a class="browsing" href="items.html">구경하러 가기</a>
         </div>
         <img
           src="img/Img_home_top.png"
-          alt="이미지를 생성하지 못했습니다."
+          alt="top banner img 생성 불가"
           class="top-banner-img"
         />
       </section>
@@ -49,13 +51,13 @@ <h2>
       <section class="home-main-section">
         <img
           src="img/img_home_01.png"
-          alt="이미지를 생성하지 못했습니다."
+          alt="section1 img 생성 불가"
           class="section-img"
         />
         <div class="section-explain">
           <span class="keyword">Hot item</span>
-          <h2>
-            인기 상품을<br />
+          <h2 class="section-title">
+            인기 상품을<br class="section-title-next-line" />
             확인해 보세요
           </h2>
           <p>
@@ -68,8 +70,8 @@ <h2>
       <section class="home-main-section">
         <div class="section-explain">
           <span class="keyword">Search</span>
-          <h2>
-            구매를 원하는<br />
+          <h2 class="section-title">
+            구매를 원하는<br class="section-title-next-line" />
             상품을 검색하세요
           </h2>
           <p>
@@ -78,22 +80,22 @@ <h2>
           </p>
         </div>
         <img
-          src="img/img_home_02.png"
-          alt="이미지를 생성하지 못했습니다."
+          src="img/Img_home_02.png"
+          alt="section2 img 생성 불가"
           class="section-img"
         />
       </section>
 
       <section class="home-main-section">
         <img
-          src="img/img_home_03.png"
-          alt="이미지를 생성하지 못했습니다."
+          src="img/Img_home_03.png"
+          alt="section3 img 생성 불가"
           class="section-img"
         />
         <div class="section-explain">
           <span class="keyword">Register</span>
-          <h2>
-            판매를 원하는<br />
+          <h2 class="section-title">
+            판매를 원하는<br class="section-title-next-line" />
             상품을 등록하세요
           </h2>
           <p>
@@ -112,8 +114,8 @@ <h2>
         </div>
 
         <img
-          src="img/img_home_bottom.png"
-          alt="이미지를 생성하지 못했습니다."
+          src="img/Img_home_bottom.png"
+          alt="bottom banner img 생성 불가"
           class="bottom-banner-img"
         />
       </section>
@@ -132,34 +134,34 @@ <h2>
 
       <ul class="social-list">
         <li class="social-list-item">
-          <a href="https://www.facebook.com" target="_blank"
+          <a href="https://www.facebook.com" target="_blank" rel="noreferrer"
             ><img
               src="img/ic_facebook.png"
-              alt="이미지를 생성하지 못했습니다."
+              alt="facebook img 생성 불가"
               class="social-img"
           /></a>
         </li>
         <li class="social-list-item">
-          <a href="https://www.x.com" target="_blank"
+          <a href="https://www.x.com" target="_blank" rel="noreferrer"
             ><img
               src="img/ic_twitter.png"
-              alt="이미지를 생성하지 못했습니다."
+              alt="twitter img 생성 불가"
               class="social-img"
           /></a>
         </li>
         <li class="social-list-item">
-          <a href="https://www.youtube.com" target="_blank"
+          <a href="https://www.youtube.com" target="_blank" rel="noreferrer"
             ><img
               src="img/ic_youtube.png"
-              alt="이미지를 생성하지 못했습니다."
+              alt="youtube img 생성 불가"
               class="social-img"
           /></a>
         </li>
         <li class="social-list-item">
-          <a href="https://www.instagram.com" target="_blank"
+          <a href="https://www.instagram.com" target="_blank" rel="noreferrer"
             ><img
               src="img/ic_instagram.png"
-              alt="이미지를 생성하지 못했습니다."
+              alt="instagram img 생성 불가"
               class="social-img"
           /></a>
         </li>
diff --git a/login.html b/login.html
index 2daff2f6f..fcb33b0bc 100644
--- a/login.html
+++ b/login.html
@@ -3,8 +3,10 @@
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+
     <title>판다마켓</title>
     <link rel="icon" href="img/favicon.svg" type="image/svg" />
+
     <link rel="preconnect" href="https://fonts.googleapis.com" />
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
     <link
@@ -20,44 +22,50 @@
   <body>
     <header>
       <a href="./index.html"
-        ><img
-          src="img/logo.png"
-          alt="이미지를 생성하지 못했습니다."
-          class="logo"
+        ><img src="img/logo.png" alt="logo img 생성불가" class="logo"
       /></a>
     </header>
     <main>
       <form class="login-info">
         <label for="email" class="email">이메일</label>
         <div class="input-id">
-          <input type="email" id="email" placeholder="이메일을 입력해주세요" />
+          <input
+            type="email"
+            name="email"
+            id="email"
+            placeholder="이메일을 입력해주세요"
+          />
         </div>
 
         <label for="password" class="password">비밀번호</label>
         <div class="input-password">
           <input
             type="password"
+            name="password"
             id="password"
             placeholder="비밀번호를 입력해주세요"
           />
           <img
             src="img/img_closed_eye.png"
-            alt="이미지를 생성하지 못했습니다."
+            alt="closed_eye img 생성불가"
             class="toggle-password"
           />
         </div>
 
-        <button class="login-btn">로그인</button>
+        <button type="submit" class="login-btn">로그인</button>
       </form>
 
       <nav class="simple-login">
-        <span>간편 로그인하기</span>
+        <p class="simple-login-text">간편 로그인하기</p>
         <div class="login-list">
-          <a href="https://www.google.com/" target="_blank"
-            ><img src="img/ic_google.png" alt="이미지를 생성하지 못했습니다."
+          <a href="https://www.google.com/" target="_blank" rel="noreferrer"
+            ><img src="img/ic_google.png" alt="google img 생성불가"
           /></a>
-          <a href="https://www.kakaocorp.com/page/" target="_blank"
-            ><img src="img/ic_kakao.png" alt="이미지를 생성하지 못했습니다."
+          <a
+            href="https://www.kakaocorp.com/page/"
+            target="_blank"
+            rel="noreferrer"
+            ><img src="img/ic_kakao.png" alt="kakao img 생성불가"
           /></a>
         </div>
       </nav>
diff --git a/signup.html b/signup.html
index cf960bafd..b1786ae5c 100644
--- a/signup.html
+++ b/signup.html
@@ -20,22 +20,25 @@
   <body>
     <header>
       <a href="./index.html"
-        ><img
-          src="img/logo.png"
-          alt="이미지를 생성하지 못했습니다."
-          class="logo"
+        ><img src="img/logo.png" alt="logo img 생성불가" class="logo"
       /></a>
     </header>
     <main>
       <form class="login-info">
         <label for="email" class="email">이메일</label>
         <div class="input-id">
-          <input type="email" id="email" placeholder="이메일을 입력해주세요" />
+          <input
+            type="email"
+            name="email"
+            id="email"
+            placeholder="이메일을 입력해주세요"
+          />
         </div>
         <label for="nickname" class="nickname">닉네임</label>
         <div class="input-nickname">
           <input
             type="text"
+            name="nickname"
             id="nickname"
             placeholder="닉네임을 입력해주세요"
           />
@@ -45,12 +48,13 @@
         <div class="input-password">
           <input
             type="password"
+            name="password"
             id="password"
             placeholder="비밀번호를 입력해주세요"
           />
           <img
             src="img/img_closed_eye.png"
-            alt="이미지를 생성하지 못했습니다."
+            alt="closed_eye img 생성불가"
             class="toggle-password"
           />
         </div>
@@ -58,27 +62,31 @@
         <div class="input-password-confirm">
           <input
             type="password"
+            name="password-confirm"
             id="password-confirm"
             placeholder="비밀번호를 다시 한 번 입력해주세요"
           />
           <img
             src="img/img_closed_eye.png"
-            alt="이미지를 생성하지 못했습니다."
+            alt="closed_eye img 생성불가"
             class="toggle-password"
           />
         </div>
 
-        <button class="login-btn">회원가입</button>
+        <button type="submit" class="login-btn register-btn">회원가입</button>
       </form>
 
       <nav class="simple-login">
-        <span>간편 로그인하기</span>
+        <p class="simple-login-text">간편 로그인하기</p>
         <div class="login-list">
-          <a href="https://www.google.com/" target="_blank"
-            ><img src="img/ic_google.png" alt="이미지를 생성하지 못했습니다."
+          <a href="https://www.google.com/" target="_blank" rel="noreferrer"
+            ><img src="img/ic_google.png" alt="google img 생성불가"
           /></a>
-          <a href="https://www.kakaocorp.com/page/" target="_blank"
-            ><img src="img/ic_kakao.png" alt="이미지를 생성하지 못했습니다."
+          <a
+            href="https://www.kakaocorp.com/page/"
+            target="_blank"
+            rel="noreferrer"
+            ><img src="img/ic_kakao.png" alt="kakao img 생성불가"
           /></a>
         </div>
       </nav>
diff --git a/style/account.css b/style/account.css
index a5932a5c6..eb38c4cd7 100644
--- a/style/account.css
+++ b/style/account.css
@@ -16,11 +16,12 @@
 }
 
 body {
+  width: 100vw;
   font-family: "Noto Sans KR", sans-serif;
 }
 
 header {
-  margin-top: 80px;
+  margin-top: 40px;
 }
 
 header,
@@ -130,33 +131,47 @@ input::placeholder {
   background-color: #e6f2ff;
 }
 
-@media (max-width: 700px) {
-  div,
-  input,
-  main {
-    width: 300px;
-  }
-  form {
+/* tablet_size*/
+@media (max-width: 1199px) {
+  /* 현재까진 타블렛과 pc의 요소 사이즈를 동일하게 설계함 */
+}
+/* mobile_size */
+@media (max-width: 767px) {
+  header,
+  main,
+  footer {
+    max-width: 400px;
+    padding-left: 16px;
+    padding-right: 16px;
     margin: 0 auto;
+    width: 100vw;
   }
-  .logo {
-    width: 200px;
-    height: 80px;
+  form,
+  label,
+  input,
+  nav,
+  .login-btn,
+  .register-btn {
+    max-width: calc(400px - 32px);
+    width: 90vw;
   }
   label {
-    width: 140px;
-    padding-left: 20px;
+    font-size: 14px;
   }
-
-  .login-btn {
-    padding: 8px 0;
+  .logo {
+    max-width: calc(400px - 32px);
+    width: 50vw;
+    margin-top: 5vw;
+  }
+  .login-btn,
+  .register-btn {
     font-size: 16px;
+    padding: 10px 0;
   }
-  .simple-login {
-    text-align: right;
+  .simple-login-text {
+    flex-shrink: 0;
   }
   .login-list {
-    flex-grow: 1;
-    width: 90px;
+    text-align: right;
   }
-}
+}
\ No newline at end of file
diff --git a/style/app.css b/style/app.css
index 695f65705..bb457c064 100644
--- a/style/app.css
+++ b/style/app.css
@@ -184,7 +184,7 @@ footer {
 .privacy {
   padding-right: 16px;
 }
-
+/* wide_screen_monitor(1200px~1920px)*/
 @media (max-width: 1920px) {
   .top-navigation {
     justify-content: space-between;
@@ -192,112 +192,132 @@ footer {
     padding-right: 200px;
   }
 }
-
-@media (max-width: 1200px) {
+/* Tablet_screen */
+@media (max-width: 1199px) {
   h2 {
-    font-size: 24px;
+    width: 100%;
+    font-size: 40px;
     font-weight: 700;
-    line-height: 28px;
-  }
-  .top-banner-img,
-  .bottom-banner-img,
-  .section-img {
-    width: 360px;
-    height: 180px;
-  }
-
-  .banner {
-    padding-top: 30px;
-  }
-  .section-img {
-    width: 280px;
-    height: 200px;
-  }
-  .browsing {
-    width: 180px;
-    height: 40px;
-    margin: 16px 0;
-    padding: 8px 40px;
-    font-size: 16px;
+    line-height: 40px;
+    text-align: center;
   }
   p {
     font-size: 14px;
     font-weight: 500;
     line-height: 24px;
   }
-  .home-main-section {
-    padding-bottom: 0;
-  }
 
-  .bottom-banner {
-    margin-top: 136px;
-  }
-  footer {
-    font-size: 4px;
-  }
-}
-
-@media (max-width: 760px) {
   .top-navigation {
-    padding-right: 50px;
-    padding-left: 50px;
+    margin: 0;
+    padding: 16px 24px;
   }
-}
 
-@media (max-width: 576px) {
-  .top-navigation {
-    padding-right: 16px;
-    padding-left: 16px;
-  }
-  .logo {
-    width: 96px;
-    height: 32px;
+  .banner {
+    flex-direction: column;
+    padding: 30px 0 0;
   }
-  .login {
-    padding: 8px 18px;
-    font-size: 12px;
+  .banner-explain {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
   }
-  .bottom-banner-img,
-  .top-banner-img {
-    width: 160px;
-    height: 80px;
+
+  .top-banner-img,
+  .bottom-banner-img {
+    margin-top: 10vw;
+    width: 100%;
+    height: 60%;
   }
-  h2 {
-    margin: 0;
-    font-size: 14px;
-    line-height: 20px;
+
+  .top-banner-title-next-line,
+  .section-title-next-line {
+    display: none;
   }
 
-  .browsing {
-    width: 80px;
-    height: 24px;
-    padding: 6px 10px;
-    font-size: 8px;
+  .bottom-banner {
+    margin-top: 0;
+    padding-top: 40px;
   }
+
   .home-main-section {
     flex-direction: column;
-    padding-top: 60px;
+    align-items: flex-start;
+    margin: 0;
+    padding: 16px 24px;
+    width: 100%;
   }
-  .home-main-section:nth-of-type(2),
-  .home-main-section:nth-of-type(4) {
+  .home-main-section:nth-of-type(3) {
     flex-direction: column-reverse;
-    padding-left: 20px;
+    align-items: flex-end;
+  }
+  .home-main-section h2 {
+    margin: 16px 0;
+    text-align: left;
+  }
+  .home-main-section:nth-of-type(3) h2 {
+    text-align: right;
+  }
+  .home-main-section:nth-of-type(3) .section-explain {
+    padding: 0;
+  }
+  .section-img {
+    width: 100%;
+    height: 70vw;
+  }
+  .section-title {
+    font-size: 32px;
   }
 
-  .home-main-section:nth-of-type(3) {
-    padding-right: 20px;
+  .browsing {
+    font-size: 16px;
   }
 
-  .bottom-banner {
-    margin-top: 60px;
+  .keyword {
+    margin-top: 16px;
+  }
+}
+/* mobile_size */
+@media (max-width: 767px) {
+  h1 {
+    margin: 0;
+    height: 0;
+  }
+  h2 {
+    font-size: 32px;
+  }
+  p {
+    margin: 0 0 40px;
   }
   footer {
-    flex-direction: column;
-    padding-bottom: 40px;
+    flex-wrap: wrap;
+    justify-content: space-between;
+    align-items: center;
+    padding: 32px;
+    gap: 60px;
+  }
+  .top-navigation {
+    padding: 16px;
   }
 
-  .support-text,
+  .top-banner-title-next-line {
+    display: inline;
+  }
+
+  .browsing {
+    padding: 16px 32px;
+    width: 50%;
+  }
+  .home-main-section {
+    padding: 16px;
+  }
+  .section-title {
+    font-size: 22px;
+  }
   .creater-info {
-    font-size: 8px;
+    flex-basis: 100%;
+    order: 3;
+  }
+  .social-list-item {
+    padding-right: 10px;
   }
 }
