diff --git a/Frame 2609420.png b/Frame 2609420.png deleted file mode 100644 index 937fa01..0000000 Binary files a/Frame 2609420.png and /dev/null differ diff --git a/Frame 2609448.jpg b/Frame 2609448.jpg deleted file mode 100644 index 1a0c67e..0000000 Binary files a/Frame 2609448.jpg and /dev/null differ diff --git a/SM1-2/Img_home_01.png b/SM1-2/Img_home_01.png new file mode 100644 index 0000000..73706e9 Binary files /dev/null and b/SM1-2/Img_home_01.png differ diff --git a/SM1-2/Img_home_02.png b/SM1-2/Img_home_02.png new file mode 100644 index 0000000..763d72b Binary files /dev/null and b/SM1-2/Img_home_02.png differ diff --git a/SM1-2/Img_home_03.png b/SM1-2/Img_home_03.png new file mode 100644 index 0000000..8709632 Binary files /dev/null and b/SM1-2/Img_home_03.png differ diff --git a/SM1-2/Img_home_bottom.png b/SM1-2/Img_home_bottom.png new file mode 100644 index 0000000..12f3c18 Binary files /dev/null and b/SM1-2/Img_home_bottom.png differ diff --git a/SM1-2/Img_home_top.png b/SM1-2/Img_home_top.png new file mode 100644 index 0000000..d482f37 Binary files /dev/null and b/SM1-2/Img_home_top.png differ diff --git a/Property 1=lg.png b/SM1-2/Property 1=lg.png similarity index 100% rename from Property 1=lg.png rename to SM1-2/Property 1=lg.png diff --git a/SM1-2/google-logo.png b/SM1-2/google-logo.png new file mode 100644 index 0000000..97d4542 Binary files /dev/null and b/SM1-2/google-logo.png differ diff --git a/SM1-2/ic_facebook.png b/SM1-2/ic_facebook.png new file mode 100644 index 0000000..93506ba Binary files /dev/null and b/SM1-2/ic_facebook.png differ diff --git a/SM1-2/ic_instagram.png b/SM1-2/ic_instagram.png new file mode 100644 index 0000000..8a15c43 Binary files /dev/null and b/SM1-2/ic_instagram.png differ diff --git a/SM1-2/ic_twitter.png b/SM1-2/ic_twitter.png new file mode 100644 index 0000000..1d0aa67 Binary files /dev/null and b/SM1-2/ic_twitter.png differ diff --git a/SM1-2/ic_youtube.png b/SM1-2/ic_youtube.png new file mode 100644 index 0000000..53df4e6 Binary files /dev/null and b/SM1-2/ic_youtube.png differ diff --git a/SM1-2/index.html b/SM1-2/index.html new file mode 100644 index 0000000..a418561 --- /dev/null +++ b/SM1-2/index.html @@ -0,0 +1,78 @@ + + + + + 판다마켓 + + + + + + +
+
+
+

일상의 모든 물건을 거래해보세요 + +
+

+
+
+ home-top +
+
+ home-01 + +
+
+ home-02 + +
+
+ home-03 + +
+
+

믿을 수 있는
판다마켓 중고거래

+
+
+ Img-home-bottom +
+
+
+ + + \ No newline at end of file diff --git a/SM1-2/kakao-logo.png b/SM1-2/kakao-logo.png new file mode 100644 index 0000000..571f1e7 Binary files /dev/null and b/SM1-2/kakao-logo.png differ diff --git a/SM1-2/login.html b/SM1-2/login.html new file mode 100644 index 0000000..2f8bed8 --- /dev/null +++ b/SM1-2/login.html @@ -0,0 +1,167 @@ + + + + + 로그인 - 판다마켓 + + + + + +
+
+ +
+ +
+
+
+

이메일

+ +
+
+
+

비밀번호

+
+ + +
+
+
+ + + +
+
+ + +
+ + + + \ No newline at end of file diff --git a/SM1-2/login_styles.css b/SM1-2/login_styles.css new file mode 100644 index 0000000..9b3898f --- /dev/null +++ b/SM1-2/login_styles.css @@ -0,0 +1,132 @@ +/* 페이지 전체를 가운데 정렬하는 컨테이너 */ +body { + display: flex; + justify-content: center; + align-items: center; + height: 100vh; + margin: 0; +} + +/* 텍스트 및 비밀번호 입력 스타일 */ +input[type="text"], input[type="password"] { + width: 800px; + height: 60px; + font-size: 18px; + border: 0; + border-radius: 30px; + outline: none; + padding-left: 10px; + background-color: rgba(243, 244, 246, 1); +} + +/* 테이블 스타일 */ +table { + width: 280px; + height: 250px; + margin: auto; + font-size: 18px; +} + +/* 버튼 스타일 */ +.btn { + width: 800px; + height: 60px; + font-size: 25px; + border: 0; + border-radius: 30px; + outline: none; + padding-left: 10px; + margin-top: 30px; + margin-bottom: 0px; + background-color: rgba(54, 146, 255, 1); +} + +/* 버튼이 클릭되었을 때 "클릭된" 효과를 적용 */ +.btn.clicked { + transform: scale(0.95); + transition: transform 0.1s ease; +} + + /* 비활성화 상태의 버튼 스타일 */ +.btn:disabled { + opacity: 0.5; + cursor: not-allowed; + background-color: rgba(156, 163, 175, 1); +} + +/* 버튼 활성화 시 스타일 */ +.btn:active { + width: 800px; + height: 60px; + font-size: 25px; + border: 0; + border-radius: 30px; + outline: none; + padding-left: 10px; + transform: scale(0.95); + transition: transform 0.1s ease; +} + + +/* 오류 메시지 스타일 */ +.error-message { + color: red; + font-size: 14px; + margin-top: 5px; +} + +input.error { + border: 2px solid red; +} + +footer{ + text-align: center; + margin: 20px; + +} + +header { + display: flex; + justify-content: center; + align-items: center; + margin-top: 20px; +} + +.social-login-container { + display:flex; + align-items: center; + background-color: #e3f2fd; + border-radius: 8px; + padding: 20px; + margin-top: 20px; + +} + +.social-login-container p { + margin: 0; + flex-grow: 1; + font-size: 18px; + color: #333; +} + +.social-buttons { + display: flex; + gap: 10px; +} + +.social-button { + background-color: transparent; + border: none; + padding:0; + cursor: pointer; + outline: none; +} + +.social-button img { + width: 36px; + height: 36px; + border-radius: 50%; +} + + + diff --git a/SM1-2/reset.css b/SM1-2/reset.css new file mode 100644 index 0000000..9649922 --- /dev/null +++ b/SM1-2/reset.css @@ -0,0 +1,10 @@ +/* reset.css */ + +/* 브라우저 기본 스타일 초기화 */ +*, +*::before, +*::after { + margin: 0; + padding: 0; + box-sizing: border-box; +} diff --git a/SM1-2/signup.html b/SM1-2/signup.html new file mode 100644 index 0000000..d3f6bf0 --- /dev/null +++ b/SM1-2/signup.html @@ -0,0 +1,58 @@ + + + + +Join + + + + + +
+ + +
+
+

이메일

+ +

+ +

닉네임

+ + +

비밀번호

+ +

+ +

비밀번호 확인

+ +

+ + + + +
+
+ + +
+ + diff --git a/SM1-2/signup.js b/SM1-2/signup.js new file mode 100644 index 0000000..5e741ae --- /dev/null +++ b/SM1-2/signup.js @@ -0,0 +1,124 @@ +const USER_DATA = [ + { email: 'codeit1@codeit.com', password: "codeit101!" }, + { email: 'codeit2@codeit.com', password: "codeit202!" }, + { email: 'codeit3@codeit.com', password: "codeit303!" }, + { email: 'lhs103725@gmail.com', password: "alsgus4321@" }, + { email: 'applepie421@naver.com', password: "dnflwlq951@" }, +]; + +const emailInput = document.getElementById('email'); +const nicknameInput = document.getElementById('nickname'); +const passwordInput = document.getElementById('password'); +const passwordConfirmInput = document.getElementById('passwordConfirm'); +const signupButton = document.getElementById('signupButton'); +const form = document.getElementById('signupForm'); + +// 이메일 유효성 검사 함수 +function validateEmail() { + const emailError = document.getElementById('emailError'); + const email = emailInput.value.trim(); + emailError.textContent = ''; + + if (!email) { + emailError.textContent = '이메일을 입력해주세요.'; + emailInput.style.borderColor = 'red'; + return false; + } + + const emailPattern = /^[^\s@]+@[^\s@]+\.[^\s@]+$/; + if (!emailPattern.test(email)) { + emailError.textContent = '잘못된 이메일 형식입니다.'; + emailInput.style.borderColor = 'red'; + return false; + } + + if (USER_DATA.some(user => user.email === email)) { + emailError.textContent = '사용 중인 이메일입니다.'; + emailInput.style.borderColor = 'red'; + return false; + + } else { + emailInput.style.borderColor = 'blue'; + return true; + } +} + +// 비밀번호 유효성 검사 함수 +function validatePassword() { + const passwordError = document.getElementById('passwordError'); + const password = passwordInput.value.trim(); + passwordError.textContent = ''; + + if (!password) { + passwordError.textContent = '비밀번호를 입력해주세요.'; + passwordInput.style.borderColor = 'red'; + return false; + } + + if (password.length < 8) { + passwordError.textContent = '비밀번호를 8자 이상 입력해주세요.'; + passwordInput.style.borderColor = 'red'; + return false; + } else { + passwordInput.style.borderColor = 'blue'; + return true; + } +} + +// 비밀번호 확인 유효성 검사 함수 +function validatePasswordConfirm() { + const passwordConfirmError = document.getElementById('passwordConfirmError'); + const passwordConfirm = passwordConfirmInput.value.trim(); + passwordConfirmError.textContent = ''; + + if (passwordConfirm !== passwordInput.value.trim()) { + passwordConfirmError.textContent = '비밀번호가 일치하지 않습니다.'; + passwordConfirmInput.style.borderColor = 'red'; + return false; + } else if (!passwordConfirmInput.value.trim()) { + passwordConfirmInput.style.borderColor = '' + } else { + passwordConfirmInput.style.borderColor = 'blue'; + return true; + } +} + +// 폼 유효성 검사 함수 +function validateForm() { + const isFormValid = validateEmail() && validatePassword() && validatePasswordConfirm(); + signupButton.disabled = !isFormValid; +} + +emailInput.addEventListener('input', validateForm); +passwordInput.addEventListener('input', validateForm); +passwordConfirmInput.addEventListener('input', validateForm); + +// 폼 제출 함수 +function submitForm() { + if (!validateForm()) { + alert('회원가입이 완료되었습니다!'); + window.location.href = "/login"; + return true; + } else if (USER_DATA.some(user => user.email === email)) { + alert("이미 존재하는 이메일입니다!"); + return false; + } else if (!emailPattern.test(email)) { + alert("잘못된 형식의 이메일입니다!"); + return false; + } else if (password.length < 8) { + alert("비밀번호를 8자 이상 입력해주세요!"); + return false; + } else if (!password) { + alert("비밀번호를 입력해주세요!"); + return false; + } else if (passwordConfirm !== passwordInput.value.trim()) { + alert("비밀번호가 일치하지 않습니다!"); + return false; + } +} + +// form에 submit 이벤트 추가 +form.addEventListener('submit', function(event) { + event.preventDefault(); + submitForm(); +}); \ No newline at end of file diff --git a/SM1-2/signup_styles.css b/SM1-2/signup_styles.css new file mode 100644 index 0000000..0326f88 --- /dev/null +++ b/SM1-2/signup_styles.css @@ -0,0 +1,118 @@ +body { + display: flex; + justify-content: center; + align-items: center; + height: 100vh; + margin: 0; +} + +.container { + text-align: center; +} + +.logo img { + width: 450px; + margin-bottom: 20px; +} + +form { + width: 750px; + margin: 0 auto; + text-align: left; +} + +.text, .btn { + width: 100%; + height: 70px; + font-size: 18px; + border: 1px solid transparent; + border-radius: 30px; + padding-left: 10px; + margin-bottom: 10px; + box-sizing: border-box; +} + +.text:focus { + border-color: #3692FF; +} + +.error-message { + color: red; + font-size: 14px; + margin-top: -10px; + margin-bottom: 10px; +} + +.text { + background-color: rgba(243, 244, 246, 1); +} + +/* 버튼 스타일 */ +.btn { + color:white; + font-size: 25px; + border: 0; + border-radius: 30px; + cursor: pointer; + margin-top:10px; + background-color: rgba(54, 146, 255, 1) +} + + /* 비활성화 상태의 버튼 스타일 */ +.btn:disabled { + opacity: 0.5; + cursor: not-allowed; + background-color: rgba(156, 163, 175, 1); +} + +/* 버튼 활성화 시 스타일 */ +.btn:active { + font-size: 25px; + border: 0; + border-radius: 30px; + cursor: pointer; + transform: scale(0.95); + transition: transform 0.1s ease; +} + + +.btn:enabled { + opacity: 1; + cursor: pointer; + pointer-events: auto; +} + +.social-signup-container { + display:flex; + align-items: center; + background-color: #e3f2fd; + border-radius: 8px; + padding: 20px; + margin-top: 20px; +} + +.social-signup-container p { + margin: 0; + flex-grow: 1; + font-size: 18px; + color: #333; +} + +.social-buttons { + display: flex; + gap: 10px; +} + +.social-button { + background-color: transparent; + border: none; + padding:0; + cursor: pointer; + outline: none; +} + +.social-button img { + width: 36px; + height: 36px; + border-radius: 50%; +} \ No newline at end of file diff --git a/SM1-2/style.css b/SM1-2/style.css new file mode 100644 index 0000000..e11d97f --- /dev/null +++ b/SM1-2/style.css @@ -0,0 +1,254 @@ +body{ + margin-right: -110px; + margin-left: -10px; + margin-bottom: -10px; +} + +a:link { + color: white; + text-decoration: none; +} + +a:visited{ + color: white; + text-decoration: none; +} + +a:hover{ + color: white; + text-decoration: underline; +} + +#navbar{ + position: sticky; + top: 0; + display: flex; + justify-content: space-between; + align-items: center; + padding: 10px 100px; + background-color: white; +} + +#logo{ + width: 340px; + height: auto; + margin-left: auto; + cursor: pointer; +} + +.login-button { + width: 200px; + height: 80px; + background-color: rgba(54, 146, 255, 1); + color:#FFFFFF; + font-family:"Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Roboto, "Helvetica Neue", "Segoe UI", "Apple SD Gothic Neo", "Noto Sans KR", "Malgun Gothic", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", sans-serif; + font-weight: 500; + font-size: 35px; + padding: 8px, 16px; + border: 0; + border-radius: 30px; + margin-right: auto; + cursor: pointer; +} + +.login-button:active { + font-size: 35px; + border: 0; + border-radius: 30px; + cursor: pointer; + transform: scale(0.95); + transition: transform 0.1s ease; + background-color: rgba(54, 146, 255, 1) +} + +.login-button:hover{ + background-color: rgba(54, 146, 255, 1); +} + + +#first-top{ + width: auto; + height: auto; + text-align: center; + margin: auto; + justify-content: center; + background: rgba(207, 229, 255, 1); +} + +.btn-shopping{ + width: 500px; + height: 80px; + margin-left: -750px; + margin-top: 50px; + background-color: rgba(54, 146, 255, 1); + color:#FFFFFF; + font-family:"Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Roboto, "Helvetica Neue", "Segoe UI", "Apple SD Gothic Neo", "Noto Sans KR", "Malgun Gothic", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", sans-serif; + font-weight: 500; + font-size: 35px; + padding: 8px, 16px; + border: 0; + border-radius: 30px; + cursor: pointer; +} + +.btn-shopping:active{ + font-size: 35px; + border: 0; + border-radius: 30px; + cursor: pointer; + transform: scale(0.95); + transition: transform 0.1s ease; + background-color: rgba(54, 146, 255, 1) +} + +#top-p{ + font-family: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Roboto, "Helvetica Neue", "Segoe UI", "Apple SD Gothic Neo", "Noto Sans KR", "Malgun Gothic", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", sans-serif; + font-weight: 700; + font-size: 60px; + font-style: rgba(55,65,81,1); + + display: flex; + text-align: center; + margin:auto; + justify-content: center; + padding: 250px 0; +} + +#bottom-p{ + font-family: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Roboto, "Helvetica Neue", "Segoe UI", "Apple SD Gothic Neo", "Noto Sans KR", "Malgun Gothic", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", sans-serif; + font-weight: 700; + font-size: 60px; + font-style: rgba(55,65,81,1); + + display: flex; + text-align: center; + margin: auto; + justify-content: center; + padding: 250px 0; +} + +.categori1-p{ + font-family: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Roboto, "Helvetica Neue", "Segoe UI", "Apple SD Gothic Neo", "Noto Sans KR", "Malgun Gothic", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", sans-serif; + font-weight: 700; + color: rgba(54, 146, 255, 1); + font-size: 18px; + line-height: 26px; + + margin-top: 100px; + margin-right: -100px; +} + +.home1-p{ + font-family: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Roboto, "Helvetica Neue", "Segoe UI", "Apple SD Gothic Neo", "Noto Sans KR", "Malgun Gothic", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", sans-serif; + font-weight: 700; + color: rgba(55,65,81,1); + font-size: 40px; + line-height: 56px; + letter-spacing: 2%; + + margin-left: 100px; +} + +.home2-p{ + font-family: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Roboto, "Helvetica Neue", "Segoe UI", "Apple SD Gothic Neo", "Noto Sans KR", "Malgun Gothic", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", sans-serif; + font-size: 24px; + font-weight: 500; + line-height: 32px; + color: rgba(55, 65, 81, 1); + + margin-left: 100px; +} + +#top{ + width: auto; + height: 500px; + text-align: center; + margin:auto; + display: flex; + justify-content: center; + background: rgba(207, 229, 255, 1); +} + +aside{ + margin-right: 100px; + +} + +#home-01{ + width: auto; + height: auto; + display: flex; + text-align: center; + margin:auto; + padding-top: 100px; + justify-content: center; + background: rgba(243, 244, 246, 1); +} + +#home-02{ + width: auto; + height: auto; + display: flex; + text-align: center; + margin:auto; + justify-content: center; + background: rgba(243, 244, 246, 1); +} + +#home-03{ + width: auto; + height: auto; + display: flex; + text-align: center; + margin: auto; + padding-bottom: 200px; + justify-content: center; + background: rgba(243, 244, 246, 1); +} + +#bottom{ + width: auto; + height: auto; + display: flex; + text-align: center; + margin: auto; + justify-content: center; + background: rgba(207, 229, 255, 1); +} + +#last-bottom{ + width: auto; + height: 500px; + display: flex; + text-align: center; + margin: auto; + justify-content: center; + margin-top: -40px; + background: rgba(207, 229, 255, 1); +} + +#footer-nav{ + width: auto; + height: auto; + display: flex; + flex-direction: row-reverse; + justify-content: space-between; + padding-top: 60px; + padding-right: 200px; + padding-bottom: 40px; + padding-left: 200px; + background-color: rgba(17, 24, 39, 1); +} + +.social-ico{ + margin-right: 10px; +} + +#text-1{ + margin-right: 10px; +} + +#text-2{ + margin-left: 10px; +} + diff --git a/desktop_01.png b/desktop_01.png deleted file mode 100644 index 7a67a58..0000000 Binary files a/desktop_01.png and /dev/null differ diff --git a/desktop_05.png b/desktop_05.png deleted file mode 100644 index f3261bf..0000000 Binary files a/desktop_05.png and /dev/null differ diff --git a/footer.png b/footer.png deleted file mode 100644 index dae7882..0000000 Binary files a/footer.png and /dev/null differ diff --git a/gnb.jpg b/gnb.jpg deleted file mode 100644 index d3caae8..0000000 Binary files a/gnb.jpg and /dev/null differ diff --git a/index.html b/index.html deleted file mode 100644 index 79b76b3..0000000 --- a/index.html +++ /dev/null @@ -1,59 +0,0 @@ - - - - - 판다마켓 - - - - - - -
-
- -
- - 로고 - 로그인 - -
- - -
-
- -
- 구경하러 가기 -
- -
-
-
- 카테고리 -
-
- 카테고리2 -
-
-
- - - - - diff --git a/login.html b/login.html deleted file mode 100644 index 9f4f365..0000000 --- a/login.html +++ /dev/null @@ -1,60 +0,0 @@ - - - - - - 로그인 - 판다마켓 - - - -
-
- -
- -
-
-
-

이메일

- -
-
-

비밀번호

-
- -
-
-
-
- 로그인 정보 저장 -
-
- -
-
-
- - -
- - diff --git a/reset.css b/reset.css deleted file mode 100644 index 54e7251..0000000 --- a/reset.css +++ /dev/null @@ -1,6 +0,0 @@ -/* A basic reset to remove default browser styles */ -* { - margin: 0; - padding: 0; - box-sizing: border-box; -} diff --git a/signup.html b/signup.html deleted file mode 100644 index 476b07a..0000000 --- a/signup.html +++ /dev/null @@ -1,107 +0,0 @@ - - - - - -Join - - - -
- - -
-

이메일

- - -

이름

- - -

비밀번호

- - -

비밀번호 확인

- - - -
- - -
- - diff --git a/style.css b/style.css deleted file mode 100644 index 141e148..0000000 --- a/style.css +++ /dev/null @@ -1,95 +0,0 @@ -/* 기본 스타일 설정 */ -* { - margin: 0; - padding: 0; - box-sizing: border-box; -} - -body { - font-size: 100%; /* 브라우저 기본 폰트 크기에 따라 조정 */ - line-height: 1.5; - background-color: lightblue; - font-family: Arial, sans-serif; -} - -/* 최상단 내비게이션 바 */ -.navbar { - position: fixed; - top: 0; - left: 0; - right: 0; - display: flex; - justify-content: center; /* 모든 요소 가운데 정렬 */ - align-items: center; - background-color: lightblue; - padding: 20px; - z-index: 1000; -} - -.navbar a { - text-decoration: none; - color: black; - font-size: 1.2rem; - margin: 0 20px; /* 좌우 간격 */ - cursor: pointer; /* 클릭 가능한 요소 */ -} - -.social-icons { - display: flex; - gap: 10px; - justify-content: center; - margin-top: 20px; -} - -/* 메인 본문 */ -main { - padding-top: 100px; /* 내비게이션 바 아래에 공간 확보 */ - text-align: center; - margin: 50px 0; -} - -footer { - display: flex; - justify-content: center; - align-items: center; - margin-top: 50px; -} - -footer p { - margin-left: 20px; - margin-right: 20px; -} - -/* 반응형 디자인: 화면 너비가 1920px 이하일 때 */ -@media (max-width: 1920px) { - .navbar { - padding: 20px; - } - - .navbar a { - margin: 0 20px; - } - - .social-icons { - margin-top: 20px; - } - - footer p { - margin-left: 20px; - margin-right: 20px; - } -} - -/* 반응형 디자인: 화면 너비가 1920px 이상일 때 */ -@media (min-width: 1920px) { - .navbar { - justify-content: center; /* 1920px 이상에서도 가운데 정렬 유지 */ - } - - footer { - justify-content: center; - } -} - -/* reset.css 파일을 포함한 reset 스타일 */ -@import url('reset.css');