codeit-sprint-fullstack · fogns149 · Nov 11, 2024 · Nov 17, 2024 · Nov 17, 2024
diff --git a/미션1/1번 배경이미지.png → 미션1랜딩 페이지/1번 배경이미지.png b/미션1/1번 배경이미지.png → 미션1랜딩 페이지/1번 배경이미지.png
diff --git a/미션1/1번펜더이미지.png → 미션1랜딩 페이지/1번펜더이미지.png b/미션1/1번펜더이미지.png → 미션1랜딩 페이지/1번펜더이미지.png
diff --git a/미션1/FAQ.png → 미션1랜딩 페이지/FAQ.png b/미션1/FAQ.png → 미션1랜딩 페이지/FAQ.png
diff --git a/미션1/desktop_01.png → 미션1랜딩 페이지/desktop_01.png b/미션1/desktop_01.png → 미션1랜딩 페이지/desktop_01.png
diff --git a/미션1/index.html → 미션1랜딩 페이지/index.html b/미션1/index.html → 미션1랜딩 페이지/index.html
diff --git a/미션1/pp.png → 미션1랜딩 페이지/pp.png b/미션1/pp.png → 미션1랜딩 페이지/pp.png
diff --git a/미션1/구경하러가기.png → 미션1랜딩 페이지/구경하러가기.png b/미션1/구경하러가기.png → 미션1랜딩 페이지/구경하러가기.png
diff --git a/미션1/로그인.png → 미션1랜딩 페이지/로그인.png b/미션1/로그인.png → 미션1랜딩 페이지/로그인.png
diff --git a/미션1/미션배경1.png → 미션1랜딩 페이지/미션배경1.png b/미션1/미션배경1.png → 미션1랜딩 페이지/미션배경1.png
diff --git a/미션1/미션사진3.png → 미션1랜딩 페이지/미션사진3.png b/미션1/미션사진3.png → 미션1랜딩 페이지/미션사진3.png
diff --git a/미션1/미션사진4.png → 미션1랜딩 페이지/미션사진4.png b/미션1/미션사진4.png → 미션1랜딩 페이지/미션사진4.png
diff --git a/미션1/미션사진5.png → 미션1랜딩 페이지/미션사진5.png b/미션1/미션사진5.png → 미션1랜딩 페이지/미션사진5.png
diff --git a/미션1/미션사진6.png → 미션1랜딩 페이지/미션사진6.png b/미션1/미션사진6.png → 미션1랜딩 페이지/미션사진6.png
diff --git a/미션1/미션사진7.png → 미션1랜딩 페이지/미션사진7.png b/미션1/미션사진7.png → 미션1랜딩 페이지/미션사진7.png
diff --git a/미션1/유튜브.png → 미션1랜딩 페이지/유튜브.png b/미션1/유튜브.png → 미션1랜딩 페이지/유튜브.png
diff --git a/미션1/인스타그램.png → 미션1랜딩 페이지/인스타그램.png b/미션1/인스타그램.png → 미션1랜딩 페이지/인스타그램.png
diff --git a/미션1/일상의 모든 물건을 거래해 보세요.png → 미션1랜딩 페이지/일상의 모든 물건을 거래해 보세요.png b/미션1/일상의 모든 물건을 거래해 보세요.png → 미션1랜딩 페이지/일상의 모든 물건을 거래해 보세요.png
diff --git a/미션1/작은로고.png → 미션1랜딩 페이지/작은로고.png b/미션1/작은로고.png → 미션1랜딩 페이지/작은로고.png
diff --git a/미션1/코드잇마크.png → 미션1랜딩 페이지/코드잇마크.png b/미션1/코드잇마크.png → 미션1랜딩 페이지/코드잇마크.png
diff --git a/미션1/큰로고.png → 미션1랜딩 페이지/큰로고.png b/미션1/큰로고.png → 미션1랜딩 페이지/큰로고.png
diff --git a/미션1/트위터.png → 미션1랜딩 페이지/트위터.png b/미션1/트위터.png → 미션1랜딩 페이지/트위터.png
diff --git a/미션1/판다마켓.css → 미션1랜딩 페이지/판다마켓.css b/미션1/판다마켓.css → 미션1랜딩 페이지/판다마켓.css
diff --git a/미션2-1/btn_large (2).png → 미션2-1웹 로그인페이지/btn_large (2).png b/미션2-1/btn_large (2).png → 미션2-1웹 로그인페이지/btn_large (2).png
diff --git a/미션2-1/index.html → 미션2-1웹 로그인페이지/index.html b/미션2-1/index.html → 미션2-1웹 로그인페이지/index.html
@@ -4,6 +4,7 @@
     <link rel="stylesheet" href="style.css" />
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <script src="미션2.js" defer></script>
     <title>login2</title>
   </head>
   <body>
@@ -13,16 +14,20 @@
           ><img src="판다로고.png" alt="팬더logo"
         /></a>
       </div>
+
       <div class="email">
-        <label for="name"><strong>이메일</strong></label>
+        <label class="fogns" for="name"><strong>이메일</strong></label>
       </div>
+      <form>
       <div class="email1">
+
         <input
           placeholder="이메일을 입력해주세요."
           type="email"
-          name="email"
+          name="username"
           id="name"
         />
+      </form>
       </div>
       <div class="password">
         <label for="password"><strong>비밀번호</strong></label>

diff --git a/미션2-1/style.css → 미션2-1웹 로그인페이지/style.css b/미션2-1/style.css → 미션2-1웹 로그인페이지/style.css
@@ -44,6 +44,8 @@ section {
   position: relative;
   right: 290px;
 }
+
+
 .email1 {
   position: relative;
   top: 20px;

diff --git a/미션2-1/간편 로그인하기.png → 미션2-1웹 로그인페이지/간편 로그인하기.png b/미션2-1/간편 로그인하기.png → 미션2-1웹 로그인페이지/간편 로그인하기.png
diff --git a/미션2-1/구글.png → 미션2-1웹 로그인페이지/구글.png b/미션2-1/구글.png → 미션2-1웹 로그인페이지/구글.png
diff --git a/미션2-1/로그인.png → 미션2-1웹 로그인페이지/로그인.png b/미션2-1/로그인.png → 미션2-1웹 로그인페이지/로그인.png
diff --git a/미션2-1/로그인1.png → 미션2-1웹 로그인페이지/로그인1.png b/미션2-1/로그인1.png → 미션2-1웹 로그인페이지/로그인1.png
diff --git a/미션2-1웹 로그인페이지/미션2.js b/미션2-1웹 로그인페이지/미션2.js
@@ -0,0 +1,2 @@
+let name = document.querySelector('#name');
+
diff --git a/미션2-1/카카오.png → 미션2-1웹 로그인페이지/카카오.png b/미션2-1/카카오.png → 미션2-1웹 로그인페이지/카카오.png
diff --git a/미션2-1/판다로고.png → 미션2-1웹 로그인페이지/판다로고.png b/미션2-1/판다로고.png → 미션2-1웹 로그인페이지/판다로고.png
diff --git a/미션2-1/페북.png → 미션2-1웹 로그인페이지/페북.png b/미션2-1/페북.png → 미션2-1웹 로그인페이지/페북.png
diff --git a/미션2-2/index.html → 미션2-2웹 회원가입페이지/index.html b/미션2-2/index.html → 미션2-2웹 회원가입페이지/index.html
diff --git a/미션2-2/staly.css → 미션2-2웹 회원가입페이지/staly.css b/미션2-2/staly.css → 미션2-2웹 회원가입페이지/staly.css
diff --git a/미션2-2/구글.png → 미션2-2웹 회원가입페이지/구글.png b/미션2-2/구글.png → 미션2-2웹 회원가입페이지/구글.png
diff --git a/미션2-2/눈모양.png → 미션2-2웹 회원가입페이지/눈모양.png b/미션2-2/눈모양.png → 미션2-2웹 회원가입페이지/눈모양.png
diff --git a/미션2-2웹 회원가입페이지/미션2-2.js b/미션2-2웹 회원가입페이지/미션2-2.js
diff --git a/미션2-2/카카오.png → 미션2-2웹 회원가입페이지/카카오.png b/미션2-2/카카오.png → 미션2-2웹 회원가입페이지/카카오.png
diff --git a/미션2-2/판다로고.png → 미션2-2웹 회원가입페이지/판다로고.png b/미션2-2/판다로고.png → 미션2-2웹 회원가입페이지/판다로고.png
diff --git a/미션2-2/회원가입.png → 미션2-2웹 회원가입페이지/회원가입.png b/미션2-2/회원가입.png → 미션2-2웹 회원가입페이지/회원가입.png
diff --git a/미션3 태블릿로그인 페이지/c.css b/미션3 태블릿로그인 페이지/c.css
@@ -0,0 +1,90 @@
+.background{
+  display: flex;
+  flex-direction: column;
+  height: 100vh;
+  justify-content: center;
+  align-items: center;
+}
+
+.pandalogo{
+  position: relative;
+  top: -200px;
+  left: 120px;
+
+}
+.password_text,.email_text{
+  position: relative;
+  top: -180px
+}
+
+
+input{
+  position: relative;
+  top:-200px;
+  width: 620px;
+  height: 56px;
+  border-radius: 20px;
+  border-color: #F3F4F6;
+  background-color: #F3F4F6;
+  border: solid 1px #F3F4F6;
+  padding-left: 20px;
+  margin-top: 30px;
+  }
+  input:focus{
+  outline-style: solid;
+  outline-color: #3692ff;
+  }
+  input:hover{
+    border: solid 1px #3692ff;
+  }
+
+  .login_button{
+    position: relative;
+    top: -180px;
+    width: 640px;
+    height: 56px;
+    border-radius: 30px;
+    background: #9CA3AF;
+    border-color: #9CA3AF;
+    border: solid 1px #9CA3AF;
+    font-size: 17px;
+    font-weight: 900;
+    color: aliceblue;
+  }
+  .login_button:hover{
+    background: #3692ff;
+  }
+  .Easy_login{
+    position: relative;
+    margin-top: -175px;
+    background-color:#E6F2FF;
+    width: 640px;
+    height: 75px;
+    border-radius: 10px;
+  }
+  .member{
+    position: relative;
+    margin-top: 30px;
+    left: 180px;
+  }
+  .member a{
+    color: blue;
+  }
+  .kakao_button{
+    position: relative;
+    left: 530px;
+    bottom: 23px;
+  }
+  .google_button{
+    position: relative;
+    right: -515px;
+    bottom: 21px;
+  }
+  .Easy_login p{
+    position: relative;
+    left: 25px;
+    top: 25px
+  }
+
+
+
diff --git a/미션3 태블릿로그인 페이지/c.js b/미션3 태블릿로그인 페이지/c.js
@@ -0,0 +1,43 @@
+'use strict'
+// let email = document.querySelector('#email1');
+// email.addEventListener('keydown', (e) => {
+//   if (e.key === 'Enter') {
+//     alert('비밀번호를 입력해주세요.')
+//  }});
+// let password = document.querySelector('#password');
+
+// password.addEventListener('keydown', function(r){
+//   let pp = password.value;
+//   if (pp.key === 'Enter'){
+//     ((pp.length > 7 && pp.length <= 16) === false)
+//     alert('비밀번호는 8~16자 입니다.')
+  // btn.addEventListener('click', (e) => {
+  //   if (!email.includes('@')) {
+  // alert('이메일 형식이 잘못되었습니다.')
+  // } else { 
+  //   alert('비밀번호를 입력해주세요')
+  // }})
+/**조금 지저분해 보이지만 나중에 복습할겸 보려고 남겨둡니다  */
+
+let btn = document.querySelector('#btn');
+let emailo = document.querySelector('#email1');
+let passwordo = document.querySelector('#password');
+
+btn.addEventListener('click', () => {
+  let email = emailo.value;
+  let password = passwordo.value;
+  console.log(email)
+  console.log(password)
+  if (email === '') {
+    alert('이메일을 입력해 주세요.');
+  } else if (!email.includes('@')){
+    alert('이메일 형식이 올바르지 않습니다.')
+  } else if ((password.length <= 8 && password.length <= 16) === true){
+      alert('비밀번호는 8~16자 입니다.')
+  } else {
+    alert('로그인 성공!')
+  }
+  } 
+    );
+
+
diff --git a/미션3 태블릿로그인 페이지/googlebutton.png b/미션3 태블릿로그인 페이지/googlebutton.png
diff --git a/미션3 태블릿로그인 페이지/index.html b/미션3 태블릿로그인 페이지/index.html
@@ -0,0 +1,37 @@
+<!DOCTYPE html>
+<html lang="ko">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <script src="c.js" defer></script>
+  <link rel="stylesheet" href="c.css" />
+  <title>태블릿</title>
+</head>
+<body>
+  <section class="background">
+    <form action="">
+  <div class="pandalogo"><a href="https://kaleidoscopic-heliotrope-3e1f4a.netlify.app/"><img src="pandalogo.png" alt="pandalogo"></a>
+  </div>
+
+    <label class="email_text" for="email"><strong>이메일</strong></label>
+    <div class="email">
+    <input type="email" name="email" id="email1" placeholder="이메일을 입력해주세요.">
+    </div>
+
+
+    <label class="password_text"  for="password"><strong>비밀번호</strong></label>
+    <div class="password">
+    <input type="password" name="password" id="password" placeholder="비밀번호를 입력해주세요.">
+    </div>
+    <button class="login_button" type="button" id="btn">로그인</button>
+
+  <div class="Easy_login"><p>간편 로그인하기</p>
+    <span class="google_button"><a href="http://www.google.com"><img src="googlebutton.png" alt="googlebutton"></a> </span>
+    <span class="kakao_button"><a href="http://www.kakaocorp.com"><img src="kakaobutton.png" alt="kakaobutton"></a></span>
+  </div>
+  <div class="member">판다마켓이 처음이신가요?<a href="https://glowing-liger-05520f.netlify.app/">회원가입</a>
+</div>
+</form>
+</section>
+</body>
+</html>
diff --git a/미션3 태블릿로그인 페이지/kakaobutton.png b/미션3 태블릿로그인 페이지/kakaobutton.png
diff --git a/미션3 태블릿로그인 페이지/pandalogo.png b/미션3 태블릿로그인 페이지/pandalogo.png
diff --git a/미션3-1태블릿 회원가입 페이지/google.png b/미션3-1태블릿 회원가입 페이지/google.png
diff --git a/미션3-1태블릿 회원가입 페이지/index.html b/미션3-1태블릿 회원가입 페이지/index.html
@@ -0,0 +1,76 @@
+<!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="태블릿.css">
+  <script src="태블릿.js" defer></script>
+  <title>tablet</title>
+</head>
+<body>
+  <head>
+    <section class="container">
+      <span class="logo"><a href="https://jrhmission.netlify.app/"
+          ><img src="logo.png" alt="팬더로고" /></a></span>
+      <div class="email">
+        <form>
+        <label for="email"><h4>이메일</h4></label>
+      </div>
+      <div class="email2">
+        <input
+          type="email"
+          name="email"
+          id="email"
+          placeholder="이메일을 입력해주세요"
+        /></form>
+      </div>
+
+      <div class="nickname">
+        <form>
+        <label for="nickname"><h4>닉네임</h4></label>
+      </div>
+      <div class="nickname2">
+        <input placeholder="닉네임을 입력해주세요" id="nickname" type="text" /></form>
+      </div>
+
+      <div class="password">
+        <label for="passwor2"><h4>&nbsp;&nbsp;&nbsp;비밀번호</h4></label>
+      </div>
+      <div class="password2">
+        <input type="password" id="passwor2" placeholder="비밀번호를 입력해주세요" />
+        </div>
+      <div class="password3">
+        <label for="password3_1"><h4>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;비밀번호 확인</h4></label>
+      </div>
+      <div>
+        <input
+          placeholder="비밀번호를 다시 한 번 입력해주세요"
+          type="password"
+        />
+      </div>
+      <div>
+        <a href="https://phenomenal-nougat-11f3af.netlify.app/"></a>
+        <button type="button" class="new_member">회원가입</button></a
+        >
+      </div>
+      <div class="login2">
+        <span class="qq"> 간편 로그인하기</span>
+        <span class="google">
+          <a href="http://google.com"
+            ><img width="42px" height="42px" src="google.png" alt="구글홈페이지"
+          /></a>
+        </span>
+        <span class="kakao">
+          <a href="https://www.kakaocorp.com/"
+            ><img width="42px" height="42px" src="kakao.png" alt="카카오 홈페이지"
+          /></a>
+        </span>
+      </div>
+      <span class="aa"
+        >판다마켓이 처음이신가요?
+        <a href="https://frolicking-tartufo-dd3812.netlify.app/">회원가입</a></span
+      >
+      </div>
+    </section>
+  </body>
+</html>
diff --git a/미션3-1태블릿 회원가입 페이지/kakao.png b/미션3-1태블릿 회원가입 페이지/kakao.png
diff --git a/미션3-1태블릿 회원가입 페이지/logo.png b/미션3-1태블릿 회원가입 페이지/logo.png
diff --git a/미션3-1태블릿 회원가입 페이지/태블릿.css b/미션3-1태블릿 회원가입 페이지/태블릿.css
@@ -0,0 +1,87 @@
+.container{
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+
+}
+
+
+
+.login2{
+  position: relative;
+  width: 640px;
+  height: 74px;
+  background-color: #E6F2FF;
+  border-radius: 8px;
+
+}
+
+
+input{
+  width: 620px;
+  height: 56px;
+  border-radius: 20px;
+  background-color: #F3F4F6;
+  border-color: #F3F4F6;
+  border: solid 1px #F3F4F6;
+  padding-left: 20px;
+}
+input:focus {
+  outline-color: #3692ff;
+}
+input:hover{
+  border-color: #3692ff;
+}
+
+
+.new_member{
+  position: relative;
+  width: 640px;
+  height: 56px;
+  border-radius: 30px;
+  background-color: #9CA3AF;
+  font-size: 17px;
+  font-weight: 900;
+  color: #F3F4F6;
+  border: solid 1px #F3F4F6;
+  margin: 30px auto;
+}
+.new_member:hover{
+  background-color: #3692ff;
+}
+
+.aa a {
+  color: blue;
+}
+
+H4{
+position: relative;
+right: 140px;
+top: 10px;
+}
+
+.kakao{
+  position: relative;
+  left: 400px;
+  top: 15px
+}
+.google{
+  position: relative;
+  left: 390px;
+  top: 16px
+}
+.qq{
+  position: relative;
+
+  left: 20px;
+}
+
+.aa{
+  position: relative;
+  top: 30px;
+}
+h4{
+  position: relative;
+  left: -280px;
+}
diff --git a/미션3-1태블릿 회원가입 페이지/태블릿.js b/미션3-1태블릿 회원가입 페이지/태블릿.js