codeit-bootcamp-frontend · JaeSang1998 · Aug 20, 2024 · Aug 11, 2024 · Aug 17, 2024 · Aug 17, 2024
diff --git a/faq.html b/faq.html
@@ -0,0 +1,32 @@
+<!-- 
+    <VS Code에서 HTML 기본구조 자동생성하기>
+
+    - `!` 입력 후 tab 키를 누르면 HTML 기본 양식이 입력됩니다.
+
+    - 이때, <html lang="en"> 부분을 매번 lang="ko"로 바꾸는 것이 번거로우니 양식을 바꿔봅시다.
+      command/ctrl + 쉼표 를 눌러 VS Code 설정창을 열고 emmet을 검색해 주세요. 
+      스크롤을 내려 Emmet: Variables 섹션에 Add Item을 누르고 lang Item의 Value를 ko로 바꿔 입력해 주세요. 
+      마지막으로 Add Item 버튼을 눌러 저장하면 끝!
+-->
+
+<!DOCTYPE html>
+<html lang="ko">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <!-- 기본 양식 생성 후, 제목을 수정하고 해당 페이지에 적용할 파비콘 및 스타일시트를 추가해 주세요. -->
+    <title>판다마켓 - FAQ</title>
+    <link rel="icon" href="images/logo/favicon.ico" />
+    <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="styles/global.css" />
+  </head>
+
+  <body>
+    <h1>임시 FAQ 페이지</h1>
+  </body>
+</html>
diff --git a/images/Component 2.png b/images/Component 2.png
diff --git a/images/Component [email protected] b/images/Component [email protected]
diff --git a/images/Component [email protected] b/images/Component [email protected]
diff --git a/images/Component 3.png b/images/Component 3.png
diff --git a/images/Component [email protected] b/images/Component [email protected]
diff --git a/images/Component [email protected] b/images/Component [email protected]
diff --git a/images/Img_home_01.png b/images/Img_home_01.png
diff --git a/images/[email protected] b/images/[email protected]
diff --git a/images/[email protected] b/images/[email protected]
diff --git a/images/Img_home_02-1.png b/images/Img_home_02-1.png
diff --git a/images/Img_home_02.png b/images/Img_home_02.png
diff --git a/images/[email protected] b/images/[email protected]
diff --git a/images/Img_home_03.png b/images/Img_home_03.png
diff --git a/images/[email protected] b/images/[email protected]
diff --git a/images/[email protected] b/images/[email protected]
diff --git a/images/Img_home_bottom.png b/images/Img_home_bottom.png
diff --git a/images/[email protected] b/images/[email protected]
diff --git a/images/[email protected] b/images/[email protected]
diff --git a/images/Img_home_top.png b/images/Img_home_top.png
diff --git a/images/[email protected] b/images/[email protected]
diff --git a/images/[email protected] b/images/[email protected]
diff --git a/images/Property 1=Typo.png b/images/Property 1=Typo.png
diff --git a/images/Property [email protected] b/images/Property [email protected]
diff --git a/images/Property 1=md.png b/images/Property 1=md.png
diff --git a/images/Property 1=sm.png b/images/Property 1=sm.png
diff --git a/images/btn_large-1.png b/images/btn_large-1.png
diff --git a/images/btn_large-2.png b/images/btn_large-2.png
diff --git a/images/btn_large-3.png b/images/btn_large-3.png
diff --git a/images/btn_large.png b/images/btn_large.png
diff --git a/images/btn_small-1.png b/images/btn_small-1.png
diff --git a/images/btn_small-2.png b/images/btn_small-2.png
diff --git a/images/btn_small-3.png b/images/btn_small-3.png
diff --git a/images/btn_small.png b/images/btn_small.png
diff --git a/images/btn_visibility_off_24px.png b/images/btn_visibility_off_24px.png
diff --git a/images/btn_visibility_on_24px.png b/images/btn_visibility_on_24px.png
diff --git a/images/ic_facebook.png b/images/ic_facebook.png
diff --git a/images/ic_facebook.svg b/images/ic_facebook.svg
diff --git a/images/[email protected] b/images/[email protected]
diff --git a/images/[email protected] b/images/[email protected]
diff --git a/images/ic_instagram.png b/images/ic_instagram.png
diff --git a/images/ic_instagram.svg b/images/ic_instagram.svg
diff --git a/images/[email protected] b/images/[email protected]
diff --git a/images/[email protected] b/images/[email protected]
diff --git a/images/ic_twitter.png b/images/ic_twitter.png
diff --git a/images/ic_twitter.svg b/images/ic_twitter.svg
diff --git a/images/[email protected] b/images/[email protected]
diff --git a/images/[email protected] b/images/[email protected]
diff --git a/images/ic_youtube.png b/images/ic_youtube.png
diff --git a/images/ic_youtube.svg b/images/ic_youtube.svg
diff --git a/images/[email protected] b/images/[email protected]
diff --git a/images/[email protected] b/images/[email protected]
diff --git a/images/logo/favicon.ico b/images/logo/favicon.ico
diff --git a/images/logo/panda-market-logo.png b/images/logo/panda-market-logo.png
diff --git a/images/panda_logo_1.png b/images/panda_logo_1.png
diff --git a/images/panda_logo_1_2x.png b/images/panda_logo_1_2x.png
diff --git a/images/pandaface.png b/images/pandaface.png
diff --git a/images/pandamarket.png b/images/pandamarket.png
diff --git a/index.html b/index.html
@@ -0,0 +1,112 @@
+<!DOCTYPE html>
+<html lang="ko">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>판다마켓</title>
+  <link rel="stylesheet" href="styles/home.css">
+  <link rel="stylesheet" as="style" crossorigin href="https://cdn.jsdelivr.net/gh/orioncactus/[email protected]/dist/web/static/pretendard.css">
+  <link rel="icon" href="images/logo/favicon.ico" />
+  <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/gh/noonnu/[email protected]/rokaf-sans-medium.woff2">
+</head>
+<body>
+  <header>
+      <div class="header-logo-box">
+         <a href="/">
+           <img class="header-logo cursor_pointer" src="images/panda_logo_1.png" alt="판다마켓 로고">
+         </a>
+      </div>
+      <div class="header-login-box">
+         <a href="login.html">
+           <img class="login-button cursor_pointer" src="images/btn_small.png" alt="로그인 버튼">
+         </a>
+      </div>
+  </header>
+  <main>
+    <div class="main-box">
+       <div class="main-box-kid1">
+         <p class="main-box-kid1-p">일상의 모든 물건을<br> 거래해 보세요</p>
+         <a href="items.html">
+          <img class="sightseeing cursor_pointer" src="images/btn_large.png" alt="구경하러 가기 버튼">
+         </a>
+       </div>
+       <div class="main-box-kid2">
+         <img class="main-panda" src="images/[email protected]" alt="메인 판다 그림">
+      </div>
+    </div>    
+  </main>
+  <div class="section-background">
+    <section class="section-container">
+      <div class="section-box">
+      <img class="section_content" src="images/Img_home_01.png" alt="Hot item 그림">
+      <div class="section_content_p_box">
+          <p class="section_content_p1">Hot item</p>
+          <p class="section_content_p2">인기 상품을<br> 확인해보세요</p>
+          <p class="section_content_p3">가장 HOT한 중고거래 물품을<br> 판다 마켓에서 확인해보세요</p>
+      </div>
+      </div>         
+    </section>
+    <section class="section-container-right">
+      <div class="section-box-right">
+      <img class="section_content" src="images/Img_home_02.png" alt="Search 그림">
+      <div class="section_content_p_box">
+          <p class="section_content_p1">Search</p>
+          <p class="section_content_p2">구매를 원하는<br>상품을 검색하세요</p>
+          <p class="section_content_p3">구매하고 싶은 물품은 검색해서<br>쉽게 찾아보세요</p>
+      </div>
+      </div>         
+    </section>
+    <section class="section-container">
+      <div class="section-box">
+      <img class="section_content" src="images/Img_home_03.png" alt="Register 그림">
+      <div class="section_content_p_box">
+          <p class="section_content_p1">Register</p>
+          <p class="section_content_p2">판매를 원하는<br>상품을 등록하세요</p>
+          <p class="section_content_p3">어떤 물건이든 판매하고 싶은 상품을<br>쉽게 등록하세요</p>
+      </div>
+      </div>         
+    </section>
+  </div>
+  <div class="bottom-container">
+      <div class="bottom-box">
+        <div class="bottom-p">
+          믿을 수 있는<br>
+          판다마켓 중고 거래
+        </div>
+        <div class="bottom-img">
+          <img class="bottom-panda" src="images/[email protected]" alt="bottom 판다 그림">
+        </div>
+      </div>
+    </div>
+    <footer class="footer-container">
+      <div class="footer-box">
+        <div class="footer-kid1">
+            @codeit - 2024
+        </div>
+        <div class="footer-kid2">
+            <a class="footer-kid-a cursor_pointer" href="privacy.html">
+              Privacy Policy 
+            </a>
+            <a class="footer-kid-a cursor_pointer" href="faq.html">
+              FAQ
+            </a>
+        </div>
+        <div class="footer-kid3">
+            <a href="https://www.facebook.com/codeit.kr/">
+             <img class="footer-link cursor_pointer" src="images/ic_facebook.png" alt="Facebook logo">
+            </a>
+            <a href="https://x.com/codeitkr">
+              <img class="footer-link cursor_pointer" src="images/ic_twitter.png" alt="X logo">
+             </a>
+             <a href="https://www.youtube.com/channel/UCCM79CPm2WbBYTRaiNEExbg">
+              <img class="footer-link cursor_pointer" src="images/ic_youtube.png" alt="Youtube logo">
+             </a>
+             <a href="https://www.instagram.com/codeit_kr/">
+              <img class="footer-link cursor_pointer" src="images/ic_instagram.png" alt="Instagram logo">
+             </a>
+        </div>
+      </div>
+    </footer>
+    <script src="index.js"></script>
+</body>
+</html>
diff --git a/index.js b/index.js
@@ -0,0 +1,31 @@
+document.addEventListener("click", function(event) {
+  if (event.target.closest(".toggle-password")) {
+    const toggle = event.target.closest(".toggle-password");
+    const passwordField = toggle.previousElementSibling;
+    const icon = toggle.querySelector("i");
+
+    const isPassword = passwordField.type === "password";
+    passwordField.type = isPassword ? "text" : "password";
+
+    icon.classList.toggle("fa-eye");
+    icon.classList.toggle("fa-eye-slash");
+  }
+});
+
+
+document.querySelectorAll("form").forEach(function(form) {
+  form.addEventListener("input", function() {
+    const inputs = form.querySelectorAll("input");
+    const submitButton = form.querySelector("button");
+
+    const allFilled = Array.from(inputs).every(input => input.value.trim() !== "");
+
+    if (allFilled) {
+      submitButton.classList.add("button-on");
+      submitButton.classList.remove("button-off");
+    } else {
+      submitButton.classList.add("button-off");
+      submitButton.classList.remove("button-on");
+    }
+  });
+});
diff --git a/items.html b/items.html
@@ -0,0 +1,20 @@
+<!DOCTYPE html>
+<html lang="ko">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>판다마켓 - 상품 리스트</title>
+    <link rel="icon" href="images/logo/favicon.ico" />
+    <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="styles/global.css" />
+  </head>
+
+  <body>
+    <h1>임시 상품 리스트 페이지</h1>
+  </body>
+</html>
diff --git a/login.html b/login.html
@@ -0,0 +1,67 @@
+<!DOCTYPE html>
+<html lang="ko">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>판다마켓 - 로그인</title>
+    <link rel="icon" href="images/logo/favicon.ico" />
+    <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="styles/login-signup.css" />
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
+  </head>
+  <body>
+    <div class="login-background">
+    <div class="login-container">
+      <div class="login-logo-box">
+        <a class="gohome" href="/">
+         <img class="login-logo1" src="images/pandaface.png" alt="판다얼굴 로고 그림">
+         <img class="login-logo2" src="images/pandamarket.png" alt="판다마켓 글씨 그림">
+        </a>
+      </div>
+      <div class="form-box">
+        <form>
+          <label>이메일</label>
+          <input
+            name="email"
+            type="email"
+            placeholder="이메일을 입력해주세요"
+          />
+          <label>비밀번호</label>
+          <div class="password-container">
+          <input
+            class="password-input"
+            autocomplete="off"
+            name="password"
+            type="password"
+            placeholder="비밀번호를 입력해주세요"
+          />
+          <span class="toggle-password">
+            <i class="fas fa-eye-slash"></i>
+          </span>
+          </div>
+          <button class="button-off">로그인</button>
+      </div>
+      <div class="social-login-box">
+        <p class="social-login-p">간편 로그인하기</p>
+        <div class="social-login-link">
+          <a class="social-login google" href="https://accounts.google.com/ServiceLogin?hl=ko&passive=true">
+           <img src="images/Component 2.png" alt="구글 로그인">
+          </a>
+          <a class="social-login kakao" href="https://accounts.kakao.com/login">
+           <img src="images/Component 3.png" alt="카카오톡 로그인">
+          </a>
+        </div>
+      </div>
+      <p class="sign-up-login">판다마켓이 처음이신가요?
+        <a href="signup.html">회원가입</a>
+      </p>
+    </div>
+    </div>
+    <script src="index.js"></script>
+  </body>
+</html>
diff --git a/privacy.html b/privacy.html
@@ -0,0 +1,32 @@
+<!-- 
+    <VS Code에서 HTML 기본구조 자동생성하기>
+
+    - `!` 입력 후 tab 키를 누르면 HTML 기본 양식이 입력됩니다.
+
+    - 이때, <html lang="en"> 부분을 매번 lang="ko"로 바꾸는 것이 번거로우니 양식을 바꿔봅시다.
+      command/ctrl + 쉼표 를 눌러 VS Code 설정창을 열고 emmet을 검색해 주세요. 
+      스크롤을 내려 Emmet: Variables 섹션에 Add Item을 누르고 lang Item의 Value를 ko로 바꿔 입력해 주세요. 
+      마지막으로 Add Item 버튼을 눌러 저장하면 끝!
+-->
+
+<!DOCTYPE html>
+<html lang="ko">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <!-- 기본 양식 생성 후, 제목을 수정하고 해당 페이지에 적용할 파비콘 및 스타일시트를 추가해 주세요. -->
+    <title>판다마켓 - 이용약관</title>
+    <link rel="icon" href="images/logo/favicon.ico" />
+    <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="styles/global.css" />
+  </head>
+
+  <body>
+    <h1>임시 이용약관 페이지</h1>
+  </body>
+</html>