codeit-bootcamp-frontend · addiescode-sj · Apr 8, 2025 · Apr 2, 2025 · Apr 3, 2025 · Apr 4, 2025
diff --git a/.DS_Store b/.DS_Store
diff --git a/images/.DS_Store b/images/.DS_Store
diff --git a/images/bannerImg01.png b/images/bannerImg01.png
diff --git a/images/bannerImg02.png b/images/bannerImg02.png
diff --git a/images/bannerImg03.png b/images/bannerImg03.png
diff --git a/images/bottomBanner.png b/images/bottomBanner.png
diff --git a/images/facebook.png b/images/facebook.png
diff --git a/images/instagram.png b/images/instagram.png
diff --git a/images/kv.png b/images/kv.png
diff --git a/images/logo.png b/images/logo.png
diff --git a/images/twitter.png b/images/twitter.png
diff --git a/images/youtube.png b/images/youtube.png
diff --git a/index.html b/index.html
@@ -0,0 +1,186 @@
+<!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"
+      as="style"
+      crossorigin=""
+      href="https://cdn.jsdelivr.net/gh/orioncactus/[email protected]/dist/web/static/pretendard.min.css"
+    />
+    <link rel="stylesheet" href="reset.css" />
+    <link rel="stylesheet" href="style.css" />
+  </head>
+  <body class="container">
+    <header>
+      <h1 class="logo">
+        <a href="./"
+          ><img src="./images/logo.png" alt="판다마켓" aria-hidden="true" />
+          <span class="sr-only">판다마켓</span>
+        </a>
+      </h1>
+      <nav class="nav">
+        <p class="login-btn"><a href="./page/login.html">로그인</a></p>
+      </nav>
+    </header>
+    <main>
+      <section class="kv-section">
+        <div class="kv-inner">
+          <img
+            class="key-visual"
+            src="./images/kv.png?width=746"
+            srcset="
+              ./images/kv.png?width=800 800w,
+              ./images/kv.png?width=746 746w,
+              ./images/kv.png?width=500 500w,
+              ./images/kv.png?width=200 200w
+            "
+            sizes="
+    (min-width: 1200px) 746px,
+    (min-width: 900px) 600px,
+    (min-width: 767px) 100vw
+
+  "
+            alt="판다마켓 메인 판다 캐릭터 이미지"
+          />
+
+          <div class="kv-info">
+            <h2 class="title">일상의 모든 물건을 거래해 보세요</h2>
+            <button class="btn">
+              <a href="./page/items.html">구경하러 가기</a>
+            </button>
+          </div>
+        </div>
+      </section>
+      <section class="banner-section">
+        <div class="banner-inner">
+          <div class="card hot-item">
+            <div class="img-wrap">
+              <img src="./images/bannerImg01.png" alt="인기 상품 소개 배너" />
+            </div>
+            <div class="card-info">
+              <div class="badge">Hot Item</div>
+              <h2 class="title">인기 상품을 확인해 보세요</h2>
+              <p class="desc">
+                가장 HOT한 중고거래 물품을<br />
+                판다 마켓에서 확인해 보세요
+              </p>
+            </div>
+          </div>
+          <div class="card search-item">
+            <div class="img-wrap">
+              <img
+                src="./images/bannerImg02.png"
+                alt="상품검색 안내를 위한 이미지"
+              />
+            </div>
+
+            <div class="card-info">
+              <div class="badge">Search</div>
+              <h2 class="title">구매를 원하는 상품을 검색하세요</h2>
+              <p class="desc">구매하고 싶은 물품은 검색해서 쉽게 찾아보세요</p>
+            </div>
+          </div>
+          <div class="card sell-item">
+            <div class="img-wrap">
+              <img
+                src="./images/bannerImg03.png"
+                alt="상품 판매등록에 대한 이미지"
+              />
+            </div>
+
+            <div class="card-info">
+              <div class="badge">Register</div>
+              <h2 class="title">
+                판매를 원하는<br />
+                상품을 등록하세요
+              </h2>
+              <p class="desc">
+                어떤 물건이든 판매하고 싶은 상품을<br />
+                쉽게 등록하세요
+              </p>
+            </div>
+          </div>
+        </div>
+      </section>
+      <section class="pandaMarketBannerSection">
+        <img
+          class="panda-image"
+          src="./images/bottomBanner.png?width=746"
+          srcset="
+            ./images/bottomBanner.png?width=800 800w,
+            ./images/bottomBanner.png?width=746 746w,
+            ./images/bottomBanner.png?width=500 500w,
+            ./images/bottomBanner.png?width=200 200w
+          "
+          sizes="
+(min-width: 1200px) 746px,
+(min-width: 767px) 100vw
+"
+          alt="판다마켓 메인 판다 캐릭터 이미지"
+        />
+        <div class="title">
+          믿을 수 있는<br />
+          판다마켓 중고 거래
+        </div>
+      </section>
+    </main>
+    <footer class="footer">
+      <ul class="footer_inner">
+        <li class="footer-item copyright">©codeit - 2024</li>
+        <li class="footer-item support-content">
+          <a href="./page/privacy.html">Privacy Policy</a>
+          <a href="./page/faq.html">FAQ</a>
+        </li>
+        <li class="footer-item icons-wrap">
+          <span class="icon"
+            ><a
+              href="https://www.facebook.com/?locale=ko_KR"
+              target="_blank"
+              aria-label="Facebook 페이지로 이동"
+              rel="noopener noreferrer"
+              ><img
+                src="./images/facebook.png"
+                alt="facebook"
+                aria-hidden="true" /></a
+          ></span>
+          <span class="icon"
+            ><a
+              href="https://x.com/?lang=ko"
+              target="_blank"
+              aria-label="Twitter 페이지로 이동"
+              rel="noopener noreferrer"
+              ><img
+                src="./images/twitter.png"
+                alt="twitter"
+                aria-hidden="true" /></a
+          ></span>
+          <span class="icon"
+            ><a
+              rel="noopener noreferrer"
+              href="https://www.youtube.com/?hl=ko&gl=KR&app=desktop"
+              target="_blank"
+              aria-label="youtube 페이지로 이동"
+              ><img
+                src="./images/youtube.png"
+                alt="youtube"
+                aria-hidden="true" /></a
+          ></span>
+          <span class="icon"
+            ><a
+              href="https://www.instagram.com/"
+              target="_blank"
+              aria-label="Instagram 페이지로 이동"
+              rel="noopener noreferrer"
+              ><img
+                src="./images/instagram.png"
+                alt="instagram"
+                aria-hidden="true" /></a
+          ></span>
+        </li>
+      </ul>
+    </footer>
+  </body>
+</html>
diff --git a/page/faq.html b/page/faq.html
@@ -0,0 +1,11 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Document</title>
+  </head>
+  <body>
+    faq
+  </body>
+</html>
diff --git a/page/instagram.html b/page/instagram.html
@@ -0,0 +1,11 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Document</title>
+  </head>
+  <body>
+    instagram
+  </body>
+</html>
diff --git a/page/items.html b/page/items.html
@@ -0,0 +1,11 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>items</title>
+  </head>
+  <body>
+    items
+  </body>
+</html>
diff --git a/page/login.html b/page/login.html
@@ -0,0 +1,11 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Document</title>
+  </head>
+  <body>
+    login
+  </body>
+</html>
diff --git a/page/privacy.html b/page/privacy.html
@@ -0,0 +1,11 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Document</title>
+  </head>
+  <body>
+    privacy
+  </body>
+</html>
diff --git a/page/twitter.html b/page/twitter.html
@@ -0,0 +1,11 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Document</title>
+  </head>
+  <body>
+    twitter
+  </body>
+</html>
diff --git a/page/youtube.html b/page/youtube.html
@@ -0,0 +1,11 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Document</title>
+  </head>
+  <body>
+    youtube
+  </body>
+</html>
diff --git a/reset.css b/reset.css
@@ -0,0 +1,72 @@
+/* reset.css */
+
+/* 박스 사이징 설정 */
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+}
+
+/* 기본 글꼴 상속 */
+html {
+  font-family: sans-serif;
+  line-height: 1.15;
+  -webkit-text-size-adjust: 100%;
+  font-size: 16px;
+}
+
+/* 블록 요소 기본값 초기화 */
+body {
+  margin: 0;
+}
+
+/* 리스트 스타일 제거 */
+ul,
+ol {
+  list-style: none;
+}
+
+/* 링크 스타일 초기화 */
+a {
+  text-decoration: none;
+  color: inherit;
+}
+
+/* 버튼 초기화 */
+button,
+input,
+textarea,
+select {
+  font: inherit;
+  border: none;
+  background: none;
+  outline: none;
+  cursor: pointer;
+}
+
+/* 이미지 초기화 */
+img {
+  max-width: 100%;
+  height: auto;
+  display: block;
+}
+
+/* 테이블 스타일 초기화 */
+table {
+  border-collapse: collapse;
+  border-spacing: 0;
+}
+
+/* 기본 헤딩 및 텍스트 스타일 초기화 */
+h1,
+h2,
+h3,
+h4,
+h5,
+h6,
+p {
+  margin: 0;
+  font-weight: normal;
+}