codeit-bootcamp-frontend · lang92 · Sep 10, 2024 · Sep 6, 2024 · Sep 7, 2024 · Sep 7, 2024
diff --git a/.github/pull_request_template.md b/.github/pull_request_template.md
@@ -2,13 +2,20 @@
 
 ### 기본
 
-- [x]
-- []
-- []
+- [x] 랜딩 페이지의 url path는 루트('/')로 설정합니다.
+- [O] title은 "판다마켓"로 설정합니다.
+- [X] 화면의 너비가 1920px 이상이면 하늘색 배경색은 너비를 꽉 채우도록 채워지고, 내부 요소들의 위치는 고정되고, 여백만 커지도록 합니다.
+- [O] 화면의 너비가 1920px 보다 작아질 때, "판다마켓" 로고의 왼쪽 여백 200px"로그인" 버튼의 오른쪽 여백 200px이 유지되고, 화면의 너비가 작아질수록 두 요소간 거리가 가까워지도록 설정합니다.
+- [X] 클릭으로 기능이 동작해야 하는 경우, 사용자가 클릭할 수 있는 요소임을 알 수 있도록 CSS 속성 cursor: pointer 로 설정합니다.
+- [X] "판다마켓" 클릭 시 루트 페이지('/')로 이동합니다.
+- [X] '로그인'버튼 클릭 시 로그인 페이지('/login')로 이동합니다 (빈 페이지)
+- [X] "구경하러가기"버튼 클릭 시('/items')로 이동합니다.(빈 페이지)
+- [X] "Privacy Policy", "FAQ"는 클릭 시 각각 Privacy 페이지('/privacy'), FAQ 페이지('/faq')로 이동합니다.(모두 빈 페이지)
+- [X] 페이스북, 트위터, 유튜브, 인스타그램 아이콘을 클릭 시 각각의 홈페이지로 새로운 창이 열리면서 이동합니다.
 
 ### 심화
 
-- [x]
+- [x]사용자의 브라우저가 크고 작아짐에 따라 페이지의 요소간 간격, 요소의 크기, font-size 등 모든 크기와 관련된 값이 크고 작아지도록 설정해 보세요.(설정값은 자유입니다)
 - []
 
 ## 주요 변경사항
@@ -18,10 +25,13 @@
 
 ## 스크린샷
 
-![image](이미지url)
+![image](img\제출이미지\창1.PNG)
+![image](img\제출이미지\창2.PNG)
+![image](img\제출이미지\창3.PNG)
+![image](img\제출이미지\창4.PNG)
 
 ## 멘토에게
 
--
--
+- 지금까지 한 코드 중 불필요하거나 효율적이지 않은 부분을 말씀해주셨으면 좋겠습니다.
+- 학업으로 해야할게 많아 얼마 하지 못했습니다.
 - 셀프 코드 리뷰를 통해 질문 이어가겠습니다.
diff --git a/11-Sprint-Mission b/11-Sprint-Mission
diff --git a/Sprint1.html b/Sprint1.html
@@ -0,0 +1,76 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>판다마켓</title>
+    <link rel="stylesheet" href="default.css">
+</head>
+<body>
+    <header>
+        <a href="/"><img src="img\logo\Property 1=sm.png" alt="판다마켓"></a>
+        <button class="loginBtn">로그인</button>
+    </header>
+    <main>
+        <section class="sect1">
+            <div class="homeTop">
+                <div class="innerHomeTop">
+                    <h1>일상의 모든 물건을 거래해 보세요</h1>
+                    <button>구경하러 가기</button>
+                </div>
+                <img src="img\landing_page\Img_home_top.png" alt="판다">
+            </div>
+        </section>
+        <article>
+            <section class="centerSect">
+                <div class="descriptFrame">
+                    <img src="img\landing_page\Img_home_01.png" alt="인기상품">
+                    <div class="centerDescript">
+                        <p class="descript1">Hot item</p>
+                        <p class="descript2">인기 상품을<br>확인해 보세요</p>
+                        <p class="descript3">가장 HOT한 중고거래 물품을<br>판다마켓에서 확인해보세요</p>
+                    </div> 
+                </div>
+            </section>
+            <section class="centerSect">
+                <div class="descriptFrame">
+                    <div class="centerDescript">
+                        <p class="descript1">Search</p>
+                        <p class="descript2">구매를 원하는<br>상품을 검색하세요</p>
+                        <p class="descript3">구매하고 싶은 물품은 검색해서<br>쉽게 찾아보세요</p>
+                    </div>
+                    <img src="img\landing_page\Img_home_02.png" alt="원하는상품검색">
+                </div>
+            </section>
+            <section class="centerSect">
+                <div class="descriptFrame">
+                    <img src="img\landing_page\Img_home_03.png" alt="판매등록">
+                    <div class="centerDescript">
+                        <p class="descript1">Register</p>
+                        <p class="descript2">판매를 원하는<br>상품을 등록하세요</p>
+                        <p class="descript3">어떤 물건이든 판매하고 싶은 상품을<br>쉽게 등록하세요</p>
+                    </div>
+                </div>
+            </section>
+        </article>
+        <section class="sect2">
+            <div class="homeBottom">
+                <div>
+                    <h1>
+                        믿을 수 있는<br>
+                        판다 마켓 중고 거래
+                    </h1>
+                </div>
+                <img src="img\landing_page\Img_home_bottom.png" alt="판다 소통">
+            </div>
+        </section>
+    </main>
+    <footer>
+        <div>
+            <span></span>
+            <span></span>
+            <span></span>
+        </div>
+    </footer>
+</body>
+</html>
diff --git a/default.css b/default.css
@@ -0,0 +1,137 @@
+*{
+    box-sizing: border-box;
+    margin: 0;
+}
+header{
+    max-width: 1,920px;
+    height: 70px;
+    padding: 9px 200px;
+    border-bottom: 1px;
+    opacity: 0px;
+    background: #FFFFFF;
+    border-bottom: 1px solid #DFDFDF;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+}
+.loginBtn{
+    width: 88px;
+    height: 42px;
+    top: 20px;
+    left: 20px;
+    padding: 12px 23px;
+    gap: 10px;
+    border: #3692FF;
+    border-radius: 8px;
+    opacity: 0px;
+    background: #3692FF;
+    color: #FFFFFF;
+}
+.canClick:hover{
+    cursor: pointer;
+}
+.loginBtn:hover{
+    background: #1967D6;
+}
+.sect1, .sect2{
+    background: #CFE5FF;
+}
+section{
+    max-width: 1920px;
+    height: 540px;
+    position: relative;
+}
+.homeTop{
+    position: absolute;
+    width: 1,110px;
+    height: 340px;
+    top: 200px;
+    left: 405px;
+    right: 405px;
+    gap: 20px;
+    display: flex;
+}
+.innerHomeTop{
+    font-family: Pretendard;
+    font-size: 25px;
+    font-weight: 700;
+    line-height: 56px;
+    text-align: left;
+    display: flex;
+    flex-direction: column;
+    gap: 20px;
+}
+.innerHomeTop > button{
+    width: 357px;
+    height: 56px;
+    padding: 16px 124px;
+    border: #3692FF;
+    gap: 10px;
+    border-radius: 40px;
+    background: #3692FF;
+    color: #FFFFFF;
+}
+.homeBottom{
+    width: 1,110px;
+    height: 397px;
+    position:absolute;
+    top: 143px;
+    left: 405px;
+    gap: 69px;
+    opacity: 0px;
+    align-items: center;
+    display: flex;
+}
+.homeBottom > div{
+    width: 295px;
+    height: 172px;
+    padding: 0px 0px 60px 0px;
+    gap: 5px;
+    opacity: 0px;
+}
+.homeBottom > div >h1{
+    font-family: Pretendard;
+    font-size: 32px;
+    font-weight: 900;
+    line-height: 56px;
+    text-align: left;
+    color: #374151;
+}
+
+article{
+    display: flex;
+    flex-direction: column;
+}
+.centerSect{
+    max-width: 1920px;
+    height: 720px;
+    padding: 138px 466px;
+    gap: 10px;
+}
+.descriptFrame{
+    max-width: 988px;
+    height: 444px;
+    display: flex;
+    background: #FCFCFC;
+
+}
+.centerDescript{
+    display: flex;
+    flex-direction: column;
+    gap: 20px;
+    flex-grow: 1;
+    justify-content: center;
+    text-align: left;
+    position: relative;
+    left: 100px;
+}
+
+footer{
+    width: 1,920px;
+    height: 160px;
+    top: 3448px;
+    padding: 32px 400px;
+    gap: 10px;
+    opacity: 0px;
+
+}
diff --git a/img/landing_page/Img_home_01.png b/img/landing_page/Img_home_01.png
diff --git a/img/landing_page/Img_home_02.png b/img/landing_page/Img_home_02.png
diff --git a/img/landing_page/Img_home_03.png b/img/landing_page/Img_home_03.png
diff --git a/img/landing_page/Img_home_bottom.png b/img/landing_page/Img_home_bottom.png
diff --git a/img/landing_page/Img_home_top.png b/img/landing_page/Img_home_top.png
diff --git a/img/landing_page/img/landing/desktop_01.png b/img/landing_page/img/landing/desktop_01.png
diff --git a/img/landing_page/img/landing/desktop_02.png b/img/landing_page/img/landing/desktop_02.png
diff --git a/img/landing_page/img/landing/desktop_03.png b/img/landing_page/img/landing/desktop_03.png
diff --git a/img/landing_page/img/landing/desktop_04.png b/img/landing_page/img/landing/desktop_04.png
diff --git a/img/landing_page/img/landing/desktop_05.png b/img/landing_page/img/landing/desktop_05.png
diff --git a/img/landing_page/img/landing/mobile_01.png b/img/landing_page/img/landing/mobile_01.png
diff --git a/img/landing_page/img/landing/mobile_02.png b/img/landing_page/img/landing/mobile_02.png
diff --git a/img/landing_page/img/landing/mobile_03.png b/img/landing_page/img/landing/mobile_03.png
diff --git a/img/landing_page/img/landing/mobile_04.png b/img/landing_page/img/landing/mobile_04.png
diff --git a/img/landing_page/img/landing/mobile_05.png b/img/landing_page/img/landing/mobile_05.png
diff --git a/img/landing_page/img/landing/tablet_01.png b/img/landing_page/img/landing/tablet_01.png
diff --git a/img/landing_page/img/landing/tablet_02.png b/img/landing_page/img/landing/tablet_02.png
diff --git a/img/landing_page/img/landing/tablet_03.png b/img/landing_page/img/landing/tablet_03.png
diff --git a/img/landing_page/img/landing/tablet_04.png b/img/landing_page/img/landing/tablet_04.png
diff --git a/img/landing_page/img/landing/tablet_05.png b/img/landing_page/img/landing/tablet_05.png
diff --git a/img/logo/Img_inquiry_empty.png b/img/logo/Img_inquiry_empty.png
diff --git a/img/logo/Img_reply_empty.png b/img/logo/Img_reply_empty.png
diff --git a/img/logo/Property 1=Typo.png b/img/logo/Property 1=Typo.png
diff --git a/img/logo/Property 1=Typo@2x.png b/img/logo/Property 1=Typo@2x.png
diff --git a/img/logo/Property 1=Typo@3x.png b/img/logo/Property 1=Typo@3x.png
diff --git a/img/logo/Property 1=lg.png b/img/logo/Property 1=lg.png
diff --git a/img/logo/Property 1=lg@2x.png b/img/logo/Property 1=lg@2x.png
diff --git a/img/logo/Property 1=lg@3x.png b/img/logo/Property 1=lg@3x.png
diff --git a/img/logo/Property 1=md.png b/img/logo/Property 1=md.png
diff --git a/img/logo/Property 1=md@2x.png b/img/logo/Property 1=md@2x.png
diff --git a/img/logo/Property 1=md@3x.png b/img/logo/Property 1=md@3x.png
diff --git a/img/logo/Property 1=sm.png b/img/logo/Property 1=sm.png
diff --git a/img/logo/Property 1=sm@2x.png b/img/logo/Property 1=sm@2x.png
diff --git a/img/logo/Property 1=sm@3x.png b/img/logo/Property 1=sm@3x.png
diff --git a/img/logo/img_default.png b/img/logo/img_default.png
diff --git a/img/제출이미지/창1.PNG b/img/제출이미지/창1.PNG
diff --git a/img/제출이미지/창2.PNG b/img/제출이미지/창2.PNG
diff --git a/img/제출이미지/창3.PNG b/img/제출이미지/창3.PNG
diff --git a/img/제출이미지/창4.PNG b/img/제출이미지/창4.PNG