codeit-sprint-fullstack · ranflir · Dec 3, 2025 · Dec 4, 2025 · Dec 5, 2025 · wseungjin
diff --git a/Index.html b/Index.html
@@ -0,0 +1,135 @@
+<!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="stylesheet" href="reset.css" />
+    <link rel="stylesheet" href="style.css" />
+    <link rel="icon" href="imgs\favicon.ico" />
+  </head>
+  <body>
+    <!-- 각각의 태그에는 의미가 있고, 목적이 있다. -라이브코딩-->
+    <header>
+      <a href="Index.html">
+        <img src="imgs\logo.svg" alt="판다마켓 로고" />
+      </a>
+
+      <a id="login-btn" href="/login.html">로그인</a>
+    </header>
+    <main>
+      <section id="hero">
+        <div class="container">
+          <h1>
+            일상의 모든 물건을
+            <br />
+            거래해 보세요
+          </h1>
+          <a href="/items.html">구경하러 가기</a>
+        </div>
+      </section>
+
+      <!-- 여기까지 1차 라이브 코딩 내용 -->
+
+      <section id="homes">
+        <section class="home1">
+          <img src="imgs\Img_home_01.png" alt="인기 상품 확인" />
+          <div class="home-wrapper1">
+            <div class="home-head">Hot item</div>
+
+            <div class="home-body">
+              <h1>
+                인기 상품을
+                <br />
+                확인해 보세요
+              </h1>
+            </div>
+
+            <div class="home-foot">
+              가장 HOT한 중고거래 물품을
+              <br />
+              판다 마켓에서 확인해 보세요
+            </div>
+          </div>
+        </section>
+
+        <section class="home2">
+          <div class="home-wrapper2">
+            <div class="home-head">Search</div>
+
+            <div class="home-body">
+              <h1>
+                구매를 원하는
+                <br />
+                상품을 검색하세요
+              </h1>
+            </div>
+
+            <div class="home-foot">
+              구매하고 싶은 물품은 검색해서
+              <br />
+              쉽게 찾아보세요
+            </div>
+          </div>
+          <img src="imgs\Img_home_02.png" alt="인기 상품 검색" />
+        </section>
+
+        <section class="home3">
+          <img src="imgs\Img_home_03.png" alt="판매 상품 등록" />
+          <div class="home-wrapper3">
+            <div class="home-head">Register</div>
+
+            <div class="home-body">
+              <h1>
+                판매를 원하는
+                <br />
+                상품을 등록하세요
+              </h1>
+            </div>
+
+            <div class="home-foot">
+              어떤 물건이든 판매하고 싶은 상품을
+              <br />
+              쉽게 등록하세요
+            </div>
+          </div>
+        </section>
+      </section>
+      <footer id="body-bottom">
+        <div class="container2">
+          <h1>
+            믿을 수 있는
+            <br />
+            판다마켓 중고 거래
+          </h1>
+        </div>
+        <img src="imgs\Img_home_bottom.png" alt="믿을 수 있는 중고마켓" />
+      </footer>
+    </main>
+
+    <footer>
+      <div>©codeit - 2024</div>
+      <div id="footerMenu">
+        <a href="privacy.html">Privacy Policy</a>
+        <a href="faq.html">FAQ</a>
+      </div>
+      <div id="socialMedia">
+        <a href="https://www.facebook.com/">
+          <img src="imgs\ic_facebook.png" alt="페이스북" width="20" />
+        </a>
+
+        <a href="https://twitter.com/">
+          <img src="imgs\ic_twitter.png" alt="트위터" width="20" />
+        </a>
+
+        <a href="https://www.youtube.com/">
+          <img src="imgs\ic_youtube.png" alt="유튜브" width="20" />
+        </a>
+
+        <a href="https://www.instagram.com/">
+          <img src="imgs\ic_instagram.png" alt="인스타그램" width="20" />
+        </a>
+      </div>
+    </footer>
+  </body>
+</html>
diff --git a/faq.html b/faq.html
@@ -0,0 +1,11 @@
+<!DOCTYPE html>
+<html lang="ko">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Document</title>
+  </head>
+  <body>
+    <h1>FAQ 페이지입니다.</h1>
+  </body>
+</html>
diff --git a/imgs/Img_home_01.png b/imgs/Img_home_01.png
diff --git a/imgs/Img_home_02.png b/imgs/Img_home_02.png
diff --git a/imgs/Img_home_03.png b/imgs/Img_home_03.png
diff --git a/imgs/Img_home_bottom.png b/imgs/Img_home_bottom.png
diff --git a/imgs/Img_home_top.png b/imgs/Img_home_top.png
diff --git a/imgs/favicon.ico b/imgs/favicon.ico
diff --git a/imgs/googleicon.png b/imgs/googleicon.png
diff --git a/imgs/ic_facebook.png b/imgs/ic_facebook.png
diff --git a/imgs/ic_instagram.png b/imgs/ic_instagram.png
diff --git a/imgs/ic_twitter.png b/imgs/ic_twitter.png
diff --git a/imgs/ic_youtube.png b/imgs/ic_youtube.png
diff --git a/imgs/kakaoicon.png b/imgs/kakaoicon.png
diff --git a/imgs/logo.svg b/imgs/logo.svg
diff --git a/items.html b/items.html
@@ -0,0 +1,11 @@
+<!DOCTYPE html>
+<html lang="ko">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Document</title>
+  </head>
+  <body>
+    <h1>아이템 페이지입니다.</h1>
+  </body>
+</html>
diff --git a/login-style.css b/login-style.css
@@ -0,0 +1,83 @@
+body {
+  display: flex;
+  justify-content: center;
+}
+
+.login-page {
+  width: 640px;
+  height: 670px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-direction: column;
+}
+
+#logo {
+  width: 396px;
+  height: 132px;
+  margin-bottom: 50px;
+  margin-top: 500px;
+}
+
+.email {
+  width: 640px;
+  height: 93px;
+}
+.title {
+  font-weight: 700;
+  font-size: 18px;
+  margin-top: 30px;
+}
+.input {
+  background-color: #f3f4f6;
+  color: #9ca3af;
+  width: 620px;
+  height: 56px;
+  border-radius: 12px;
+  border-color: #ffffff;
+  border: none;
+  margin-top: 20px;
+  padding-left: 20px;
+  border-style: none;
+  border: 1px solid transparent;
+}
+.input:focus {
+  border: 1px solid #3692ff;
+  outline: none;
+}
+
+.login-button {
+  background-color: #9ca3af;
+  width: 640px;
+  height: 56px;
+  border-radius: 40px;
+  margin-top: 20px;
+  color: white;
+  text-align: center;
+  font-size: 20px;
+  font-weight: 600;
+  padding: 20px 0;
+}
+#easy-login {
+  background-color: #e6f2ff;
+  padding: 16px 30px;
+  margin-top: 20px;
+  border-radius: 8px;
+  width: 580px;
+  height: 74px;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+#icon {
+  display: flex;
+  justify-content: space-between;
+  width: 100px;
+  height: 42px;
+}
+#already {
+  margin-top: 20px;
+}
+#al-login {
+  color: #3182f6;
+}
diff --git a/login.html b/login.html
@@ -0,0 +1,62 @@
+<!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="stylesheet" href="reset.css" />
+    <link rel="stylesheet" href="login-style.css" />
+    <link rel="icon" href="imgs\favicon.ico" />
+  </head>
+  <body>
+    <section class="login-page">
+      <a href="Index.html">
+        <img id="logo" src="imgs\logo.svg" />
+      </a>
+
+      <div class="title">
+        <label>
+          <div>이메일</div>
+          <input
+            class="input"
+            type="email"
+            id="email"
+            placeholder="이메일을 입력해주세요"
+            required
+          />
+        </label>
+      </div>
+
+      <div class="title">
+        <label>
+          <div>비밀번호</div>
+          <input
+            class="input"
+            type="password"
+            placeholder="비밀번호를 입력해주세요"
+            required
+          />
+        </label>
+      </div>
+
+      <div class="login-button">로그인</div>
+
+      <div id="easy-login">
+        간편 로그인하기
+        <div id="icon">
+          <a href="https://www.google.com/">
+            <img src="imgs\googleicon.png" />
+          </a>
+          <a href="https://www.kakaocorp.com/page/">
+            <img src="imgs\kakaoicon.png" />
+          </a>
+        </div>
+      </div>
+
+      <div id="already">
+        판다마켓이 처음이신가요?
+        <a id="al-login" href="signup.html">회원가입</a>
+      </div>
+    </section>
+  </body>
+</html>
diff --git a/privacy.html b/privacy.html
@@ -0,0 +1,11 @@
+<!DOCTYPE html>
+<html lang="ko">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Document</title>
+  </head>
+  <body>
+    <h1>프라이버시 페이지입니다.</h1>
+  </body>
+</html>