[강성구] Sprint2

README.md

@@ -2,32 +2,43 @@
 
 ### 기본
 
-- [x] 랜딩 페이지의 url path는 루트(‘/’)로 설정합니다.
-- [x] title은 “판다마켓”로 설정합니다.
-- [x] 화면의 너비가 1920px 이상이면 하늘색 배경색은 너비를 꽉 채우도록 채워지고, 내부 요소들의 위치는 고정되고, 여백만 커지도록 합니다.
-- [x] 화면의 너비가 1920px 보다 작아질 때, “판다마켓” 로고의 왼쪽 여백 200px“로그인" 버튼의 오른쪽 여백 200px이 유지되고, 화면의 너비가 작아질수록 두 요소간 거리가 가까워지도록 설정합니다.
-- [x] 클릭으로 기능이 동작해야 하는 경우, 사용자가 클릭할 수 있는 요소임을 알 수 있도록 CSS 속성 cursor: pointer 로 설정합니다.
-- [x] “판다마켓” 클릭 시 루트 페이지(‘/’)로 이동합니다.
-- [x] '로그인'버튼 클릭 시 로그인 페이지(‘/login’)로 이동합니다 (빈 페이지)
-- [x] “구경하러가기”버튼 클릭 시(’/items’)로 이동합니다.(빈 페이지)
-- [x] “Privacy Policy”, “FAQ”는 클릭 시 각각 Privacy 페이지(‘/privacy’), FAQ 페이지(‘/faq’)로 이동합니다.(모두 빈 페이지)
-- [x] 페이스북, 트위터, 유튜브, 인스타그램 아이콘을 클릭 시 각각의 홈페이지로 새로운 창이 열리면서 이동합니다.
+- [x] Netlify에 파일 배포가 아닌 포크한 Github 레포지토리로 연결합니다.
+- [x] 피그마 디자인에 맞게 페이지를 만들어 주세요.
+- [x] React와 같은 UI 라이브러리를 사용하지 않고 진행합니다.
+
+#### 로그인 페이지, 회원가입 페이지 공통
+
+- [x] “판다마켓" 로고 클릭 시 루트 페이지(“/”)로 이동합니다.
+- [x] 로그인 페이지, 회원가입 페이지 모두 로고 위 상단 여백이 동일합니다.
+- [x] input 요소에 focus in 일 때, 테두리 색상은 #3692FF입니다.
+- [x] input 요소에 focus out 일 때, 테두리는 없습니다.
+- [x] SNS 아이콘들은 클릭시 각각 실제 서비스 홈페이지로 이동합니다.
+
+#### 로그인 페이지
+
+- [x] “회원가입”버튼 클릭 시 “/signup” 페이지로 이동합니다.
+
+#### 회원가입 페이지
+
+- [x] “로그인”버튼 클릭 시 “/login” 페이지로 이동합니다.
 
 
 ### 심화
 
 - [x] palette에 있는 color값들을 css 변수로 등록하고 사용해 주세요.
+- [x] 비밀번호 input 요소 위에 비밀번호를 확인할 수 있는 아이콘을 추가해 주세요.
+
 
 
 ## 스크린샷
+![회원가입 페이지](readmeSource/signin-page.png)
+![로그인 페이지](readmeSource/login-page.png)
 
-![image](readmeSource/127.0.0.1_5500_index.html.png)
 
 
 ## 사이트 주소
-
-- https://coruscating-platypus-ff5213.netlify.app
+- https://storepanda.netlify.app
 
 ## 멘토에게
-- `rem`과 `em` 사용법이 궁금합니다. (0.83333 rem 이런 경우에도 그냥 쓰는건가요..?)  
+- 
 

style.css → index.css

@@ -15,31 +15,42 @@
     --font-footer: #9ca3af;
 }
 
+html {
+    font-size: 24px;
+}
 
 body {
     max-width: 1920px;
     width: 100%;
     color: var(--font);
     font-family: "Pretendard-Regular", 'Noto Sans';
-    font-size: 24px;
     font-weight: 500;
     margin: 0;
 }
 
+h3 {
+    text-decoration: none;
+}
+
 a {
     text-decoration: none;
     cursor: pointer;
 }
 
 header .nav {
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    background-color: white;
     display: flex;
     align-items: center;
     justify-content: space-between;
     padding: 0 200px;
 }
 
 main section {
-    width: 1200px;
+    max-width: 1200px;
     height: 720px;
     margin: 0 auto;
     display: flex;
@@ -58,8 +69,7 @@ main section {
 }
 
 header .login {
-    width: 128px;
-    height: 48px;
+    padding: 11.5px 23px;
     border-radius: 8px;
     padding: 12px 20px;
 }
@@ -74,8 +84,9 @@ header .login {
     max-width: 1920px;
     margin: 0 auto;
     display: flex;
-    align-items: center;
+    /* align-items: center; */
     justify-content: center;
+    flex-wrap: wrap;
 }
 
 .headline .headline-title,
@@ -88,8 +99,8 @@ header .login {
     gap: 32px;
 }
 
-.headline .headline-content img {
-    margin: 100px 0 0;
+.headline{
+    padding-top: 100px;
 }
 
 .headline .headline-btn {
@@ -100,6 +111,7 @@ header .login {
 .container {
     display: flex;
     align-items: center;
+    flex-wrap: wrap;
     gap: 64px;
 }
 
@@ -109,11 +121,6 @@ header .login {
     font-weight: 700;
 }
 
-.container > img {
-    width: 588px;
-    height: 444px;
-}
-
 .container .content {
     display: flex;
     flex-direction: column;
@@ -139,7 +146,6 @@ header .login {
 
 .search .container {
     flex-direction: row-reverse;
-
 }
 
 .search .container .content {
@@ -151,7 +157,7 @@ footer .bottom-info{
     background-color: var(--footer-color);
     max-width: 1920px;
     height: 160px;
-    padding: 32px 200px;
+    padding: 1.5rem 10vw;
 }
 
 .bottom-info .bottom-content {

index.html

@@ -7,34 +7,34 @@
     <link rel="apple-touch-icon" sizes="180x180" href="source/icons/favicon/apple-touch-icon.png">
     <link rel="icon" type="image/png" sizes="32x32" href="source/icons/favicon/favicon-32x32.png">
     <link rel="icon" type="image/png" sizes="16x16" href="source/icons/favicon/favicon-16x16.png">
-    <link rel="stylesheet" href="style.css" />
-    <!-- <link rel="manifest" href="/site.webmanifest"> -->
+    <link rel="stylesheet" href="index.css" />
+
 </head>
 <body>
     <header>
-        <section class="nav">
+        <nav class="nav">
             <a href="/" class="logo">
                 <img class="logo-img" src="source/images/logo/logo.png" alt="판다마켓 로고"/>
             </a>
-            <button class="btn login" onclick="location.href='login'">로그인</button>
-        </section>
+            <button class="btn login" onclick="goAnotherPage('login/login.html')">로그인</button>
+        </nav>
     </header>
     <section class="headline">
         <div class="headline-content">
             <div class="headline-title">
-                <div class="title">일상의 모든 물건을<br>거래해 보세요</div>
-                <button class="btn headline-btn" onclick="location.href='/items'">구경하러 가기</button>   
+                <h3 class="title">일상의 모든 물건을<br>거래해 보세요</h3>
+                <button class="btn headline-btn" onclick="goAnotherPage('items/')">구경하러 가기</button>   
             </div>
-            <img src="source/images/headline/Img_home_top.png" alt="headline image">
+            <img src="source/images/headline/Img_home_top.png" alt="headline image" width="50%">
         </div>
     </section>
     <main>
         <section class="popular">
             <div class="container">
-                <img class="info-img" src="source/images/main/section1/Img_home_01.png" alt="Hot Item Image">
+                <img class="info-img" src="source/images/main/section1/Img_home_01.png" alt="Hot Item Image" width="50%">
                 <div class="content">
                     <div class="category">Hot item</div>
-                    <div class="section-title popular-title">인기 상품을<br>확인해 보세요</div>
+                    <h3 class="section-title popular-title">인기 상품을<br>확인해 보세요</h3>
                     <div class="section-description popular-description">
                         가장 HOT한 중고거래 물품을<br>판다 마켓에서 확인해 보세요
                     </div>
@@ -43,10 +43,10 @@
         </section>
         <section class="search">
             <div class="container">
-                <img class="info-img" src="source/images/main/section2/Img_home_02.png" alt="Search Image">
+                <img class="info-img" src="source/images/main/section2/Img_home_02.png" alt="Search Image" width="50%">
                 <div class="content">
                     <div class="category">Search</div>
-                    <div class="section-title search-title">구매를 원하는<br>상품을 검색하세요</div>
+                    <h3 class="section-title search-title">구매를 원하는<br>상품을 검색하세요</h3>
                     <div class="section-description search-description">
                         구매하고 싶은 물품은 검색해서<br>쉽게 찾아보세요
                     </div>
@@ -55,10 +55,10 @@
         </section>
         <section class="register">
             <div class="container">
-                <img class="info-img" src="source/images/main/section3/Img_home_03.png" alt="Register Image">
+                <img class="info-img" src="source/images/main/section3/Img_home_03.png" alt="Register Image" width="50%">
                 <div class="content">
                     <div class="category">Register</div>
-                    <div class="section-title register-title">판매를 원하는<br>상품을 등록하세요</div>
+                    <h3 class="section-title register-title">판매를 원하는<br>상품을 등록하세요</h3>
                     <div class="section-description register-description">
                         어떤 물건이든 판매하고 싶은 상품을<br>쉽게 등록하세요
                     </div>
@@ -69,11 +69,11 @@
     <section class="footline">
         <div class="footline-content">
             <div class="footline-title">
-                <div class="title">
+                <h3 class="title">
                     믿을 수 있는<br>판다마켓 중고거래
-                </div>   
+                </h3>   
             </div>
-            <img src="source/images/footline/Img_home_bottom.png" alt="headline image">
+            <img src="source/images/footline/Img_home_bottom.png" alt="headline image" width="50%">
         </div>
     </section>
     <footer>
@@ -107,5 +107,6 @@
             </div>
         </section>
     </footer>
+    <script src="index.js"></script>
 </body>
 </html>

index.js

@@ -0,0 +1,3 @@
+function goAnotherPage(src) {
+    location.href = src;
+}