codeit-bootcamp-frontend · addiescode-sj · Apr 9, 2025 · Apr 4, 2025 · Apr 4, 2025 · addiescode-sj
diff --git a/sprint1/images/Img_home_01.png b/sprint1/images/Img_home_01.png
diff --git a/sprint1/images/Img_home_02.png b/sprint1/images/Img_home_02.png
diff --git a/sprint1/images/Img_home_03.png b/sprint1/images/Img_home_03.png
diff --git a/sprint1/images/Img_home_bottom.png b/sprint1/images/Img_home_bottom.png
diff --git a/sprint1/images/Img_home_top.png b/sprint1/images/Img_home_top.png
diff --git a/sprint1/images/Img_inquiry_empty.png b/sprint1/images/Img_inquiry_empty.png
diff --git a/sprint1/images/Img_reply_empty.png b/sprint1/images/Img_reply_empty.png
diff --git a/sprint1/images/ic_facebook.png b/sprint1/images/ic_facebook.png
diff --git a/sprint1/images/ic_instagram.png b/sprint1/images/ic_instagram.png
diff --git a/sprint1/images/ic_twitter.png b/sprint1/images/ic_twitter.png
diff --git a/sprint1/images/ic_youtube.png b/sprint1/images/ic_youtube.png
diff --git a/sprint1/images/img_default.png b/sprint1/images/img_default.png
diff --git a/sprint1/images/img_logo.png b/sprint1/images/img_logo.png
diff --git a/sprint1/images/img_logo_m.png b/sprint1/images/img_logo_m.png
diff --git a/sprint1/index.html b/sprint1/index.html
@@ -0,0 +1,84 @@
+<!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="style.css">
+</head>
+<body>
+  <header>
+    <div class="header-inner default-width">
+      <div class="logo">
+        <a href="/">
+          <img class="logo-img" src="images/img_logo.png" alt="img_logo">
+          <img class="logo-mobile" src="images/img_logo_m.png" alt="img_logo_m">
+        </a>
+      </div>
+      <a class="btn btn_small btn-color1" href="/login">로그인</a>
+    </div>
+  </header>
+  <main>
+    <section class="banner-section">
+
+      <div class="item">
+        <h1>일상의 모든 물건을 거래해 보세요</h1>
+        <a class="btn btn_large btn-color1" href="/items">구경하러 가기</a>
+      </div>
+      <img src="images/Img_home_top.png" alt="Img_home_top">
+      </div>
+    </section>
+    <section class="content-section">
+      <div class="content-box">
+        <img src="images/Img_home_01.png" alt="Img_home_01">
+        <div class="item">
+          <span class="content-badge">Hot item</span>
+          <h1 class="content-title">인기 상품을 확인해 보세요</h1>
+          <p>가장 HOT한 중고거래 물품을 판다 마켓에서 확인해 보세요</p>
+        </div>
+      </div>
+    </section>
+    <section class="content-section">
+      <div class="content-box reverse">
+        <img src="images/Img_home_02.png" alt="Img_home_02">
+        <div class="item">
+          <span class="content-badge">Search</span>
+          <h1 class="content-title">구매를 원하는 상품을 검색하세요</h1>
+          <p>구매하고 싶은 물품은 검색해서 쉽게 찾아보세요</p>
+        </div>
+      </div>
+    </section>
+    <section class="content-section">
+      <div class="content-box">
+        <img src="images/Img_home_03.png" alt="">
+        <div class="item">
+          <span class="content-badge">Register</span>
+          <h1 class="content-title">판매를 원하는 상품을 등록하세요</h1>
+          <p>어떤 물건이든 판매하고 싶은 상품을 쉽게 등록하세요</p>
+        </div>
+      </div>
+    </section>
+    <section class="banner-section">
+      <div class="item">
+        <h1>믿을 수 있는 판다마켓 중고 거래</h1>
+      </div>
+      <img src="images/Img_home_bottom.png" alt="Img_home_bottom">
+    </section>
+  </main>
+  <footer>
+    <div class="default-width">
+      <p class="copyRight">©codeit - 2024</p>
+      <div class="btn support-btn">
+        <a href="/privacy">Privacy Policy</a>
+        <a href="/FAQ">FAQ</a>
+      </div>
+      <div class="btn sns-btn">
+        <a href="/facebook" target="_blank"><img src="images/ic_facebook.png" alt="facebook"></a>
+        <a href="/twitter" target="_blank"><img src="images/ic_twitter.png" alt="twitter"></a>
+        <a href="/youtube" target="_blank"><img src="images/ic_youtube.png" alt="youtube"></a>
+        <a href="/instagram" target="_blank"><img src="images/ic_instagram.png" alt="instagram"></a>
+      </div>
+    </div>
+  </footer> 
+</body>
+</html>
diff --git a/sprint1/style.css b/sprint1/style.css
@@ -0,0 +1,283 @@
+/* 
+  2025.04.01
+  스프린트 미션 1
+  박연희
+*/
+
+* {
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+  text-decoration: none;
+}
+a {
+  color: inherit;
+}
+
+/* 폰트 */
+@font-face {
+  font-family: 'Pretendard-Regular';
+  src: url('https://fastly.jsdelivr.net/gh/Project-Noonnu/[email protected]/Pretendard-Regular.woff') format('woff');
+  font-weight: 400;
+  font-style: normal;
+}
+
+/* 버튼 btn */
+.btn {
+  cursor: pointer;
+  display: inline-block;
+  text-align: center;
+  white-space: nowrap;
+}
+.btn_large {
+  padding: 12px 124px;
+  border-radius: 40px;
+  font-size: 20px;
+}
+.btn_medium {
+  padding: 11px 71px;
+  border-radius: 40px;
+  font-size: 18px;
+}
+.btn_small {
+  padding: 8px 23px;
+  border-radius: 8px;
+  font-size: 16px;
+}
+.btn-color1 {
+  color: #ffffff;
+  background-color: #3692FF;
+}
+
+/* 기본넓이 */
+.default-width {
+  max-width: 1920px;
+  margin: 0 auto;
+  transition: 0.5s;
+}
+
+/* body */
+body {
+  font-family: 'Pretendard-Regular';
+  background-color: #ffffff;
+  color: #374151;
+  font-weight: 400;
+}
+
+/* header */
+.header-inner {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  height: 70px;
+}
+.logo-mobile {
+  display: none;
+}
-.logo-mobile {
-  display: none;
-}
+.logo-mobile {
+  display: none;
+  @media (max-width: 375px) {
+    display: block;
+  }
+}
-.logo-mobile {
-  display: none;
-}
+.logo-mobile {
+  display: none;
+  @media (max-width: 375px) {
+    display: block;
+  }
+}
+
+/* section */
+section {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  padding: 0 25px;
+}
+section h1 {
+  font-size: 40px;
+  line-height: 1.5;
+  max-width: 320px;
+  word-break: keep-all;
+}
+section img {
+  min-width: 100px;
+  max-width: 588px;
+  width: 100%;
+}
+
+/* main > banner-section */
+.banner-section {
+  background-color: #CFE5FF;
+}
+.banner-section .item {
+  margin-top: 100px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  flex-direction: column;
+}
+.banner-section .btn {
+  margin-top: 32px;
+}
+.banner-section img {
+  margin-top: 200px;
+}
+
+/* main > content-section */
+.content-section {
+  height: 720px;
+}
+.content-box {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  border-radius: 13px;
+  background-color: #FCFCFC;
+  gap: 25px;
+}
+.content-box.reverse {
+  flex-direction: row-reverse;
+  text-align: right;
+}
+.content-box h1 {
+  margin-bottom: 24px;
+} 
+.content-box p {
+  color: #374151;
+  font-size: 24px;
+  line-height: 1.3;
+  max-width: 320px;
+  word-break: keep-all;
+}
+.content-badge {
+  display: inline-block;
+  margin-bottom: 12px;
+  color: #3692FF;
+  font-size: 18px;
+  font-weight: bold;
+}
+
+/* footer */
+footer {
+  height: 160px;
+  background-color: #111827;
+  color: #ffffff;
+  font-size: 16px;
+}
+footer .default-width {
+  display: flex;
+  justify-content: space-between;
+  flex-wrap: wrap;
+  gap: 20px;
+  padding-top: 32px;
+}
+footer .copyRight {
+  color: #9CA3AF;
+  font-weight: 400;
+}
+footer .support-btn,
+footer .sns-btn {
+  display: flex;
+}
+footer .support-btn {
+  color: #E5E7EB;
+  gap: 15px;
+}
+footer .sns-btn {
+  text-align: right;
+  gap: 12px;
+}
+
+/* 반응형 */
+@media (max-width: 1950px) {
+  .default-width {
+    padding: 0 200px;
+  }
+}
+@media (max-width: 1350px) {
+  .default-width {
+    padding: 0 25px;
+  }
+}
+/* 타블렛 */
+@media (max-width: 768px) {
+  /* section */
+  section {
+    background-color: #FCFCFC;
+  }
+  section h1 {
+    max-width: none;
+  }
+  /* section > banner-section */
+  section.banner-section,
+  .content-box.reverse  {
+    flex-direction: column;
+  }
+  section.banner-section h1{
+    text-align: center;
+  }
+  /* section > content-box */
+  .content-box {
+    flex-direction: column;
+    align-items: normal;
+  }
+  .content-box h1 {
+   font-size: 32px; 
+  }
+  .content-box p {
+    font-size: 18px; 
+   }
+  .content-box.reverse p {
+    float: right;
+  }
+}
+
+@media (max-width: 460px) {
+  /* footer */
+  footer p {
+    order: 3;
+  }
+  footer .support-btn {
+    order: 1;
+  }
+  footer .sns-btn {
+    order: 2;
+  }
+}
+
+@media (max-width: 375px) {
+  .default-width,
+  section {
+    padding: 0 18px;
+  }
+  /* header */
+  .logo-img {
+    display: none;
+  }
+  .logo-mobile {
+    display: block;
+  }
+  /* section > banner-section */
+  section.banner-section h1 {
+    font-size: 32px;
+    max-width: 240px;
+  }
+  .banner-section .btn {
+    margin-top: 18px;
+  }
+  .banner-section img {
+    margin-top: 120px;
+  }
+  /* section > content-section */
+  .content-section {
+    height: 450px;
+  }
+  .btn_large {
+    padding: 11px 71px;
+    border-radius: 40px;
+    font-size: 18px;
+  }
+  .content-box h1 {
+    font-size: 24px;
+    margin-bottom: 16px;
+  }
+  .content-badge,
+  .content-box p {
+    font-size: 16px;
+  }
+  .content-badge {
+    margin-bottom: 8px;
+  }
+  .content-box p {
+    max-width: 200px;
+  }
+}