스프린트 미션 3

codeit-bootcamp-frontend · Jun 7, 2024 · 9270b24 · 9270b24
1 parent 6a8b16a
commit 9270b24
Show file tree

Hide file tree

Showing 9 changed files with 257 additions and 67 deletions.
diff --git a/faq.html b/faq.html
@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html lang="en">
+<html lang="ko">
   <head>
     <meta charset="UTF-8">
     <title>FAQ</title>

diff --git a/index.html b/index.html
@@ -1,11 +1,18 @@
 <!DOCTYPE html>
-<html lang="kr">
+<html lang="ko">
   <head>
     <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta property="og:title" content="판다마켓" />
+    <meta property="og:type" content="website" />
+    <!-- <meta property="og:url" content="https://panda-market-sample.netlify.app" /> -->
+    <meta property="og:description" content="일상의 모든 물건을 거래해 보세요" />
+
     <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="style.css">
+    <link rel="stylesheet" href="media.css">
   </head>
 
   <body>
@@ -18,69 +25,71 @@
       <section id="topBannerPanda" class="banner">
         <div class="limited-width">
           <h1>
-            일상의 모든 물건을<br>
+            일상의 모든 물건을<br />
             거래해 보세요
           </h1>
           <a href="items.html" class="button inside">구경하러 가기</a>
         </div>
       </section>
+
       <section id="contents" class="limited-width">
         <div class="content">
-          <img class="contentImg" src="img/sectionFirst_img.png" alt="인기 상품 확인">
+          <img class="contentImg" src="img/sectionFirst_img.png" alt="인기 상품 확인" />
           <div class="contentText">
-            <span class="contentSmolText">Hot item</span>
-            <h1>인기 상품을<br>확인해 보세요</h1>
+            <h2>Hot item</h2>
+            <h1>인기 상품을 <span class="break-on-desktop"><br /></span>확인해 보세요</h1>
             <p class="contentExplain">
-              가장 HOT한 중고거래 물품을<br>판다마켓에서 확인해 보세요
+              가장 HOT한 중고거래 물품을<br />판다마켓에서 확인해 보세요
             </p>
           </div>
         </div>
         <div id="reverseContent" class="content">
           <div class="contentText">
-            <span class="contentSmolText">Search</span>
-            <h1>구매를 원하는<br>상품을 검색하세요</h1>
+            <h2>Search</h2>
+            <h1>구매를 원하는 <span class="break-on-desktop"><br /></span>상품을 검색하세요</h1>
             <p class="contentExplain">
-              구매하고 싶은 물품은 검색해서<br>쉽게 찾아보세요
+              구매하고 싶은 물품은 검색해서<br />쉽게 찾아보세요
             </p>
           </div>
-          <img class="contentImg" src="img/sectionSecond_img.png" alt="구매 상품 검색">
+          <img class="contentImg" src="img/sectionSecond_img.png" alt="구매 상품 검색" />
         </div>
         <div class="content">
-          <img class="contentImg" src="img/sectionThird_img.png" alt="판매 상품 검색">
+          <img class="contentImg" src="img/sectionThird_img.png" alt="판매 상품 검색" />
           <div class="contentText">
-            <span class="contentSmolText">Register</span>
-            <h1>판매를 원하는<br>상품을 등록하세요</h1>
+            <h2>Register</h2>
+            <h1>판매를 원하는 <span class="break-on-desktop"><br /></span>상품을 등록하세요</h1>
             <p class="contentExplain">
-              어떤 물건이든 판매하고 싶은 상품을<br>쉽게 등록하세요
+              어떤 물건이든 판매하고 싶은 상품을<br />쉽게 등록하세요
             </p>
           </div>
         </div>
       </section>
+
       <section id="bottomBannerPanda" class="banner">
         <div class="limited-width">
           <h1>
-            믿을 수 있는<br>
+            믿을 수 있는<br />
             판다마켓 중고거래
           </h1>
         </div>
       </section>
     </main>
 
     <footer>
-      <div>©codeit - 2024</div>
+      <div class="codeit2024">©codeit - 2024</div>
       <div id="bottomThings">
         <a class="bottomTextLink" href="privacy.html">Privacy Policy</a>
         <a class="bottomTextLink" href="faq.html">FAQ</a>
       </div>
       <div id="iconLink">
         <a href="https://www.facebook.com/" target="_blank"
-          ><img class="footerIcon" src="img/ic_facebook.png" alt="페이스북"></a>
+          ><img class="footerIcon" src="img/ic_facebook.png" alt="페이스북" /></a>
         <a href="https://twitter.com/" target="_blank"
-          ><img class="footerIcon" src="img/ic_twitter.png" alt="트위터"></a>
+          ><img class="footerIcon" src="img/ic_twitter.png" alt="트위터" /></a>
         <a href="https://www.youtube.com/" target="_blank"
-          ><img class="footerIcon" src="img/ic_youtube.png" alt="유튜브"></a>
+          ><img class="footerIcon" src="img/ic_youtube.png" alt="유튜브" /></a>
         <a href="https://www.instagram.com/" target="_blank"
-          ><img class="footerIcon" src="img/ic_instagram.png" alt="인스타그램"></a>
+          ><img class="footerIcon" src="img/ic_instagram.png" alt="인스타그램" /></a>
       </div>
     </footer>
   </body>

diff --git a/items.html b/items.html
@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html lang="kr">
+<html lang="ko">
   <head>
     <meta charset="UTF-8">
     <title>구경하러 가기</title>

diff --git a/login.html b/login.html
@@ -1,18 +1,18 @@
 <!DOCTYPE html>
-<html lang="kr">
+<html lang="ko">
   <head>
     <meta charset="UTF-8">
     <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="sign.css">
+    <link rel="stylesheet" href="media.css">
   </head>
 
   <body>
     <div class="logoSection">
-      <div class="topBigLogo">
-        <a href="/"><img class="topBigLogoImg" src="img/top_big_logo.png" alt="판다마켓"></a>
-      </div>
+      <a href="/" class="topBigLogo"><img class="topBigLogoImg" src="img/top_big_logo.png" alt="판다마켓"></a>
+
       <form method="post">
         <div class="inputSection">
           <label for="email">이메일</label>
@@ -27,6 +27,7 @@
         </div>
         <button type="submit" class="button inside widthFull">로그인</button>
       </form>
+
       <div class="simpleLogin">
         <h3>간편 로그인하기</h3>
         <div class="simpLoginWays">

diff --git a/media.css b/media.css
@@ -0,0 +1,160 @@
+.break-on-desktop {
+  display: none;
+}
+
+@media (min-width: 768px) {
+  .logoSection {
+    max-width: 640px;
+  }
+
+  .topBigLogo {
+    width: 396px;
+    margin-top: 48px;
+    margin-bottom: 40px;
+  }
+
+  label {
+    font-size: 18px;
+    margin-bottom: 16px;
+  }
+}
+
+@media (min-width: 1280px) {
+  .topBigLogo {
+    margin-top: 60px;
+    margin-bottom: 40px;
+  }
+}
+
+@media (min-width: 768px) {
+  header {
+    padding: 0 24px;
+  }
+
+  .limited-width {
+    padding: 0 24px;
+  }
+
+  .inside {
+    font-size: 20px;
+    font-weight: 700;
+    padding: 16px 126px;
+  }
+
+  footer {
+    padding: 32px 104px 108px 104px;
+  }
+
+  .codeit2024 {
+    flex-basis: auto;
+    order: 0;
+  }
+}
+
+@media (min-width: 1280px) {
+  header {
+    padding: 0 200px;
+  }
+
+  .break-on-desktop {
+    display: inline;
+  }
+
+  footer {
+    padding: 32px 200px 108px 200px;
+  }
+}
+
+@media (min-width: 768px) {
+  .banner {
+    height: 90vh;
+    background-size: 120%;
+  }
+
+  .banner h1 {
+    font-size: 40px;
+    line-height: 56px;
+    padding-top: 84px;
+    padding-bottom: 24px;
+  }
+
+  #topBannerPanda h1 br {
+    display: none;
+  }
+
+  #contents {
+    padding-top: 24px;
+    padding-bottom: 16px;
+  }
+
+  .contentText h2 {
+    font-size: 18px;
+    line-height: 25px;
+    margin-bottom: 12px;
+  }
+
+  .content:nth-child(2) {
+    flex-direction: column-reverse;
+  }
+
+  .contentText h1 {
+    font-size: 32px;
+    line-height: 45px;
+  }
+
+  .contentExplain {
+    font-size: 18px;
+    line-height: 22px;
+  }
+}
+
+@media (min-width: 1280px) {
+  .banner {
+    text-align: left;
+    height: 540px;
+    display: flex;
+    align-items: center;
+    background-position: 80% bottom;
+    background-size: 55%;
+  }
+
+  .banner h1 {
+    padding-top: 0;
+    padding-bottom: 32px;
+  }
+
+  #topBannerPanda h1 br {
+    display: inline;
+  }
+
+  #contents {
+    padding: 138px 0;
+  }
+
+  .content {
+    margin-bottom: 138px;
+    display: flex;
+    align-items: center;
+    gap: 5%;
+  }
+
+  .content:nth-child(2) {
+    flex-direction: row-reverse;
+  }
+
+  .contentImg {
+    width: 50%;
+    margin-bottom: 0;
+  }
+
+  .contentText h1 {
+    font-size: 40px;
+    line-height: 56px;
+  }
+
+  .contentExplain {
+    font-size: 24px;
+    line-height: 29px;
+    margin-top: 24px;
+  }
+}
diff --git a/privacy.html b/privacy.html
@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html lang="en">
+<html lang="ko">
   <head>
     <meta charset="UTF-8">
     <title>Privacy_Policy</title>

diff --git a/sign.css b/sign.css
@@ -33,19 +33,21 @@
   pointer-events: none;
 }
 .logoSection {
-  max-width: 640px;
+  max-width: 400px;
   margin: 0 auto;
+  padding: 0 16px;
 }
 
 .topBigLogo {
+  margin: 0 auto;
   display: block;
-  text-align: center;
-  margin-top: 60px;
-  margin-bottom: 40px;
+  margin-top: 24px;
+  margin-bottom: 24px;
+  width: 198px
 }
 
 .topBigLogoImg {
-  width: 396px;
+  width: 100%;
 }
 
 .inputSection {
@@ -56,8 +58,8 @@
 
 label {
   display: block;
-  margin-bottom: 16px;
-  font-size: 18px;
+  margin-bottom: 8px;
+  font-size: 14px;
   font-weight: 700;
 }
 

diff --git a/signup.html b/signup.html
@@ -1,18 +1,18 @@
 <!DOCTYPE html>
-<html lang="kr">
+<html lang="ko">
   <head>
     <meta charset="UTF-8">
     <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="sign.css">
+    <link rel="stylesheet" href="media.css">
   </head>
 
   <body>
     <div class="logoSection">
-      <div class="topBigLogo">
-        <a href="/"><img class="topBigLogoImg" src="img/top_big_logo.png" alt="판다마켓"></a>
-      </div>
+      <a href="/" class="topBigLogo"><img class="topBigLogoImg" src="img/top_big_logo.png" alt="판다마켓"></a>
+
       <form method="post">
         <div class="inputSection">
           <label for="email">이메일</label>
@@ -38,6 +38,7 @@
         </div>
         <button type="submit" class="button inside widthFull">회원가입</button>
       </form>
+
       <div class="simpleLogin">
         <h3>간편 로그인하기</h3>
         <div class="simpLoginWays">