codeit-bootcamp-frontend · GANGYIKIM · Aug 13, 2024 · Aug 11, 2024 · GANGYIKIM · Aug 13, 2024
diff --git a/10-Sprint-Mission/css/style.css b/10-Sprint-Mission/css/style.css
@@ -0,0 +1,168 @@
+body {
+
+}
-body {
-  
-}
-body {
-  
-}
+
+.header {
+  width: 1920px;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  height: 60px;
+}
+
+.header a img {
+  max-height: 100%;
+  margin-left: 360px;
+  margin-right: 360px;
-  margin-left: 360px;
-  margin-right: 360px;
+  margin: 0 360px; // 만약 중앙정렬을 하고 싶으신거라면 margin: 0 auto도 가능합니다.
-  margin-left: 360px;
-  margin-right: 360px;
+  margin: 0 360px; // 만약 중앙정렬을 하고 싶으신거라면 margin: 0 auto도 가능합니다.
+}
+
+.btn.top {
+  position: relative; /* 상대적인 위치 설정 */
+  top: -70px;
+  display: inline-block;
+  background-color: transparent;
+  padding: 0;
+  border: none;
+  font-size: 1.5rem; 
+  font-weight: bold;
+
+}
+
+.itemlink {
+  cursor: pointer;
+}
+
+.top_banner {
+  width: 1920px;
+  position: relative;
+  background-color: #F0F8FF;
+  text-align: center;
+  padding: 20px 0;
+}
+
+.top_banner img {
+  max-width: 100%;
+  height: auto;
+}
+
+.main-container {
+
+  height: 2160px;
+  width: 1920px; 
+  display: flex;
+  flex-direction: column;
+
+
+}
+
+h5 {
+  color: rgb(44, 67, 214);
+}
+
+.main-item {
+  display: flex;
+  align-items: center;
+  justify-content: space-around; /* 이미지와 텍스트 같이 */
+  background-color: #f8f8f8; /* 각 섹션의 배경색 */
+  padding: 20px;
+  border-radius: 10px; /* 둥근 모서리 추가 */
+}
+
+.main-item.middle {
+  display: flex;
+  align-items: center;
+  justify-content: space-around; /* 이미지와 텍스트 같이 */
+  background-color: #f8f8f8; /* 각 섹션의 배경색 */
+  padding: 20px;
+  border-radius: 10px; /* 둥근 모서리 추가 */
+}
-.main-item {
-  display: flex;
-  align-items: center;
-  justify-content: space-around; /* 이미지와 텍스트 같이 */
-  background-color: #f8f8f8; /* 각 섹션의 배경색 */
-  padding: 20px;
-  border-radius: 10px; /* 둥근 모서리 추가 */
-}
-
-.main-item.middle {
-  display: flex;
-  align-items: center;
-  justify-content: space-around; /* 이미지와 텍스트 같이 */
-  background-color: #f8f8f8; /* 각 섹션의 배경색 */
-  padding: 20px;
-  border-radius: 10px; /* 둥근 모서리 추가 */
-}
+// 차라리 이렇게..?
+.main-item,
+.main-item.middle {
+  display: flex;
+  align-items: center;
+  justify-content: space-around; /* 이미지와 텍스트 같이 */
+  background-color: #f8f8f8; /* 각 섹션의 배경색 */
+  padding: 20px;
+  border-radius: 10px; /* 둥근 모서리 추가 */
+}
-.main-item {
-  display: flex;
-  align-items: center;
-  justify-content: space-around; /* 이미지와 텍스트 같이 */
-  background-color: #f8f8f8; /* 각 섹션의 배경색 */
-  padding: 20px;
-  border-radius: 10px; /* 둥근 모서리 추가 */
-}
-
-.main-item.middle {
-  display: flex;
-  align-items: center;
-  justify-content: space-around; /* 이미지와 텍스트 같이 */
-  background-color: #f8f8f8; /* 각 섹션의 배경색 */
-  padding: 20px;
-  border-radius: 10px; /* 둥근 모서리 추가 */
-}
+// 차라리 이렇게..?
+.main-item,
+.main-item.middle {
+  display: flex;
+  align-items: center;
+  justify-content: space-around; /* 이미지와 텍스트 같이 */
+  background-color: #f8f8f8; /* 각 섹션의 배경색 */
+  padding: 20px;
+  border-radius: 10px; /* 둥근 모서리 추가 */
+}
+
+.image-container {
+  flex: 1;
+  text-align: center; /* 이미지를 가운데 정렬 */
+  margin-left: 360px;
+}
+
+.middle {
+  flex: 1;
+  text-align: center; /* 이미지를 가운데 정렬 */
+  margin-right: 360px 0;
+}
+
+.image-container img {
+  max-width: 100%;
+  height: auto;
+  margin: 100px;
+}
+
+.text-container {
+  flex: 1; /* 텍스트 영역을 이미지보다 크게 설정 */
+  text-align: left; /* 텍스트를 왼쪽 정렬 */
+}
+.text-container.middle {
+  flex: 1; /* 텍스트 영역을 이미지보다 크게 설정 */
+  text-align: right; /* 텍스트를 왼쪽 정렬 */
+}
+
+.text-container h2 {
+  font-size: 1.5rem;
+  margin-bottom: 10px;
+}
+
+p.focus {
+  font-size: 40px;
+  color: black;
+}
+
+p.focus.small {
+  font-size: 20px;
+  color: black;
+}
+
+.bottom_banner {
+  width: 1920px;
+  position: relative;
+  background-color: #F0F8FF;
+  text-align: center;
+  /* padding: 20px; */
+}
+
+.bottom_banner img {
+  /* max-width: 100%; */
+  height: auto;
+}
+
+.foot-container {
+  width: 1920px;
+  display: flex;
+  height: 160px;
+  justify-content: space-between;
+  align-items: center;
+  /* padding: 20px; */
+  background-color: #111827;
+  color: white;
+}
+
+.foot-left {
+  position: relative; /* 이렇게 밀어넣기 */
+  top: -50px; 
+  right: -240px;
+  flex: 1; /*공간이 균등하게 배분된다는 듯*/
+  text-align: left;
+}
+
+.foot-center {
+  position: relative; /* 이렇게 밀어넣기 */
+  top: -50px; 
+  flex: 1; /*공간이 균등하게 배분된다는 듯*/
+  text-align: center;
+}
+
+.foot-right {
+  position: relative; /* 이렇게 밀어넣기 */
+  top: -50px; 
+  left: -240px;
+  flex: 1; /*공간이 균등하게 배분된다는 듯*/
+  text-align: right;
+}
+
diff --git a/10-Sprint-Mission/img/Img_home_bottom.png b/10-Sprint-Mission/img/Img_home_bottom.png
diff --git a/10-Sprint-Mission/img/Img_home_top.png b/10-Sprint-Mission/img/Img_home_top.png
diff --git a/10-Sprint-Mission/img/Rectangle 1123.png b/10-Sprint-Mission/img/Rectangle 1123.png
diff --git a/10-Sprint-Mission/img/btn/btn_small-1.png b/10-Sprint-Mission/img/btn/btn_small-1.png
diff --git a/10-Sprint-Mission/img/btn/btn_small-2.png b/10-Sprint-Mission/img/btn/btn_small-2.png
diff --git a/10-Sprint-Mission/img/btn/btn_small-3.png b/10-Sprint-Mission/img/btn/btn_small-3.png
diff --git a/10-Sprint-Mission/img/btn/btn_small.png b/10-Sprint-Mission/img/btn/btn_small.png
diff --git a/10-Sprint-Mission/img/btn/state=active.png b/10-Sprint-Mission/img/btn/state=active.png
diff --git a/10-Sprint-Mission/img/btn/state=click.png b/10-Sprint-Mission/img/btn/state=click.png
diff --git a/10-Sprint-Mission/img/btn/state=hover.png b/10-Sprint-Mission/img/btn/state=hover.png
diff --git a/10-Sprint-Mission/img/btn/state=inactive.png b/10-Sprint-Mission/img/btn/state=inactive.png
diff --git a/10-Sprint-Mission/img/gnb/size=desktop, sort=Default.png b/10-Sprint-Mission/img/gnb/size=desktop, sort=Default.png
diff --git a/10-Sprint-Mission/img/gnb/standard=pc.png b/10-Sprint-Mission/img/gnb/standard=pc.png
diff --git a/10-Sprint-Mission/img/icons/Editor Icon.png b/10-Sprint-Mission/img/icons/Editor Icon.png
diff --git a/10-Sprint-Mission/img/icons/arrow_left.png b/10-Sprint-Mission/img/icons/arrow_left.png
diff --git a/10-Sprint-Mission/img/icons/arrow_left/ic_back.png b/10-Sprint-Mission/img/icons/arrow_left/ic_back.png
diff --git a/10-Sprint-Mission/img/icons/arrow_right.png b/10-Sprint-Mission/img/icons/arrow_right.png
diff --git a/10-Sprint-Mission/img/icons/btn_visibility_on_24px.png b/10-Sprint-Mission/img/icons/btn_visibility_on_24px.png
diff --git a/10-Sprint-Mission/img/icons/ic_X.png b/10-Sprint-Mission/img/icons/ic_X.png
diff --git a/10-Sprint-Mission/img/icons/ic_arrow_down.png b/10-Sprint-Mission/img/icons/ic_arrow_down.png
diff --git a/10-Sprint-Mission/img/icons/ic_check.png b/10-Sprint-Mission/img/icons/ic_check.png
diff --git a/10-Sprint-Mission/img/icons/ic_facebook.png b/10-Sprint-Mission/img/icons/ic_facebook.png
diff --git a/10-Sprint-Mission/img/icons/ic_heart.png b/10-Sprint-Mission/img/icons/ic_heart.png
diff --git a/10-Sprint-Mission/img/icons/ic_instagram.png b/10-Sprint-Mission/img/icons/ic_instagram.png
diff --git a/10-Sprint-Mission/img/icons/ic_plus.png b/10-Sprint-Mission/img/icons/ic_plus.png
diff --git a/10-Sprint-Mission/img/icons/ic_profile.png b/10-Sprint-Mission/img/icons/ic_profile.png
diff --git a/10-Sprint-Mission/img/icons/ic_search.png b/10-Sprint-Mission/img/icons/ic_search.png
diff --git a/10-Sprint-Mission/img/icons/ic_search_darker.png b/10-Sprint-Mission/img/icons/ic_search_darker.png
diff --git a/10-Sprint-Mission/img/icons/ic_sort.png b/10-Sprint-Mission/img/icons/ic_sort.png
diff --git a/10-Sprint-Mission/img/icons/ic_twitter.png b/10-Sprint-Mission/img/icons/ic_twitter.png
diff --git a/10-Sprint-Mission/img/icons/ic_youtube.png b/10-Sprint-Mission/img/icons/ic_youtube.png
diff --git a/10-Sprint-Mission/img/icons/img_badge.png b/10-Sprint-Mission/img/icons/img_badge.png
diff --git a/10-Sprint-Mission/img/landing/desktop_01.png b/10-Sprint-Mission/img/landing/desktop_01.png
diff --git a/10-Sprint-Mission/img/landing/desktop_02.png b/10-Sprint-Mission/img/landing/desktop_02.png
diff --git a/10-Sprint-Mission/img/landing/desktop_03.png b/10-Sprint-Mission/img/landing/desktop_03.png
diff --git a/10-Sprint-Mission/img/landing/desktop_04.png b/10-Sprint-Mission/img/landing/desktop_04.png
diff --git a/10-Sprint-Mission/img/landing/desktop_05.png b/10-Sprint-Mission/img/landing/desktop_05.png
diff --git a/10-Sprint-Mission/img/landing/mobile_01.png b/10-Sprint-Mission/img/landing/mobile_01.png
diff --git a/10-Sprint-Mission/img/landing/mobile_02.png b/10-Sprint-Mission/img/landing/mobile_02.png
diff --git a/10-Sprint-Mission/img/landing/mobile_03.png b/10-Sprint-Mission/img/landing/mobile_03.png
diff --git a/10-Sprint-Mission/img/landing/mobile_04.png b/10-Sprint-Mission/img/landing/mobile_04.png
diff --git a/10-Sprint-Mission/img/landing/mobile_05.png b/10-Sprint-Mission/img/landing/mobile_05.png
diff --git a/10-Sprint-Mission/img/landing/tablet_01.png b/10-Sprint-Mission/img/landing/tablet_01.png
diff --git a/10-Sprint-Mission/img/landing/tablet_02.png b/10-Sprint-Mission/img/landing/tablet_02.png
diff --git a/10-Sprint-Mission/img/landing/tablet_03.png b/10-Sprint-Mission/img/landing/tablet_03.png
diff --git a/10-Sprint-Mission/img/landing/tablet_04.png b/10-Sprint-Mission/img/landing/tablet_04.png
diff --git a/10-Sprint-Mission/img/landing/tablet_05.png b/10-Sprint-Mission/img/landing/tablet_05.png
diff --git a/10-Sprint-Mission/img/lg/Property 1=Typo.png b/10-Sprint-Mission/img/lg/Property 1=Typo.png
diff --git a/10-Sprint-Mission/img/lg/Property 1=lg.png b/10-Sprint-Mission/img/lg/Property 1=lg.png
diff --git a/10-Sprint-Mission/img/lg/Property 1=md.png b/10-Sprint-Mission/img/lg/Property 1=md.png
diff --git a/10-Sprint-Mission/img/lg/Property 1=sm.png b/10-Sprint-Mission/img/lg/Property 1=sm.png
diff --git a/10-Sprint-Mission/img/main/Img_home_01.png b/10-Sprint-Mission/img/main/Img_home_01.png
diff --git a/10-Sprint-Mission/img/main/Img_home_02.png b/10-Sprint-Mission/img/main/Img_home_02.png
diff --git a/10-Sprint-Mission/img/main/Img_home_03.png b/10-Sprint-Mission/img/main/Img_home_03.png
diff --git a/10-Sprint-Mission/index.html b/10-Sprint-Mission/index.html
@@ -0,0 +1,87 @@
+<!DOCTYPE html>
+<html lang="en">
-<html lang="en">
+<html lang="ko">
-<html lang="en">
+<html lang="ko">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <link rel="stylesheet" href="./css/style.css">
+  <title>판다마켓</title>
+</head>
+<body>
+  <header class="header">
+    <a href="index.html">
+      <img src="./img/lg/Property 1=md.png" alt="로그인">
-      <img src="./img/lg/Property 1=md.png" alt="로그인">
+      <img src="./img/logo.png" alt="판다마켓 로고">
-      <img src="./img/lg/Property 1=md.png" alt="로그인">
+      <img src="./img/logo.png" alt="판다마켓 로고">
+    </a>
+    <a href="./links/login.html">
+      <img src="./img/btn/btn_small.png" alt="로그인버튼">
+    </a>
+  </header>
+  <div>
+    <section class="top_banner">
+
+        <button class="btn top">
+          <p>일상의 모든 물건을 <br>거래해보세요</p>
+          <a href="./links/item.html">
+          <img class="itemlink" src="./img/btn/state=active.png" alt="구경하러가기">
+          </a>
+        </button>
-        <button class="btn top">
-          <p>일상의 모든 물건을 <br>거래해보세요</p>
-          <a href="./links/item.html">
-          <img class="itemlink" src="./img/btn/state=active.png" alt="구경하러가기">
-          </a>
-        </button>
+        <�div class="btn top">
+          <p>일상의 모든 물건을 <br>거래해보세요</p>
+          <a href="./links/item.html">
+          <img class="itemlink" src="./img/btn/state=active.png" alt="구경하러가기">
+          </a>
+        </div>
-        <button class="btn top">
-          <p>일상의 모든 물건을 <br>거래해보세요</p>
-          <a href="./links/item.html">
-          <img class="itemlink" src="./img/btn/state=active.png" alt="구경하러가기">
-          </a>
-        </button>
+        <�div class="btn top">
+          <p>일상의 모든 물건을 <br>거래해보세요</p>
+          <a href="./links/item.html">
+          <img class="itemlink" src="./img/btn/state=active.png" alt="구경하러가기">
+          </a>
+        </div>
+        <img src="./img/Img_home_top.png" alt="배너">
+
+    </section>
+  </div>
+  <div>
+    <section class="main-container">
+      <section class="main-item">
+        <div class="image-container">
+          <img src="./img/main/Img_home_01.png" alt="상">
+        </div>
+        <div class="text-container">
+          <h5>Hot Item</h5>
+          <p class="focus">인기 상품을<br> 확인해 보세요</p>
+          <p class="focus small">가장 HOT한 중고거래 물품을<br> 팬다 마켓에서 확인해 보세요</p>
+        </div>
+      </section>
+      <section class="main-item middle">
+        <div class="text-container middle">
+          <h5>Search</h5>
+          <p class="focus">구매를 원하는<br> 상품을 검색하세요</p>
+          <p class="focus small">구매하고 싶은 물품은 검색해서<br> 쉽게 찾아보세요</p>
+        </div>
+        <div class="middle">
+          <img src="./img/main/Img_home_02.png" alt="중">
+        </div>
+      </section>
+
+      <section class="main-item">
+        <div class="image-container">
+          <img src="./img/main/Img_home_03.png" alt="하">
+        </div>
+        <div class="text-container">
+          <h5>Register</h5>
+          <p class="focus">판매를 원하는<br> 상품을 등록하세요</p>
+          <p class="focus small">어떤 물건이든 판매하고 싶은 상품을 쉽게 등록하세요</p>
+        </div>
+      </section>
+    </section>
+  </div>
+  <div>
+    <section class="bottom_banner">
+      <img src="./img/Img_home_bottom.png" alt="하단배너">
+    </section>
+  </div>
+  <footer class="foot">
+    <section class="foot-container">
+      <section class="foot-left">©codeit - 2024</section>
+      <section class="foot-center">
+        <a href="links/Privacy.html">Privacy Policy</a>
+        <a href="links/faq.html">FAQ</a>
+      </section>
+      <section class="foot-right">
+        <a href="https://www.facebook.com/"><img src="/img/icons/ic_facebook.png" alt="facebook"></a>
-        <a href="https://www.facebook.com/"><img src="/img/icons/ic_facebook.png" alt="facebook"></a>
+        <a href="https://www.facebook.com/" target='_blank'><img src="/img/icons/ic_facebook.png" alt="facebook"></a>
-        <a href="https://www.facebook.com/"><img src="/img/icons/ic_facebook.png" alt="facebook"></a>
+        <a href="https://www.facebook.com/" target='_blank'><img src="/img/icons/ic_facebook.png" alt="facebook"></a>
+        <a href="https://x.com/"><img src="/img/icons/ic_twitter.png" alt="twitter"></a>
+        <a href="https://www.youtube.com/"><img src="/img/icons/ic_youtube.png" alt="ic_youtube"></a>
+        <a href="https://www.instagram.com/"><img src="/img/icons/ic_instagram.png" alt="instagram"></a>
+      </section>
+    </section>
+  </footer>
+</body>
+</html>
diff --git a/10-Sprint-Mission/links/Privacy.html b/10-Sprint-Mission/links/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>
+
+</body>
+</html>
diff --git a/10-Sprint-Mission/links/faq.html b/10-Sprint-Mission/links/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>
+
+</body>
+</html>
diff --git a/10-Sprint-Mission/links/item.html b/10-Sprint-Mission/links/item.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>
+  item!!!
+</body>
+</html>
diff --git a/10-Sprint-Mission/links/login.html b/10-Sprint-Mission/links/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>login</title>
+</head>
+<body>
+
+</body>
+</html>