codeit-bootcamp-frontend · dongqui · Feb 3, 2025 · Jan 31, 2025 · Jan 31, 2025 · Jan 31, 2025
diff --git a/README.md b/README.md
@@ -0,0 +1,2 @@
+
+- [ Netlify link ] https://pandamall001.netlify.app/
diff --git a/panda_mall/css/layout.css b/panda_mall/css/layout.css
@@ -6,7 +6,7 @@
   font-weight: 400;
   font-style: normal;
 }
-body { font-family: 'Pretendard-Regular'; font-size:15px;  font-weight: 400; color:var(--Secondary); }
+body { font-family: 'Pretendard-Regular'; font-size:16px; min-width:355px; font-weight: 400; color:var(--Secondary); }
 a { text-decoration: none; }
 
 .inner,.box_inner { margin:0 auto;  min-width:325px; max-width:1120px; }
@@ -20,8 +20,8 @@ input[type='submit'] { outline:0; }
 header { position:sticky; top:0; width:100%; background-color: #fff; z-index: 9999; }
 header .inner { display:flex; justify-content: space-between; align-items: center; padding:13px 0; }
 header .inner .logo_top {  }
-header .inner .logo_top img { height:40px;  }
-header .inner .logo_top img:last-child { height:35px; }
+header .inner .logo_top img { height:40px; vertical-align: middle; }
+header .inner .logo_top img:last-child { height:30px; margin-left:8px; }
 header .inner .login_btn {  }
 
 
@@ -48,7 +48,7 @@ header .inner .login_btn {  }
 .section .box_inner .box { 
   display: flex; 
   align-items: center;
-  justify-content: center;
+  justify-content: flex-start;
   background-color: #FCFCFC;
   gap: 40px;
   border-radius: 12px;
@@ -57,7 +57,7 @@ header .inner .login_btn {  }
   max-width: 100%;
 }
 .section .box_inner .box img {
-  width: 50%;
+  width: 57%;
 }
 .section .box_inner .box > div {
   padding:0 23px;
@@ -130,43 +130,56 @@ footer .inner .right img {
 
 }
 
-
-@media (max-width: 1919px) {
-   .inner { padding-left:200px!important; padding-right:200px!important; }
-}
-@media (max-width: 1120px) {
-  body { font-size:13px; }
-
-  .font_1 { font-size:2rem; }
-  .font_2 { font-size:1.5rem; }
-  .font_3 { font-size:1rem; }
+/* tablet */
+@media (max-width: 1199px) {
 
   .inner { padding-left:24px!important; padding-right:24px!important; }
   .section { height:500px; }
 
-  .main_title .text_box,
-  .section._4 .text_box { width:100%; padding:0 24px; text-align: center; top:10%; }
-  .section._4 .text_box { top:20%; }
-}
-@media (max-width: 780px) {
-
-  .font_1 { font-size:1.8rem; }
-  .font_2 { font-size:1.2em; }
-  .font_3 { font-size:1.3rem; }
-  .section._4 .inner, .main_title .inner { background-size: contain; }
+  .main_title { height:771px; margin-bottom:24px; }
+  .main_title h1 br { display:none; }
 
   .section { height:auto; }
-  .section .box_inner { padding:100px 0 0; height:auto;}
-  .section .box_inner .box { flex-direction:column; width:100%; gap: 10px; align-items: stretch; }
-  .section .box_inner .box > div { padding: 0 0 24px; }
-  .section .box_inner .box > div h2 { margin-top: 12px; margin-bottom: 12px; }
-  .section .box_inner .box > div br { display:none; }
+  .section .box_inner { padding:0px 24px 0px; height:auto;}
+  .section .box_inner .box { flex-direction:column; width:100%; gap: 24px; background-color:#fff; align-items: stretch; padding: 0px;  }
+  .section .box_inner .box > div { padding: 0 0 52px; }
+  .section .box_inner .box > div h2 { margin-top: 16px; margin-bottom: 16px; }
+  .section .box_inner .box > div h2 br { display:none; }
   .section .box_inner .box img { width:100%; }
-}
 
-@media (max-width: 375px){
-  a.btn._roundedM { padding: 16px 44px; }
+  .main_title .text_box,
+  .section._4 .text_box { width:100%; padding:0 24px; text-align: center; top:84px; }
+  .main_title .inner,
+  .section._4 .inner { background-position: bottom center; }
+  .section._4 .text_box { top:20%; }
+  .section._4 { height:927px; }
+  .section._4 .inner { margin-top: 4px; }
+
+  footer .inner .right { padding-right:80px; }
+  footer .inner .left { padding-left:80px; }
+
+}
+/* Mobile */
+@media (max-width: 767px) {
+
   header .inner .logo_top img:first-child { display:none; }
-  footer .inner .left { position: absolute; top:65px; }
-  .section .box_inner { padding:50px 0 0;}
+
+  .inner { padding-left:16px!important; padding-right:16px!important; }
+
+  .main_title { height:540px; }
+  .main_title h1 br { display:block; }
+
+  .section .box_inner .box > div h2 { margin-top: 8px; margin-bottom: 8px; }
+
+  .section .box_inner { padding:0px 16px 0;}
+  .section .box_inner .box > div { padding: 0 0 40px; }
+  .section._4 .inner, 
+  .main_title .inner { background-size: contain; }
+  .section._4 { height:540px; }
+  .section._4 .inner { margin-top: 43px; }
+
+  footer .inner .left { position: absolute; bottom:32px; }
+  footer .inner .right { padding-right:16px; }
+  footer .inner .center { padding-left:16px; }
+  footer .inner .left { padding-left:16px; }
 }
diff --git a/panda_mall/css/page.css b/panda_mall/css/page.css
@@ -4,7 +4,7 @@
 /* 로그인 페이지 */
 
 #login { min-height: 100vh; display: flex; align-items: center; }
-.login_wrap { width:95%; max-width:640px; margin:0 auto; text-align: center; }
+.login_wrap { width:100%; max-width:640px; margin:0 auto; text-align: center; }
 .login_wrap .logo { margin-bottom:55px; }
 .login_wrap .logo a {  }
 .login_wrap .logo a img { vertical-align: middle; }
@@ -52,4 +52,15 @@
 
 .login_wrap .member_sub_box {  }
 .login_wrap .member_sub_box span { font-size:14px; }
-.login_wrap .member_sub_box span a {  }
+.login_wrap .member_sub_box span a {  }
+
+
+/* Mobile */
+@media (max-width: 767px) {
+  #login { padding:0 16px; }
+  .login_wrap { width:100%; max-width:400px; }
+
+  .login_wrap .logo a img:first-child { height:52px; margin-right:8px; }
+  .login_wrap .logo a img:last-child { height:40px; }
+  .login_wrap .login_box label { font-size:14px; }
+}
diff --git a/panda_mall/css/ui.css b/panda_mall/css/ui.css
@@ -22,9 +22,29 @@
 .btn:active { background-color: #1251AA; color:#fff; }
 .btn.n_act { background-color: #9CA3AF; color:#fff; }
 
-.btn._roundedM { display:inline-block; padding:16px 124px; border-radius: 50px; }
-.btn._roundedS { display:inline-block; padding:12px 20px;  border-radius: 8px; }
+.btn._roundedM { display:inline-block; font-size:20px; padding:16px 124px; border-radius: 50px; }
+.btn._roundedS { display:inline-block; font-size:16px; padding:11px 43px;  border-radius: 8px; }
 
 .font_1 { font-size:40px; }
 .font_2 { font-size:24px; }
-.font_3 { font-size:18px; }
+.font_3 { font-size:18px; }
+.font_4 { font-size:40px; }
+
+
+
+@media (max-width: 1120px) {
+
+  .font_2 { font-size:18px; }
+  .font_4 { font-size:32px; }
+   a.btn._roundedM { padding: 12px 124px; }
+
+}
+
+/* Mobile */
+@media (max-width: 767px) {
+  .font_1 { font-size:32px; }
+  .font_3 { font-size:16px; }
+  .font_4 { font-size:24px; }
+
+  a.btn._roundedM { font-size:18px; padding: 11px 71px; }
+}
diff --git a/panda_mall/faq.html b/panda_mall/faq.html
@@ -8,12 +8,15 @@
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta name="robots" content="noindex">
     <meta name="Keywords" content="판다마켓,쇼핑몰" />
-    <meta name="Description" content="안녕하세요. 판다마켓입니다." />
-
-    <meta property="og:image" content="images/Img_home_01.png">
-    <meta property="og:title" content="판다마켓,쇼핑몰">
-    <meta property="og:description" content="안녕하세요. 판다마켓입니다.">
-    <meta property="og:url" content="">
+    <meta name="Description" content="일상의 모든 물건을 거래해보세요" />
+    <meta property="og:image" content="images/6176.png">
+    <meta property="og:title" content="판다마켓">
+    <meta property="og:description" content="일상의 모든 물건을 거래해보세요">
+    <meta property="og:url" content="/">
+    <meta name="twitter:card" content="summary_large_image">
+    <meta name="twitter:image" content="images/6176.png">
+    <meta name="twitter:title" content="판다마켓">
+    <meta name="twitter:description" content="일상의 모든 물건을 거래해보세요">
     <link rel="shorcut icon" href="images/logo_02.ico">
     <title>판다마켓 </title>
     <link rel="stylesheet" href="css/layout.css">

diff --git a/panda_mall/images/6176.png b/panda_mall/images/6176.png
diff --git a/panda_mall/index.html b/panda_mall/index.html
@@ -8,11 +8,17 @@
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta name="robots" content="noindex">
     <meta name="Keywords" content="판다마켓,쇼핑몰" />
-    <meta name="Description" content="안녕하세요. 판다마켓입니다." />
-    <meta property="og:image" content="images/Img_home_01.png">
-    <meta property="og:title" content="판다마켓,쇼핑몰">
-    <meta property="og:description" content="안녕하세요. 판다마켓입니다.">
-    <meta property="og:url" content="">
+    <meta name="Description" content="일상의 모든 물건을 거래해보세요" />
+    <meta property="og:image" content="images/6176.png">
+    <meta property="og:title" content="판다마켓">
+    <meta property="og:description" content="일상의 모든 물건을 거래해보세요">
+    <meta property="og:url" content="/">
+    <meta name="twitter:card" content="summary_large_image">
+    <meta name="twitter:image" content="images/6176.png">
+    <meta name="twitter:title" content="판다마켓">
+    <meta name="twitter:description" content="일상의 모든 물건을 거래해보세요">
+
+
     <link rel="shorcut icon" href="images/logo_02.ico">
     <title>판다마켓</title>
     <link rel="stylesheet" type="text/css" href="css/layout.css">
@@ -48,7 +54,7 @@ <h1 class="font_1">
             <img src="images/Img_home_01.png" alt="Hot item">
             <div>
               <h4 class="font_3">Hot item</h4>
-              <h2 class="font_1">인기 상품을<br>확인해 보세요</h2>
+              <h2 class="font_4">인기 상품을 <br>확인해 보세요</h2>
               <p class="font_2">가장 HOT한 중고거래 물품을<br>판다 마켓에서 확인해 보세요</p>
             </div>
           </div>
@@ -60,7 +66,7 @@ <h2 class="font_1">인기 상품을<br>확인해 보세요</h2>
             <img src="images/Img_home_02.png" alt="Search">
             <div>
               <h4 class="font_3">Search</h4>
-              <h2 class="font_1">구매를 원하는<br>
+              <h2 class="font_4">구매를 원하는 <br>
                 상품을 검색하세요</h2>
               <p class="font_2">구매하고 싶은 물품은 검색해서<br>쉽게 찾아보세요</p>
             </div>
@@ -72,7 +78,7 @@ <h2 class="font_1">구매를 원하는<br>
             <img src="images/Img_home_03.png" alt="Register">
             <div>
               <h4 class="font_3">Register</h4>
-              <h2 class="font_1">판매를 원하는<br>상품을 등록하세요</h2>
+              <h2 class="font_4">판매를 원하는 <br>상품을 등록하세요</h2>
               <p class="font_2">어떤 물건이든 판매하고 싶은 상품을<br>쉽게 등록하세요</p>
             </div>
         </div>

diff --git a/panda_mall/items.html b/panda_mall/items.html
@@ -8,12 +8,16 @@
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta name="robots" content="noindex">
     <meta name="Keywords" content="판다마켓,쇼핑몰" />
-    <meta name="Description" content="안녕하세요. 판다마켓입니다." />
-
-    <meta property="og:image" content="images/Img_home_01.png">
-    <meta property="og:title" content="판다마켓,쇼핑몰">
-    <meta property="og:description" content="안녕하세요. 판다마켓입니다.">
-    <meta property="og:url" content="">
+    <meta name="Description" content="일상의 모든 물건을 거래해보세요" />
+    <meta property="og:image" content="images/6176.png">
+    <meta property="og:title" content="판다마켓">
+    <meta property="og:description" content="일상의 모든 물건을 거래해보세요">
+    <meta property="og:url" content="/">
+    <meta name="twitter:card" content="summary_large_image">
+    <meta name="twitter:image" content="images/6176.png">
+    <meta name="twitter:title" content="판다마켓">
+    <meta name="twitter:description" content="일상의 모든 물건을 거래해보세요">
+
     <link rel="shorcut icon" href="images/logo_02.ico">
     <title>판다마켓 </title>
     <link rel="stylesheet" href="css/layout.css">

diff --git a/panda_mall/login.html b/panda_mall/login.html
@@ -8,11 +8,15 @@
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta name="robots" content="noindex">
     <meta name="Keywords" content="판다마켓,쇼핑몰" />
-    <meta name="Description" content="안녕하세요. 판다마켓입니다." />
-    <meta property="og:image" content="images/Img_home_01.png">
-    <meta property="og:title" content="판다마켓,쇼핑몰">
-    <meta property="og:description" content="안녕하세요. 판다마켓입니다.">
-    <meta property="og:url" content="">
+    <meta name="Description" content="일상의 모든 물건을 거래해보세요" />
+    <meta property="og:image" content="images/6176.png">
+    <meta property="og:title" content="판다마켓">
+    <meta property="og:description" content="일상의 모든 물건을 거래해보세요">
+    <meta property="og:url" content="/">
+    <meta name="twitter:card" content="summary_large_image">
+    <meta name="twitter:image" content="images/6176.png">
+    <meta name="twitter:title" content="판다마켓">
+    <meta name="twitter:description" content="일상의 모든 물건을 거래해보세요">
     <link rel="shorcut icon" href="images/logo_02.ico">
     <title>판다마켓</title>
     <link rel="stylesheet" type="text/css" href="css/layout.css">

diff --git a/panda_mall/privacy.html b/panda_mall/privacy.html
@@ -8,12 +8,15 @@
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta name="robots" content="noindex">
     <meta name="Keywords" content="판다마켓,쇼핑몰" />
-    <meta name="Description" content="안녕하세요. 판다마켓입니다." />
-
-    <meta property="og:image" content="images/Img_home_01.png">
-    <meta property="og:title" content="판다마켓,쇼핑몰">
-    <meta property="og:description" content="안녕하세요. 판다마켓입니다.">
-    <meta property="og:url" content="">
+    <meta name="Description" content="일상의 모든 물건을 거래해보세요" />
+    <meta property="og:image" content="images/6176.png">
+    <meta property="og:title" content="판다마켓">
+    <meta property="og:description" content="일상의 모든 물건을 거래해보세요">
+    <meta property="og:url" content="/">
+    <meta name="twitter:card" content="summary_large_image">
+    <meta name="twitter:image" content="images/6176.png">
+    <meta name="twitter:title" content="판다마켓">
+    <meta name="twitter:description" content="일상의 모든 물건을 거래해보세요">
     <link rel="shorcut icon" href="images/logo_02.ico">
     <title>판다마켓 </title>
     <link rel="stylesheet" href="css/layout.css">

diff --git a/panda_mall/signup.html b/panda_mall/signup.html
@@ -8,11 +8,15 @@
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta name="robots" content="noindex">
     <meta name="Keywords" content="판다마켓,쇼핑몰" />
-    <meta name="Description" content="안녕하세요. 판다마켓입니다." />
-    <meta property="og:image" content="images/Img_home_01.png">
-    <meta property="og:title" content="판다마켓,쇼핑몰">
-    <meta property="og:description" content="안녕하세요. 판다마켓입니다.">
-    <meta property="og:url" content="">
+    <meta name="Description" content="일상의 모든 물건을 거래해보세요" />
+    <meta property="og:image" content="images/6176.png">
+    <meta property="og:title" content="판다마켓">
+    <meta property="og:description" content="일상의 모든 물건을 거래해보세요">
+    <meta property="og:url" content="/">
+    <meta name="twitter:card" content="summary_large_image">
+    <meta name="twitter:image" content="images/6176.png">
+    <meta name="twitter:title" content="판다마켓">
+    <meta name="twitter:description" content="일상의 모든 물건을 거래해보세요">
     <link rel="shorcut icon" href="images/logo_02.ico">
     <title>판다마켓</title>
     <link rel="stylesheet" type="text/css" href="css/layout.css">

diff --git a/panda_mall/ui_test.html b/panda_mall/ui_test.html
@@ -8,12 +8,15 @@
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta name="robots" content="noindex">
     <meta name="Keywords" content="판다마켓,쇼핑몰" />
-    <meta name="Description" content="안녕하세요. 판다마켓입니다." />
-
-    <meta property="og:image" content="images/Img_home_01.png">
-    <meta property="og:title" content="판다마켓,쇼핑몰">
-    <meta property="og:description" content="안녕하세요. 판다마켓입니다.">
-    <meta property="og:url" content="">
+    <meta name="Description" content="일상의 모든 물건을 거래해보세요" />
+    <meta property="og:image" content="images/6176.png">
+    <meta property="og:title" content="판다마켓">
+    <meta property="og:description" content="일상의 모든 물건을 거래해보세요">
+    <meta property="og:url" content="/">
+    <meta name="twitter:card" content="summary_large_image">
+    <meta name="twitter:image" content="images/6176.png">
+    <meta name="twitter:title" content="판다마켓">
+    <meta name="twitter:description" content="일상의 모든 물건을 거래해보세요">
     <link rel="shorcut icon" href="images/logo_02.ico">
     <title>판다마켓 </title>
     <link rel="stylesheet" href="css/layout.css">
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,2 @@

		- [ Netlify link ] https://pandamall001.netlify.app/
Copy link Collaborator dongqui Feb 3, 2025 Choose a reason for hiding this comment The reason will be displayed to describe this comment to others. Learn more. 패스워드 아이콘이 background image로 되어있는데, 해당 속성의 경우 시각적인 역할만 하게 됩니다! 이후 미션에서 다루시게 되겠지만, 기능적으로 역할하거나 보여줘야하는 정보라면 background-image는 지양하시는 것이 접근성에 좋습니다 :) Copy link Collaborator Author songmijin824 Feb 3, 2025 Choose a reason for hiding this comment The reason will be displayed to describe this comment to others. Learn more. 아아! 넵! 다른방식으로 수정하겠습니다!