diff --git a/.DS_Store b/.DS_Store
new file mode 100644
index 00000000..13c8a205
Binary files /dev/null and b/.DS_Store differ
diff --git a/style.css b/css/home.css
similarity index 70%
rename from style.css
rename to css/home.css
index 1b09ea80..b3a75448 100644
--- a/style.css
+++ b/css/home.css
@@ -1,32 +1,30 @@
-@import "reset.css";
-
 header {
-  height: 70;
+  position: sticky;
+  top: 0;
   gap: 10px;
-  padding-top: 9px;
-
-  padding-bottom: 9px;
-
-  border-bottom-width: 1px;
+  background-color: var(--content-bg);
+  border-bottom: 1px solid #dfdfdf;
 }
 
 .market {
+  height: var(--header-height);
   display: flex;
-  justify-content: space-around;
+  justify-content: space-between;
+  max-width: var(--desktop-width);
   align-items: center;
-  margin: 0;
+  margin: 0 200px;
 }
 
 .market-icon img {
   width: 153px;
   height: 51px;
-  margin-left: 200px;
 }
 
-.market-login img {
-  width: 128px;
-  height: 48px;
-  margin-right: 200px;
+.market-login {
+  font-size: 16px;
+  font-weight: 600;
+  border-radius: 8px;
+  padding: 11.5px 23px;
 }
 
 .link {
@@ -35,7 +33,7 @@ header {
   align-items: end;
   width: 100%;
   height: 540px;
-  background-color: rgba(207, 229, 255, 1);
+  background-color: var(--link-bg);
 }
 
 .link-img {
@@ -52,30 +50,37 @@ header {
 .link-img-text {
   display: flex;
   flex-direction: column;
-
   padding-bottom: 60px;
   gap: 32px;
 }
 
+.link-img-btn {
+  font-size: 20px;
+  font-weight: 700;
+  border-radius: 999px;
+  padding: 16px 124px;
+}
+
 .link-img-text span {
   font-family: "Pretendard";
   font-weight: 700;
-  font-size: 40px;
+  font-size: var(--font-size-xl);
   line-height: 140%;
   letter-spacing: 0%;
   vertical-align: middle;
-  color: rgba(55, 65, 81, 1);
+  color: var(--secondary-700);
 }
 
 .link-img-panda {
   display: block;
+  aspect-ratio: 16/6;
 }
 
 .content {
   display: flex;
   justify-content: center;
   flex-direction: column;
-  background-color: rgba(255, 255, 255, 1);
+  background-color: var(--background-color);
 }
 
 .content-main {
@@ -93,7 +98,7 @@ header {
   gap: 64px;
   width: 988px;
   height: 444px;
-  background-color: rgba(252, 252, 252, 1);
+  background-color: var(--content-bg);
 }
 
 .content-text {
@@ -114,17 +119,17 @@ header {
   line-height: 26px;
   letter-spacing: 0%;
   vertical-align: middle;
-  color: rgba(54, 146, 255, 1);
+  color: var(--primary-100);
 }
 
 .content-text-main {
   font-family: "Pretendard";
   font-weight: 700;
-  font-size: 40px;
+  font-size: var(--font-size-xl);
   line-height: 140%;
   letter-spacing: 2%;
   vertical-align: middle;
-  color: rgba(55, 65, 81, 1);
+  color: var(--secondary-700);
   margin-bottom: 10px;
 }
 
@@ -135,7 +140,7 @@ header {
   line-height: 32px;
   letter-spacing: 0%;
   vertical-align: middle;
-  color: rgba(55, 65, 81, 1);
+  color: var(--secondary-700);
 }
 
 .footer {
@@ -146,25 +151,26 @@ header {
   gap: 10px;
   padding-top: 32px;
   padding-bottom: 32px;
-  background-color: rgba(17, 24, 39, 1);
+  background-color: var(--secondary-900);
 }
 
 .footer-box {
   display: flex;
   justify-content: space-between;
   align-items: center;
-  width: 1120px;
   height: 20px;
-  color: rgba(156, 163, 175, 1);
+  flex: 1 0 auto;
+  max-width: var(--container-width);
 }
 
-.footer-codeit {
+.footer-source {
   font-family: "Pretendard";
   font-weight: 400;
   font-size: 16px;
   line-height: 100%;
   letter-spacing: 0%;
   text-align: center;
+  color: var(--secondary-400);
 }
 
 .footer-faq {
@@ -177,6 +183,7 @@ header {
   letter-spacing: 0%;
   text-align: center;
   gap: 30px;
+  color: var(--secondary-200);
 }
 
 .footer-sns {
@@ -188,4 +195,5 @@ header {
 .footer-sns img {
   width: 20px;
   height: 20px;
+  color: var(--secondary-200);
 }
diff --git a/css/login.css b/css/login.css
new file mode 100644
index 00000000..81d7ddcb
--- /dev/null
+++ b/css/login.css
@@ -0,0 +1,106 @@
+.login-form {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  height: 100vh;
+  gap: 40px;
+}
+.signup-form {
+  justify-content: flex-start;
+  margin-top: 60px;
+  top: 60px;
+}
+
+.login-form-img {
+  width: 396px;
+}
+
+.login-form_form {
+  display: flex;
+  flex-direction: column;
+  width: 640px;
+  gap: 24px;
+}
+
+.login-form_form div {
+  gap: 16px;
+}
+
+.login-form_form-input {
+  display: flex;
+  position: relative;
+  flex-direction: column;
+  gap: 16px;
+}
+
+.login-form_form-input p {
+  font-size: var(--font-size-md);
+  font-weight: 700;
+  color: var(--secondary-800);
+}
+
+.login-form_form-input input {
+  padding-left: var(--spacing-md);
+  font-size: var(--font-size-sm);
+  width: 616px;
+  height: 56px;
+  background-color: var(--secondary-100);
+  border: none;
+  border-radius: 12px;
+  outline: none;
+}
+
+.input-icon {
+  position: absolute;
+  border: none;
+  font-size: 24px;
+  bottom: 15px;
+  right: var(--spacing-sm);
+  background-color: transparent;
+  color: var(--secondary-500);
+}
+
+.login-form_form_btn {
+  height: 56px;
+  font-size: 20px;
+  font-weight: 600;
+  border-radius: 40px;
+}
+
+.login-form_oath {
+  padding: 16px 23px;
+  border-radius: 8px;
+  background-color: rgba(230, 242, 255, 1);
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  align-items: center;
+  gap: 10px;
+}
+.login-form_oath p {
+  font-weight: 500;
+}
+
+.login-form_oath-img {
+  display: flex;
+  width: 100px;
+  gap: 16px;
+}
+
+.login-form_oath-img a img {
+  width: 42px;
+  height: 42px;
+}
+
+.login-form_signup {
+  display: flex;
+  justify-content: center;
+  color: var(--secondary-800);
+  gap: 4px;
+}
+
+.login-form_signup a {
+  text-decoration: underline;
+  color: var(--primary-100);
+}
diff --git a/reset.css b/css/reset.css
similarity index 97%
rename from reset.css
rename to css/reset.css
index 58f413be..d2eaefae 100644
--- a/reset.css
+++ b/css/reset.css
@@ -101,7 +101,7 @@ section {
   display: block;
 }
 body {
-  line-height: 1;
+  /*line-height: 1;*/
 }
 ol,
 ul {
@@ -130,4 +130,4 @@ input:focus {
 a {
   color: inherit;
   text-decoration: none;
-}
\ No newline at end of file
+}
diff --git a/css/style.css b/css/style.css
new file mode 100644
index 00000000..38ca9104
--- /dev/null
+++ b/css/style.css
@@ -0,0 +1,23 @@
+@import "/css/reset.css";
+@import "/css/variables.css";
+@import "/css/home.css";
+@import "/css/login.css";
+
+html,
+body {
+  height: 100%;
+  background-color: var(--content-bg);
+}
+
+.button {
+  background-color: #3692ff;
+  border: 0;
+  color: #ffffff;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.button:hover {
+  background-color: var(--primary-300);
+}
diff --git a/css/variables.css b/css/variables.css
new file mode 100644
index 00000000..883ef591
--- /dev/null
+++ b/css/variables.css
@@ -0,0 +1,34 @@
+:root {
+  --background-color: rgba(255, 255, 255, 1);
+  --link-bg: rgba(207, 229, 255, 1);
+  --content-bg: rgba(252, 252, 252, 1);
+  --primary-100: rgba(54, 146, 255, 1);
+  --primary-300: rgba(18, 81, 170, 1);
+  --secondary-900: rgba(17, 24, 39, 1);
+  --secondary-800: rgba(31, 41, 55, 1);
+  --secondary-700: rgba(55, 65, 81, 1);
+  --secondary-600: rgba(75, 85, 99, 1);
+  --secondary-500: rgba(107, 114, 128, 1);
+  --secondary-400: rgba(156, 163, 175, 1);
+  --secondary-200: rgba(229, 231, 235, 1);
+  --secondary-100: rgba(243, 244, 246, 1);
+  --secondary-50: rgba(249, 250, 251, 1);
+
+  --container-width: 1120px;
+  --content-width: 988px;
+  --header-height: 70px;
+  --footer-height: 160px;
+
+  --desktop-width: 1920px;
+
+  --spacing-xs: 9px;
+  --spacing-sm: 12px;
+  --spacing-md: 24px;
+  --spacing-lg: 32px;
+  --spacing-xl: 64px;
+
+  --font-size-sm: 16px;
+  --font-size-md: 18px;
+  --font-size-lg: 24px;
+  --font-size-xl: 40px;
+}
diff --git a/img/btn_large.png b/img/btn_large.png
deleted file mode 100644
index 2cb5ae85..00000000
Binary files a/img/btn_large.png and /dev/null differ
diff --git a/img/btn_small_48.png b/img/btn_small_48.png
deleted file mode 100644
index fbc8a4f3..00000000
Binary files a/img/btn_small_48.png and /dev/null differ
diff --git a/img/google-img.png b/img/google-img.png
new file mode 100644
index 00000000..55700030
Binary files /dev/null and b/img/google-img.png differ
diff --git a/img/kakao-img.png b/img/kakao-img.png
new file mode 100644
index 00000000..916acc29
Binary files /dev/null and b/img/kakao-img.png differ
diff --git a/img/logo_lg.png b/img/logo_lg.png
new file mode 100644
index 00000000..76e58562
Binary files /dev/null and b/img/logo_lg.png differ
diff --git a/index.html b/index.html
index e811a4fd..4ee2f41b 100644
--- a/index.html
+++ b/index.html
@@ -9,37 +9,39 @@
       crossorigin
       href="https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/static/pretendard.min.css"
     />
-    <link rel="stylesheet" href="style.css" />
+    <link rel="stylesheet" href="/css/style.css" />
     <title>판다마켓</title>
   </head>
   <body>
     <header>
       <div class="market">
         <a class="market-icon" href="/"
-          ><img src="img/Property 1=sm@2x.png" alt=""
-        /></a>
-        <a class="market-login" href="/login"
-          ><img src="img/btn_small_48.png" alt=""
+          ><img src="img/Property 1=sm@2x.png" alt="main-market-icon"
         /></a>
+        <a class="market-login button" href="/login.html">로그인</a>
       </div>
     </header>
-    <main>
+    <section>
       <div class="link">
         <div class="link-img">
           <div class="link-img-text">
             <span
               >일상의 모든 물건을<br />
               거래해 보세요</span
-            ><a href="/items"><img src="img/btn_large.png" alt="btn" /></a>
+            ><a class="link-img-btn button" href="/items">구경하러 가기</a>
           </div>
 
-          <img class="link-img-panda" src="img/Img_home_top.png" alt="" />
+          <img
+            class="link-img-panda"
+            src="img/Img_home_top.png"
+            alt="top-img-of-panda"
+          />
         </div>
       </div>
       <div class="content">
         <div class="content-main">
           <div class="content-box">
-            <img src="img/Img_home_01.png" alt="1" />
+            <img src="img/Img_home_01.png" alt="home-img_1" />
             <div class="content-text">
               <div class="content-text-item">Hot item</div>
               <div class="content-text-main">
@@ -65,12 +67,12 @@
                 쉽게 찾아보세요
               </div>
             </div>
-            <img src="img/Img_home_02.png" alt="2" />
+            <img src="img/Img_home_02.png" alt="home-img_2" />
           </div>
         </div>
         <div class="content-main">
           <div class="content-box">
-            <img src="img/Img_home_03.png" alt="3" />
+            <img src="img/Img_home_03.png" alt="home-img_3" />
             <div class="content-text">
               <div class="content-text-item">Register</div>
               <div class="content-text-main">
@@ -94,29 +96,33 @@
             >
           </div>
 
-          <img class="link-img-panda" src="img/Img_home_bottom.png" alt="" />
+          <img
+            class="link-img-panda"
+            src="img/Img_home_bottom.png"
+            alt="bottom-img-of-panda"
+          />
         </div>
       </div>
-    </main>
+    </section>
     <div class="footer">
       <div class="footer-box">
-        <span class="footer-codeit">©codeit - 2024</span>
+        <span class="footer-source">©codeit - 2024</span>
         <div class="footer-faq">
           <a href="/pricacy">Privacy Policy</a>
           <a href="/faq">FAQ</a>
         </div>
         <div class="footer-sns">
-          <a href="https://www.facebook.com/"
-            ><img src="img/ic_facebook.png" alt=""
+          <a href="https://www.facebook.com/" rel="noopener noreferrer _blank"
+            ><img src="img/ic_facebook.png" alt="facebook-link_img"
           /></a>
-          <a href="https://x.com/?lang=en"
-            ><img src="img/ic_twitter.png" alt=""
+          <a href="https://x.com/?lang=en" rel="noopener noreferrer _blank"
+            ><img src="img/ic_twitter.png" alt="x-link_img"
           /></a>
-          <a href="https://www.youtube.com/"
-            ><img src="img/ic_youtube.png" alt=""
+          <a href="https://www.youtube.com/" rel="noopener noreferrer _blank"
+            ><img src="img/ic_youtube.png" alt="youtube-link_img"
           /></a>
-          <a href="https://www.instagram.com/"
-            ><img src="img/ic_instagram.png" alt=""
+          <a href="https://www.instagram.com/" rel="noopener noreferrer _blank"
+            ><img src="img/ic_instagram.png" alt="instagram-link_img"
           /></a>
         </div>
       </div>
diff --git a/login.html b/login.html
new file mode 100644
index 00000000..dbf971de
--- /dev/null
+++ b/login.html
@@ -0,0 +1,70 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <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="/css/style.css" />
+    <title>로그인 - 판다마켓</title>
+  </head>
+  <body>
+    <main class="login-form">
+      <a href="/index.html"
+        ><img
+          class="login-form-img"
+          src="img/logo_lg.png"
+          alt="폰트가 없어서 마켓로고를 그대로 가져온 이미지"
+      /></a>
+      <form method="get" class="login-form_form">
+        <div class="login-form_form-input">
+          <label for="email">이메일</label>
+          <input
+            type="email"
+            name="email"
+            id="email"
+            placeholder="codeit@email.com"
+            aria-required="true"
+          />
+        </div>
+        <div class="login-form_form-input">
+          <label for="password">비밀번호</label>
+          <input
+            type="password"
+            name="password"
+            id="password"
+            placeholder="••••••••"
+            aria-required="true"
+          />
+          <button class="input-icon" type="button">
+            <i class="fa-solid fa-eye-slash"></i>
+          </button>
+        </div>
+
+        <button class="login-form_form_btn button" type="submit">로그인</button>
+        <div class="login-form_oath">
+          <p>간편 로그인하기</p>
+          <div class="login-form_oath-img">
+            <a href="https://www.google.com/"
+              ><img src="img/google-img.png" alt="구글 로그인을 위한 이미지"
+            /></a>
+            <a href="https://www.kakaocorp.com/page/">
+              <img src="img/kakao-img.png" alt="카카오 로그인을 위한 이미지"
+            /></a>
+          </div>
+        </div>
+        <span class="login-form_signup"
+          >판다마켓이 처음이신가요?<a href="signup.html">회원가입</a></span
+        >
+      </form>
+    </main>
+    <script
+      src="https://kit.fontawesome.com/2cb872ecbb.js"
+      crossorigin="anonymous"
+    ></script>
+  </body>
+</html>
diff --git a/signup.html b/signup.html
new file mode 100644
index 00000000..87f8ea5d
--- /dev/null
+++ b/signup.html
@@ -0,0 +1,95 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <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="/css/style.css" />
+    <title>회원가입 - 판다마켓</title>
+  </head>
+  <body>
+    <main class="login-form signup-form">
+      <a href="/index.html"
+        ><img
+          class="login-form-img"
+          src="img/logo_lg.png"
+          alt="폰트가 없어서 마켓로고를 그대로 가져온 이미지"
+      /></a>
+      <form method="get" class="login-form_form">
+        <div class="login-form_form-input">
+          <label for="email">이메일</label>
+          <input
+            type="email"
+            name="email"
+            id="email"
+            placeholder="codeit@email.com"
+            aria-required="true"
+          />
+        </div>
+        <div class="login-form_form-input">
+          <label for="nickname">닉네임</label>
+          <input
+            type="text"
+            name="nickname"
+            id="nickname"
+            placeholder="판다"
+            aria-required="true"
+          />
+        </div>
+        <div class="login-form_form-input">
+          <label for="password">비밀번호</label>
+          <input
+            type="password"
+            name="password"
+            id="password"
+            placeholder="••••••••"
+            aria-required="true"
+          />
+          <button class="input-icon" type="button">
+            <i class="fa-regular fa-eye-slash"></i>
+          </button>
+        </div>
+        <div class="login-form_form-input">
+          <label for="password-comfirm">비밀번호 확인</label>
+          <input
+            type="password"
+            name="비밀번호"
+            id="password-comfirm"
+            placeholder="••••••••"
+            aria-required="true"
+          />
+          <button class="input-icon" type="button">
+            <i class="fa-regular fa-eye"></i>
+          </button>
+        </div>
+
+        <button class="login-form_form_btn button" type="submit">
+          회원가입
+        </button>
+        <div class="login-form_oath">
+          <p>간편 로그인하기</p>
+          <div class="login-form_oath-img">
+            <a href="https://www.google.com/"
+              ><img src="img/google-img.png" alt="구글 로그인을 위한 이미지"
+            /></a>
+            <a href="https://www.kakaocorp.com/page/">
+              <img src="img/kakao-img.png" alt="카카오 로그인을 위한 이미지"
+            /></a>
+          </div>
+        </div>
+        <span class="login-form_signup"
+          >이미 회원이신가요?<a href="login.html">로그인</a></span
+        >
+      </form>
+    </main>
+  </body>
+  <script
+    src="https://kit.fontawesome.com/2cb872ecbb.js"
+    crossorigin="anonymous"
+  ></script>
+</html>