codeit-bootcamp-frontend · baeggmin · Jun 21, 2025 · Jun 19, 2025
diff --git a/common.css b/common.css
@@ -0,0 +1,8 @@
+body {
+  font-family: 'Pretendard', 'Noto Sans KR', sans-serif;
+}
+
+a {
+  text-decoration: none;
+  color: inherit;
+}
diff --git a/images/Property1.png b/images/Property1.png
diff --git a/images/Property2.png b/images/Property2.png
diff --git a/images/facebook.png → images/ic_facebook.png b/images/facebook.png → images/ic_facebook.png
diff --git a/images/ic_google.png b/images/ic_google.png
diff --git a/images/instagram.png → images/ic_instagram.png b/images/instagram.png → images/ic_instagram.png
diff --git a/images/ic_kakao.png b/images/ic_kakao.png
diff --git a/images/twitter.png → images/ic_twitter.png b/images/twitter.png → images/ic_twitter.png
diff --git a/images/youtube.png → images/ic_youtube.png b/images/youtube.png → images/ic_youtube.png
diff --git a/images/섹션1.png → images/item_hot.png b/images/섹션1.png → images/item_hot.png
diff --git a/images/섹션3.png → images/item_register.png b/images/섹션3.png → images/item_register.png
diff --git a/images/섹션2.png → images/item_search.png b/images/섹션2.png → images/item_search.png
diff --git a/images/login_header.png b/images/login_header.png
diff --git a/images/reply.png b/images/reply.png
diff --git a/index.html b/index.html
@@ -1,10 +1,13 @@
 <!DOCTYPE html>
-<html lang="en">
+<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="style/style.css">
+  <link rel="stylesheet" href="style/common.css">
+  <link rel="stylesheet" href="style/reset.css">
+
 </head>
 <body>
   <!--헤더 부분-->
@@ -36,7 +39,7 @@ <h1 class = text>일상의 모든 물건을 <br> 경험해 보세요</h1>
     <!--섹션-->
     <section class="items">
       <div class="item">
-      <img class="items_img" src="images/섹션1.png" alt="인기상품을 확인해 보세요">
+      <img class="items_img" src="images/item_hot.png" alt="인기상품을 확인해 보세요">
       <div class="item_container">
       <h6 class="items_title">Hot item</h6>
       <h1 class="items_info">인기 상품을 <br>확인해 보세요</h1>
@@ -47,7 +50,7 @@ <h3 class="items_text">가장 HOT한 중고거래 물품을 <br>판다마켓에
        <!--섹션1-->
    <div class ="item">
     <div class="item_container_left">
-    <img class="items_img" src="images/섹션2.png" alt="구매를 원하는 상품을 검색하세요">
+    <img class="items_img" src="images/item_search.png" alt="구매를 원하는 상품을 검색하세요">
     <div class="item_container">
     <h6 class="items_title">Search</h6>
     <h1 class="items_info">구매를 원하는<br>상품을 검색하세요</h1>
@@ -57,7 +60,7 @@ <h3 class="items_text">구매하고 싶은 물품은 검색해서<br>쉽게 찾
   </div>
    <!--섹션2-->
    <div class="item">
-    <img class="items_img" src="images/섹션3.png" alt="판매를 원하는 상품을 등록하세요">
+    <img class="items_img" src="images/item_register.png" alt="판매를 원하는 상품을 등록하세요">
     <div class="item_container">
     <h6 class="items_title">Register</h6>
     <h1 class="items_info">판매를 원하는<br>상품을 등록하세요</h1>
@@ -87,16 +90,16 @@ <h1 class="text">믿을 수 있는 <br>판다마켓 중고 거래</h1>
     </div>
     <div class="sns" >
       <a href="https://facebook.com" target="_blank" alt="페이스북">
-      <img class="sns_img" src="images/facebook.png">
+      <img class="sns_img" src="images/ic_facebook.png">
     </a>
     <a href="https://twitter.com" target="_blank" alt="트위터">
-    <img class="sns_img" src="images/twitter.png" alt="트위터">
+    <img class="sns_img" src="images/ic_twitter.png" alt="트위터">
     </a>
     <a href="https://youtube.com" target="_blank" alt="유트브">   
-    <img class="sns_img" src="images/youtube.png" alt="트위터">
+    <img class="sns_img" src="images/ic_youtube.png" alt="트위터">
     </a>
     <a href="https://instagram.com" target="_blank" alt="인스타">
-    <img class="sns_img" src="images/instagram.png" alt="인스타">
+    <img class="sns_img" src="images/ic_instagram.png" alt="인스타">
     </a>
     </div>
   </footer>

diff --git a/login/join.css b/login/join.css
@@ -0,0 +1,133 @@
+*{
+  box-sizing: border-box;
+  border:none;
+  margin:0;
+
+}
+
+a{
+  text-decoration: none;
+}
+
+.join_header{
+ display: flex;
+ justify-content: center;
+ padding-top: 150px;
+ padding-bottom:20px;
+ align-items: center;
+ gap: 30px
+}
+
+.join_title{
+font-size:67px;
+font-weight: 700;
+color:#3692FF;
+line-height:100%;
+}
+
+.container {
+margin:0 auto;
+width: 640px;
+}
+
+
+.label{
+  display:block;
+  margin:16px 0;
+  color:#1F2937;
+  font-size:18px;
+  font-weight:700;
+  line-height:26px;
+}
+
+.login_box{
+  background-color: #F3F4F6;
+  width:640px;
+  height:56px;
+  border-radius: 15px;
+  padding:16px 20px; 
+}
+
+.login_bt{
+  width:640px;
+  height:56px;
+  border-radius:30px;
+  color:#F3F4F6;
+  background-color: #3692FF;
+  margin:30px 0;
+  font-size:20px;
+  font-weight: 600;
+  line-height:32px;
+}
+
+.pass_box{
+  position: relative;
+}
+
+.icon{
+  position: absolute;
+  bottom:20px;
+  left:600px;
+  cursor: pointer;
+}
+
+
+.repass_box{
+  position: relative;
+}
+
+.icon2{
+  position: absolute;
+  bottom:20px;
+  left:600px;
+  cursor: pointer;
+}
+
+.easy_login{
+  display: flex;
+  align-items: center;
+  background-color: #E6F2FF;
+  height:74px;
+  border-radius: 8px;
+  justify-content: space-between;
+  padding:0 20px;
+
+
+}
+
+#easy_login_text{
+color:#1F2937;
+font-size:16px;
+font-weight: 500;
+line-height:26px;
+}
+
+.sns{
+  display:flex;
+  gap: 10px;
+}
+
+.sns_img{
+  width:42px;
+  height: 42px;
+}
+
+.already_ppl{
+  margin-top:30px;
+  margin-bottom: 100px;
+  display:flex;
+  justify-content: center;
+  align-items: center;
+  gap:10px;
+  font-weight: 500;
+  font-size:14px;
+}
+
+#already_ppl_info{
+  color:#1F2937;
+}
+
+#already_ppl_log{
+  color:#3692FF;
+  text-decoration: underline;
+}
diff --git a/login/join.html b/login/join.html
@@ -0,0 +1,63 @@
+<!DOCTYPE html>
+<html lang="ko">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <link rel="stylesheet" href="./join.css">
+  <link
+      rel="stylesheet"
+      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.6.0/css/all.min.css"
+      integrity="sha512-Kc323vGBEqzTmouAECnVceyQqyqdsSiqLQISBL29aUW4U/M7pSPA/gEUZQqv1cwx4OnYxTxve5UMg5GT6L4JJg=="
+      crossorigin="anonymous"
+      referrerpolicy="no-referrer"
+    />
+  <title>판다마켓 회원가입</title>
+</head>
+<body>
+  <!--헤더부분-->
+  <header class="join_header">
+    <img src="../images/login_header.png" alt="판다얼굴">
+  <a class="join_title" href="../index.html">판다마켓</a>
+    </header>
+
+  <form>
+    <div class="container">
+    <!-- <div class="id_box"> -->
+  <label class="label" for="uesremail">이메일</label>
+  <input class="login_box" id="uesremail" name="uesremail" type="text">
+  <label class="label" for="uesrnickname">닉네임</label>
+  <input class="login_box" id="uesrnickname" name="uesrnickname" type="text">
+  <!-- </div> -->
+  <div class="pass_box">
+  <label class="label" for="userpassword">비밀번호</label>
+  <input class="login_box" id="userpassword" name="password" type="password">
+  <div class="icon">
+    <i class="fa-regular fa-eye-slash"></i>
+  </div>
+  </div >
+  <div class="repass_box">
+  <label class="label" for="password">비밀번호 확인</label>
+  <input class="login_box" id="password" name="password" >
+  <div class="icon2">
+    <i class="far fa-eye"></i>
+  </div>
+  </div>
+    <button class="login_bt" type="submit">회원가입</button>
+  <div class="easy_login">
+    <p id="easy_login_text">간편 로그인하기</p>
+    <div class="sns">
+    <a href="https://www.google.co.kr" target="_blank" alt="구글">
+      <img class="sns_img" src="../images/ic_google.png" alt="구글">
+    </a>
+    <a  href="https://www.kakaocorp.com" target="_blank" alt="카카오">
+      <img class="sns_img" src="../images/ic_kakao.png" alt="카카오">
+    </a>
+    </div>
+    </div>
+    <div class="already_ppl">
+    <p id="already_ppl_info">이미 회원이신가요?</p><a id="already_ppl_log" href="./login.html">로그인</a>
+  </div>
+    </div>
+</form>
+</body>
+</html>
diff --git a/login/login.html b/login/login.html
@@ -1,24 +1,54 @@
 <!DOCTYPE html>
-<html lang="en">
+<html lang="ko">
 <head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <link rel="stylesheet" href="style.css">
-  <title>로그인</title>
+  <link
+      rel="stylesheet"
+      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.6.0/css/all.min.css"
+      integrity="sha512-Kc323vGBEqzTmouAECnVceyQqyqdsSiqLQISBL29aUW4U/M7pSPA/gEUZQqv1cwx4OnYxTxve5UMg5GT6L4JJg=="
+      crossorigin="anonymous"
+      referrerpolicy="no-referrer"
+    />
+  <title>판다마켓 로그인</title>
 </head>
 <body>
-  <h1 class="login-title">로그인</h1>
-  <form >
-    <div>
-  <label for="uesrname">아이디</label>
-  <input id="uesrname" name="username">
+  <!--헤더부분-->
+  <header class="login_header">
+    <img src="../images/login_header.png" alt="판다얼굴">
+    <a class="login_title" href="../index.html">판다마켓</a>
+    </header>
+
+  <form>
+    <div class="container">
+    <!-- <div class="id_box"> -->
+  <label class="label" for="uesrname">이메일</label>
+  <input class="login_box" id="uesrname" name="username" type="text">
+  <!-- </div> -->
+  <div class="pass_box">
+  <label class="label" for="password">비밀번호</label>
+  <input class="login_box" id="password" name="password" type="password">
+  <div class="icon">
+    <i class="fa-regular fa-eye-slash"></i>
   </div>
-  <div>
-  <label for="password">비밀번호</label>
-  <input id="password" name="password" type="password">
   </div>
-  <button type="submit">확인</button>
-
+  <button class="login_bt" type="submit">로그인</button>
+  <div class="easy_login">
+    <p id="easy_login_text">간편 로그인하기</p>
+    <div class="sns">
+    <a href="https://www.google.co.kr" target="_blank" alt="구글">
+      <img class="sns_img" src="../images/ic_google.png" alt="구글">
+    </a>
+    <a  href="https://www.kakaocorp.com" target="_blank" alt="카카오">
+      <img class="sns_img" src="../images/ic_kakao.png" alt="카카오">
+    </a>
+    </div>
+    </div>
+    <div class="new_ppl">
+    <p id="new_ppl_info">판다마켓이 처음이신가요?</p><a id="new_ppl_join" href="./join.html">회원가입</a>
+  </div>
+    </div>
 </form>
 </body>
 </html>