diff --git a/sprint1/images/google_icon.png b/sprint1/images/google_icon.png new file mode 100644 index 00000000..914c0dbb Binary files /dev/null and b/sprint1/images/google_icon.png differ diff --git a/sprint1/images/join_logo.png b/sprint1/images/join_logo.png new file mode 100644 index 00000000..5e01a0e2 Binary files /dev/null and b/sprint1/images/join_logo.png differ diff --git a/sprint1/images/kakao_icon.png b/sprint1/images/kakao_icon.png new file mode 100644 index 00000000..61120754 Binary files /dev/null and b/sprint1/images/kakao_icon.png differ diff --git a/sprint1/index.html b/sprint1/index.html index ed2f8a77..9b7e97f6 100644 --- a/sprint1/index.html +++ b/sprint1/index.html @@ -3,7 +3,7 @@ - 판다마켓켓 + 판다마켓 diff --git a/sprint1/join.html b/sprint1/join.html new file mode 100644 index 00000000..9cc15691 --- /dev/null +++ b/sprint1/join.html @@ -0,0 +1,50 @@ + + + + + + 판다마켓 회원가입 + + + + + +
+

+ 판다마켓 +

+
+
+ + +
+

이메일을 입력해주세요

+
+ + +
+
+ + +
+

비밀번호를 입력해주세요

+
+ + +
+

비밀번호를 입력해주세요

+ +
+
+

간편 로그인하기

+ + +
+

이미 회원이신가요? 로그인

+
+ + \ No newline at end of file diff --git a/sprint1/js/input.js b/sprint1/js/input.js new file mode 100644 index 00000000..2968ffb4 --- /dev/null +++ b/sprint1/js/input.js @@ -0,0 +1,104 @@ +document.addEventListener("DOMContentLoaded", function () { +const emailInput = document.getElementById("email"); +const passWord = document.getElementById("password"); +const passWord2 = document.getElementById("password2"); +const loginBtn = document.getElementById("login_btn"); +const wraingAll = document.querySelectorAll(".wraing"); + +emailInput.addEventListener("focusout",function(){ + + let par = emailInput.parentNode + let wraing = par.nextElementSibling; + let emailValue = emailInput.value + let emailVaild = /^[^\s@]+@[^\s@]+\.[^\s@]+$/; + + if(emailValue.length === 0){ + emailInput.classList.add("on"); + loginBtn.classList.add("gray"); + wraing.classList.add("on"); + wraing.textContent = "이메일을 입력해주세요."; + }else if(!emailVaild.test(emailValue)){ + emailInput.classList.add("on"); + loginBtn.classList.add("gray"); + wraing.classList.add("on"); + wraing.textContent = "잘못된 이메일 형식입니다."; + }else{ + emailInput.classList.remove("on"); + wraing.classList.remove("on"); + + let hasOnClass = false; + wraingAll.forEach(function (el) { + if (el.classList.contains("on")) { + hasOnClass = true; + } + }); + + if (!hasOnClass) { + loginBtn.classList.remove("gray"); + } + } + +}); + +passWord.addEventListener("focusout",function(){ + let loginBtn = document.getElementById("login_btn"); + let par = passWord.parentNode + let wraing = par.nextElementSibling; + if(passWord.value.length == 0){ + passWord.classList.add("on"); + wraing.classList.add("on"); + wraing.textContent = "비밀번호를 입력해주세요"; + loginBtn.classList.add("gray"); + }else if(passWord.value.length < 8){ + passWord.classList.add("on"); + wraing.classList.add("on"); + wraing.textContent = "비밀번호를 8자 이상 입력해주세요."; + loginBtn.classList.add("gray"); + }else{ + passWord.classList.remove("on"); + wraing.classList.remove("on"); + + let hasOnClass = false; + wraingAll.forEach(function (el) { + if (el.classList.contains("on")) { + hasOnClass = true; + } + }); + if (!hasOnClass) { + loginBtn.classList.remove("gray"); + } + } +}); + +passWord2.addEventListener("focusout",function(){ + let loginBtn = document.getElementById("login_btn"); + let par = passWord2.parentNode + let wraing = par.nextElementSibling; + if(passWord2.value.length == 0){ + passWord2.classList.add("on"); + wraing.classList.add("on"); + wraing.textContent = "비밀번호를 입력해주세요"; + loginBtn.classList.add("gray"); + }else if(passWord.value == passWord2.value){ + passWord2.classList.add("on"); + wraing.classList.add("on"); + wraing.textContent = "“비밀번호가 일치하지 않습니다."; + loginBtn.classList.add("gray"); + }else{ + passWord2.classList.remove("on"); + wraing.classList.remove("on"); + + let hasOnClass = false; + wraingAll.forEach(function (el) { + if (el.classList.contains("on")) { + hasOnClass = true; + } + }); + if (!hasOnClass) { + loginBtn.classList.remove("gray"); + } + } +}); + + +}); \ No newline at end of file diff --git a/sprint1/login.html b/sprint1/login.html new file mode 100644 index 00000000..5d847411 --- /dev/null +++ b/sprint1/login.html @@ -0,0 +1,41 @@ + + + + + + 판다마켓 로그인 + + + + + +
+

+ 판다마켓 +

+
+
+ + +
+

이메일을 입력해주세요

+
+ + +
+

비밀번호를 입력해주세요

+ +
+
+

간편 로그인하기

+ + +
+

이미 회원이신가요? 로그인

+
+ + \ No newline at end of file diff --git a/sprint1/main.css b/sprint1/main.css index 62b029d4..b53bb7c0 100644 --- a/sprint1/main.css +++ b/sprint1/main.css @@ -1,36 +1,159 @@ -header{width:100%; padding:9.5px 0; background:#fff;} -.gnb{max-width:1120px; padding:0 200px; display:flex; justify-content:space-between; align-items: center; margin:0 auto;} -.gnb a.login_btn{display:block; padding:13px 43px; border-radius:8px; font-size:16px; color:#fff; background:#3692ff;} +header{ + width:100%; + padding:9.5px 0; + background:#fff; +} +.gnb{ + max-width:1120px; + padding:0 200px; + display:flex; + justify-content:space-between; + align-items: center; + margin:0 auto; +} +.gnb a.login_btn{ + display:block; + padding:13px 43px; + border-radius:8px; + font-size:16px; + color:#fff; + background:#3692ff; +} -.main_visual{width:100%; background:#cfe5ff;} -.main_visual .main_visual_inner{width:1110px; margin:0 auto; } -.main_visual .main_visual_box{padding:200px 0 100px; background:url("images/main_visual_img.png") right 160px no-repeat;} -.main_visual .slogan{font-size:40px; color:#374151; line-height:140%; font-weight:700;} -.main_visual .main_visual_btn{display:block; width:357px; margin-top:32px; text-align:center; border-radius:42px; padding:15px 0; color:#fff; font-size:20px; background:#3692ff; } +.main_visual{ + width:100%; + background:#cfe5ff; +} +.main_visual .main_visual_inner{ + width:1110px; + margin:0 auto; +} +.main_visual .main_visual_box{ + padding:200px 0 100px; + background:url("images/main_visual_img.png") right 160px no-repeat; +} +.main_visual .slogan{ + font-size:40px; + color:#374151; + line-height:140%; + font-weight:700; +} +.main_visual .main_visual_btn{ + display:block; + width:357px; + margin-top:32px; + text-align:center; + border-radius:42px; + padding:15px 0; + color:#fff; + font-size:20px; + background:#3692ff; +} -section.section1{padding:138px 0 0px;} -.section1 .section_inner{width:988px; margin:0 auto;} -.section1 .sec_box{padding:0 0 0px 579px; margin-bottom:276px; background:#fcfcfc;} -.section1 .sec_box.hot_item{background:#fcfcfc url("images/img_home_01.jpg") left 0 no-repeat;} -.section1 .sec_box.search{padding:0 579px 0px 0; text-align:right; background:#fcfcfc url("images/img_home_02.jpg") right 0 no-repeat;} -.section1 .sec_box.register{ background:#fcfcfc url("images/img_home_03.jpg") left 0 no-repeat;} -.section1 .sec_box_txt{padding:103px 0; margin-left:64px;} -.section1 .sec_box.search .sec_box_txt{ margin-right:64px; margin-left:0px; } -.section1 .sec_box_txt .blue_txt{display:block; font-size:18px; font-weight:700; color:#3692ff;} -.section1 .sec_box_txt strong{display:block; margin-top:12px; font-size:40px; line-height:140%; color:#374151;} -.section1 .sec_box_txt p{margin-top:24px; line-height:140%; font-size:24px;} +section.section1{ + padding:138px 0 0px; +} +.section1 .section_inner{ + width:988px; + margin:0 auto; +} +.section1 .sec_box{ + padding:0 0 0px 579px; + margin-bottom:276px; + background:#fcfcfc; +} +.section1 .sec_box.hot_item{ + background:#fcfcfc url("images/img_home_01.jpg") left 0 no-repeat; +} +.section1 .sec_box.search{ + padding:0 579px 0px 0; + text-align:right; + background:#fcfcfc url("images/img_home_02.jpg") right 0 no-repeat; +} +.section1 .sec_box.register{ + background:#fcfcfc url("images/img_home_03.jpg") left 0 no-repeat; +} +.section1 .sec_box_txt{ + padding:103px 0; + margin-left:64px; +} +.section1 .sec_box.search .sec_box_txt{ + margin-right:64px; + margin-left:0px; +} +.section1 .sec_box_txt .blue_txt{ + display:block; + font-size:18px; + font-weight:700; + color:#3692ff; +} +.section1 .sec_box_txt strong{ + display:block; + margin-top:12px; + font-size:40px; + line-height:140%; + color:#374151; +} +.section1 .sec_box_txt p{ + margin-top:24px; + line-height:140%; + font-size:24px; +} -.section2{ background:#cfe5ff;} -.section2 .sec2_txt{font-size:40px; line-height:140%; font-weight:700;} -.section2 .section_inner{width:1110px; padding:255px 0 170px; margin:0 auto; background:url("images/Img_home_bottom.png") right 140px no-repeat;} +.section2{ + background:#cfe5ff; +} +.section2 .sec2_txt{ + font-size:40px; + line-height:140%; + font-weight:700; +} +.section2 .section_inner{ + width:1110px; + padding:255px 0 170px; + margin:0 auto; + background:url("images/Img_home_bottom.png") right 140px no-repeat; +} -footer{background:#111827; min-height:160px;} -footer .copyright{color:#9ca3af;} -footer .footer_inner{width:1120px; padding:32px 0; display:flex; justify-content: space-between; margin:0 auto;} -footer .footer_link a{display:inline-block; margin:0 15px; font-size:16px; color:#e5e7eb;} -footer .sns{display:flex;} -footer .sns a{display:block; width:20px; height:20px; margin-left:12px; text-indent:-9999px; } -footer .sns .facebook{background:url("images/facebook_ico.png") center no-repeat;} -footer .sns .twiter{background:url("images/twiter_ico.png") center no-repeat;} -footer .sns .youtube{background:url("images/youtube_ico.png") center no-repeat;} -footer .sns .insta{background:url("images/insta_ico.png") center no-repeat;} \ No newline at end of file +footer{ + background:#111827; + min-height:160px; +} +footer .copyright{ + color:#9ca3af; +} +footer .footer_inner{ + width:1120px; + padding:32px 0; + display:flex; + justify-content: space-between; + margin:0 auto; +} +footer .footer_link a{ + display:inline-block; + margin:0 15px; + font-size:16px; + color:#e5e7eb; +} +footer .sns{ + display:flex; +} +footer .sns a{ + display:block; + width:20px; + height:20px; + margin-left:12px; + text-indent:-9999px; +} +footer .sns .facebook{ + background:url("images/facebook_ico.png") center no-repeat; +} +footer .sns .twiter{ + background:url("images/twiter_ico.png") center no-repeat; +} +footer .sns .youtube{ + background:url("images/youtube_ico.png") center no-repeat; +} +footer .sns .insta{ + background:url("images/insta_ico.png") center no-repeat; +} \ No newline at end of file diff --git a/sprint1/reset.css b/sprint1/reset.css index bb2c2d71..d102878e 100644 --- a/sprint1/reset.css +++ b/sprint1/reset.css @@ -107,9 +107,7 @@ i { display: inline-block; } -img { - width: 100%; -} + ul, ol { diff --git a/sprint1/sub.css b/sprint1/sub.css new file mode 100644 index 00000000..162151be --- /dev/null +++ b/sprint1/sub.css @@ -0,0 +1,89 @@ +.join_box{ + max-width:640px; + margin:60px auto 0; +} +.join_box .logo img{ + display:block; + margin:0 auto; +} +.join_box form{ + margin-top:60px; +} +.form_box{ + display: flex; + flex-direction: column; + margin-bottom:24px; +} +.form_box label{ + margin-bottom:16px; + font-size:18px; + color:#1f2937; + font-weight:700; +} +.form_box input{ + width:calc(100% - 48px); + padding:16px 24px 14px; + box-sizing: content-box; + background:#F3F4F6; + border-radius:12px; +} +.join_btn{ + width:100%; + padding:12px 0; + line-height:32px; + font-size:20px; + border-radius:40px; + font-weight:600; + color:#F3F4F6; + background:#3692ff; +} +.login_banner{ + display:flex; + align-items: center; + padding:16px 23px; + line-height:26px; + margin-top:40px; + border-radius:8px; + background:#E6F2FF; +} +.login_banner p{ + flex:1 0; + font-size:16px; + color:#1f2937; +} +.login_banner a{ + display:block; + width:42px; + height:42px; +} +.login_banner a img{ + width:100%; +} +.login_banner a:last-child{ + margin-left:16px; +} +.login_txt{ + margin-top:24px; + text-align:center; + font-size:14px; + line-height:24px; +} +.login_txt a{ + color:#3692FF; +} +.wraing{ + display:none; + margin-bottom:50px; + color:red; +} +.wraing.on{ + display:block; +} + +input.on{ + border:1px solid red; +} + +#login_btn.gray{ + background:#9ca3af; +} \ No newline at end of file