diff --git a/index.html b/index.html index 4d09b996..4df1305d 100644 --- a/index.html +++ b/index.html @@ -4,6 +4,12 @@ + + + + + + diff --git a/login-Signup.css b/login-Signup.css index 232ac8b8..ed978ebd 100644 --- a/login-Signup.css +++ b/login-Signup.css @@ -2,6 +2,19 @@ box-sizing: border-box; } +:root { + --gray50: #F9FAFB; + --gray100: #F3F4F6; + --gray200: #E5E7EB; + --gray400: #9CA3AF; + --gray500: #6B7280; + --gray600: #4B5563; + --gray700: #374151; + --gray800: #1F2937; + --gray900: #111827; + --blue: #3692FF; +} + @media (min-width: 375px) { /* 버튼 관련 */ @@ -9,12 +22,12 @@ width: 100%; height: 56px; border-radius: 40px; - background-color: #9CA3AF; + background-color: var(--gray400); display: flex; flex-direction: row; justify-content: center; align-items: center; - color: #F3F4F6; + color: var(--gray100); margin-bottom: 24px; font-size: 20px; font-weight: 600; @@ -49,11 +62,11 @@ margin-bottom: 24px; } - #logo img:first-child { + .logo-image img:first-child { width: 52px; } - #logo img:last-child { + .logo-text img:last-child { width: 133px; } @@ -61,22 +74,34 @@ form { display: flex; flex-direction: column; - color: #1F2937; + color: var(--gray800); font-size: 18px; font-weight: 700; } - form > label { + form label { margin-bottom: 8px; } - form > input { + form input { width: 100%; height: 56px; border: 0; - background-color: #F3F4F6; + background-color: var(--gray100); border-radius: 12px; + margin-top: 16px; margin-bottom: 16px; + padding: 0 16px; + } + + .error-message{ + margin-bottom: 9px; + padding-left: 16px; + font-size: 14px; + font-weight: 600; + line-height: 24px; + color: red; + padding-left: 16px; } input::placeholder { @@ -90,7 +115,7 @@ flex-direction: row; align-items: center; justify-content: space-between; - background-color: #E6F2FF; + background-color: var(--gray50); padding: 16px 23px; border-radius: 8px; margin-bottom: 24px; @@ -123,7 +148,7 @@ } .footer a { - color: #3692FF; + color: var(--blue); } } @@ -133,12 +158,12 @@ width: 100%; height: 56px; border-radius: 40px; - background-color: #9CA3AF; + background-color: var(--gray400); display: flex; flex-direction: row; justify-content: center; align-items: center; - color: #F3F4F6; + color: var(--gray100); margin-bottom: 24px; font-size: 20px; font-weight: 600; @@ -156,7 +181,7 @@ container { margin-top: 231px; - width: 640px; + max-width: 600px; height: auto; } @@ -170,6 +195,14 @@ margin-bottom: 40px; } + .logo-image img:first-child { + width: 103px; + } + + .logo-text img:last-child { + width: 266px; + } + /* 폼테그 관련 */ form { display: flex; @@ -179,17 +212,29 @@ font-weight: 700; } - form > label { + form label { margin-bottom: 16px; } - form > input { + form input { width: 100%; height: 56px; border: 0; - background-color: #F3F4F6; + background-color: var(--gray100); border-radius: 12px; - margin-bottom: 24px; + margin-top: 16px; + margin-bottom: 8px; + padding: 0 16px; + } + + .error-message{ + margin-bottom: 18px; + padding-left: 16px; + font-size: 14px; + font-weight: 600; + line-height: 24px; + color: red; + padding-left: 16px; } input::placeholder { @@ -203,7 +248,7 @@ flex-direction: row; align-items: center; justify-content: space-between; - background-color: #E6F2FF; + background-color: var(--gray50); padding: 16px 23px; border-radius: 8px; margin-bottom: 24px; @@ -232,6 +277,6 @@ } .footer a { - color: #3692FF; + color: var(--blue); } } \ No newline at end of file diff --git a/login.css b/login.css deleted file mode 100644 index 8729e38d..00000000 --- a/login.css +++ /dev/null @@ -1,110 +0,0 @@ -* { - box-sizing: border-box; -} - -/* 버튼 관련 */ -.login-button { - width: 100%; - height: 56px; - border-radius: 40px; - background-color: #3692FF; - display: flex; - flex-direction: row; - justify-content: center; - align-items: center; - color: #F3F4F6; - margin-bottom: 24px; - font-size: 20px; - font-weight: 600; - border: 0px; -} - -/* 전체적인 틀 */ -body { - font-family: "Pretendard Variable", Pretendard, sans-serif; - - display: flex; - flex-direction: column; - align-items: center; -} - -container { - margin-top: 231px; - width: 640px; - height: auto; -} - -/* 로고관련 */ -#logo > a { - display: flex; - flex-direction: row; - justify-content: center; - align-items: center; - gap: 22px; - margin-bottom: 40px; -} - -/* 폼테그 관련 */ -form { - display: flex; - flex-direction: column; - color: #1F2937; - font-size: 18px; - font-weight: 700; -} - -form > label { - margin-bottom: 16px; -} - -form > input { - width: 100%; - height: 56px; - border: 0; - background-color: #F3F4F6; - border-radius: 12px; - margin-bottom: 24px; -} - -input::placeholder { - font-size: 16px; - padding: 24px; - } - -/* sns 로그인 관련 */ -.sns-login { - display: flex; - flex-direction: row; - align-items: center; - justify-content: space-between; - background-color: #E6F2FF; - padding: 16px 23px; - border-radius: 8px; - margin-bottom: 24px; - font-size: 16px; - font-weight: 500; -} - -.sns-login-image { - display: flex; - flex-direction: row; - gap: 16px; -} - -.sns-login-image img { - width: 42px; - height: 42px; -} - -/* footer 관련 */ -.footer { - display: flex; - flex-direction: row; - align-items: center; - justify-content: center; - gap: 4px; -} - -.footer a { - color: #3692FF; -} \ No newline at end of file diff --git a/login.html b/login.html index 8647b794..88d86498 100644 --- a/login.html +++ b/login.html @@ -11,16 +11,26 @@
- - - + +
+ -
+
@@ -40,5 +50,6 @@ 회원가입 + \ No newline at end of file diff --git a/login.js b/login.js new file mode 100644 index 00000000..de67de41 --- /dev/null +++ b/login.js @@ -0,0 +1,68 @@ + +const userEmailField = document.querySelector('#email'); +const emailErrorMessage = document.querySelector('.email-field .error-message'); +const userPasswordField = document.querySelector('#password'); +const passwordErrorMessage = document.querySelector('.password-field .error-message'); +const loginButton = document.querySelector(".login-button"); + +const validEmail = /^[0-9a-zA-Z]([-_.]?[0-9a-zA-Z])*@[0-9a-zA-Z]([-_.]?[0-9a-zA-Z])*.(\.[a-zA-Z]{2,3})$/; + +document.getElementById('email').autocomplete = 'off'; +document.getElementById('password').autocomplete = 'off'; + +//버튼 유효성 검사 +let isEmailValid = false; +let isPasswordValid = false; + +function handleFormEmail(event) { + const input = userEmailField.value; + if ( input === '') { + emailErrorMessage.textContent = "이메일을 입력해주세요"; + emailErrorMessage.style.color = 'red'; + userEmailField.style.border = '1px solid red'; + isEmailValid = false; + } else if (validEmail.test(input) ) { + emailErrorMessage.textContent = "올바른 이메일 형식입니다"; + emailErrorMessage.style.color = '#3692FF'; + userEmailField.style.border = '1px solid #3692FF'; + isEmailValid = true; + } else { + emailErrorMessage.textContent = "잘못된 이메일 형식입니다"; + emailErrorMessage.style.color = 'red'; + userEmailField.style.border = '1px solid red'; + isEmailValid = false; + } + handleLoginButton(); +} + +function handleFormPassword(e) { + const input = userPasswordField.value; + if ( input === '' ) { + passwordErrorMessage.textContent = "비밀번호를 입력해주세요"; + passwordErrorMessage.style.color = 'red'; + userPasswordField.style.border = '1px solid red'; + isPasswordValid = false; + } else if ( input.length < 8 ) { + passwordErrorMessage.textContent = "비밀번호를 8자 이상 입력해주세요"; + passwordErrorMessage.style.color = 'red'; + userPasswordField.style.border = '1px solid red'; + isPasswordValid = false; + } else { + passwordErrorMessage.textContent = "유효한 비밀번호 입니다" + userPasswordField.style.border = '1px solid #3692FF'; + passwordErrorMessage.style.color = ' #3692FF'; + isPasswordValid = true; + } + handleLoginButton(); +} + +userEmailField.addEventListener('focusout', handleFormEmail); +userPasswordField.addEventListener('focusout', handleFormPassword); + +//버튼 활성화 함수 +function handleLoginButton(event) { + if ( isEmailValid && isPasswordValid ) { + loginButton.style.backgroundColor = '#3692FF'; + loginButton.disabled = false; + } +} \ No newline at end of file diff --git a/signup.css b/signup.css deleted file mode 100644 index fdda34f7..00000000 --- a/signup.css +++ /dev/null @@ -1,123 +0,0 @@ -* { - box-sizing: border-box; -} - -/* 버튼 관련 */ -.sign-up-button { - width: 100%; - height: 56px; - border-radius: 40px; - background-color: #3692FF; - display: flex; - flex-direction: row; - justify-content: center; - align-items: center; - color: #F3F4F6; - margin-bottom: 24px; - font-size: 20px; - font-weight: 600; - border: 0px; -} - -/* 전체적인 틀 */ -body { - font-family: "Pretendard Variable", Pretendard, sans-serif; - - display: flex; - flex-direction: column; - align-items: center; -} - -container { - margin-top: 231px; - width: 640px; - height: auto; -} - -/* 로고관련 */ -#logo > a { - display: flex; - flex-direction: row; - justify-content: center; - align-items: center; - gap: 22px; - margin-bottom: 40px; -} - -/* 폼테그 관련 */ -form { - display: flex; - flex-direction: column; - color: #1F2937; - font-size: 18px; - font-weight: 700; -} - -form > label { - margin-bottom: 16px; -} - -form > input { - width: 100%; - height: 56px; - border: 0; - background-color: #F3F4F6; - border-radius: 12px; - margin-bottom: 24px; -} - -input::placeholder { - font-size: 16px; - padding: 24px; - } - -/* sns 로그인 관련 */ -.sns-login { - display: flex; - flex-direction: row; - align-items: center; - justify-content: space-between; - background-color: #E6F2FF; - padding: 16px 23px; - border-radius: 8px; - margin-bottom: 24px; - font-size: 16px; - font-weight: 500; -} - -.sns-login-image { - display: flex; - flex-direction: row; - gap: 16px; -} - -.sns-login-image img { - width: 42px; - height: 42px; -} - -/* footer 관련 */ -.footer { - display: flex; - flex-direction: row; - align-items: center; - justify-content: center; - gap: 4px; -} - -.footer a { - color: #3692FF; -} - - - - - - - - - - - - - diff --git a/signup.html b/signup.html index 3aaeaab2..977d2b33 100644 --- a/signup.html +++ b/signup.html @@ -11,20 +11,36 @@
- - - - - - - - -
@@ -44,5 +60,6 @@ 로그인 + \ No newline at end of file diff --git a/signup.js b/signup.js new file mode 100644 index 00000000..14dc196d --- /dev/null +++ b/signup.js @@ -0,0 +1,108 @@ + +const userEmailField = document.querySelector('#email'); +const emailErrorMessage = document.querySelector('.email-field .error-message'); +const userNicknameField = document.querySelector('#nickname'); +const nicknameErrorMessage = document.querySelector('.nickname-field .error-message') +const userPasswordField = document.querySelector('#password'); +const passwordErrorMessage = document.querySelector('.password-field .error-message'); +const userPasswordCheckField = document.querySelector('#passwordCheck'); +const passwordCheckErrorMessage = document.querySelector('.passwordCheck-field .error-message'); +const signupBotton = document.querySelector(".sign-up-button"); + +const validEmail = /^[0-9a-zA-Z]([-_.]?[0-9a-zA-Z])*@[0-9a-zA-Z]([-_.]?[0-9a-zA-Z])*.(\.[a-zA-Z]{2,3})$/; + +document.getElementById('email').autocomplete = 'off'; +document.getElementById('nickname').autocomplete = 'off'; +document.getElementById('password').autocomplete = 'off'; +document.getElementById('passwordCheck').autocomplete = 'off'; + +//버튼 유효성 검사 +let isEmailValid = false; +let isNicknameValid = false; +let isPasswordValid = false; +let isPasswordCheckValid = false; + +function handleFormEmail(event) { + const input = userEmailField.value; + if ( input === '') { + emailErrorMessage.textContent = "이메일을 입력해주세요"; + emailErrorMessage.style.color = 'red'; + userEmailField.style.border = '1px solid red'; + } else if (validEmail.test(input) ) { + emailErrorMessage.textContent = "올바른 이메일 형식입니다"; + emailErrorMessage.style.color = '#3692FF'; + userEmailField.style.border = '1px solid #3692FF'; + isEmailValid = true; + } else { + emailErrorMessage.textContent = "잘못된 이메일 형식입니다"; + emailErrorMessage.style.color = 'red'; + userEmailField.style.border = '1px solid red'; + } + handleSignupButton() +} + +function handleFormPassword(e) { + const input = userPasswordField.value; + if ( input === '' ) { + passwordErrorMessage.textContent = "비밀번호를 입력해주세요"; + passwordErrorMessage.style.color = 'red'; + userPasswordField.style.border = '1px solid red'; + } else if ( input.length < 8 ) { + passwordErrorMessage.textContent = "비밀번호를 8자 이상 입력해주세요"; + passwordErrorMessage.style.color = 'red'; + userPasswordField.style.border = '1px solid red'; + } else { + passwordErrorMessage.textContent = "유효한 비밀번호 입니다" + userPasswordField.style.border = '1px solid #3692FF'; + passwordErrorMessage.style.color = ' #3692FF'; + isPasswordValid = true; + } + handleSignupButton() +} + +function handleNickname(e) { + const input = userNicknameField.value; + if ( input === '' ) { + nicknameErrorMessage.textContent = "닉네임을 입력해주세요"; + nicknameErrorMessage.style.color = 'red'; + userNicknameField.style.border = '1px solid red'; + } else { + nicknameErrorMessage.textContent = "올바른 닉네임입니다"; + nicknameErrorMessage.style.color = '#3692FF'; + userNicknameField.style.border = '1px solid #3692FF'; + isNicknameValid = true; + } + handleSignupButton() +} + +function handlePasswordCheck(e) { + const input = userPasswordCheckField.value; + if ( input.length < 8 ) { + passwordCheckErrorMessage.textContent = "비밀번호를 8자 이상 입력해주세요"; + passwordCheckErrorMessage.style.color = 'red'; + userNicknameField.style.border = '1px solid red'; + } else if ( input !== userPasswordField.value ) { + passwordCheckErrorMessage.textContent = "비밀번호가 일치하지 않습니다"; + passwordCheckErrorMessage.style.color = 'red'; + userPasswordCheckField.style.border = '1px solid red'; + } else { + passwordCheckErrorMessage.textContent = "비밀번호가 일치합니다"; + passwordCheckErrorMessage.style.color = "#3692FF"; + userPasswordCheckField.style.border = "1px solid #3692FF" + isPasswordCheckValid = true; + } + handleSignupButton() +} + +//버튼 활성화 함수 +function handleSignupButton() { + if ( isEmailValid && isNicknameValid & isPasswordValid && isPasswordCheckValid ) { + signupBotton.style.backgroundColor = '#3692FF'; + signupBotton.disabled = false; + } +} + +userEmailField.addEventListener('focusout', handleFormEmail); +userPasswordField.addEventListener('focusout', handleFormPassword); +userNicknameField.addEventListener('focusout', handleNickname); +userPasswordCheckField.addEventListener('focusout', handlePasswordCheck); diff --git a/style.css b/style.css index 474730f3..9dc6e361 100644 --- a/style.css +++ b/style.css @@ -1,5 +1,18 @@ @import "./reset.css"; +:root { + --gray50: #F9FAFB; + --gray100: #F3F4F6; + --gray200: #E5E7EB; + --gray400: #9CA3AF; + --gray500: #6B7280; + --gray600: #4B5563; + --gray700: #374151; + --gray800: #1F2937; + --gray900: #111827; + --blue: #3692FF; +} + * { box-sizing: border-box; } @@ -15,8 +28,8 @@ /* 버튼 관련 */ .button { - background-color: #3692FF; - color: #F3F4F6; + background-color: var(--blue); + color: var(--gray100); font-weight: 600; cursor: pointer; display: flex; @@ -91,7 +104,7 @@ section.top-banner { width: 100%; height: 771px; - background-color: #CFE5FF; + background-color: var(--gray50); display: flex; justify-content: center; } @@ -108,7 +121,7 @@ display: flex; flex-direction: column; gap: 32px; - color: #374151; + color: var(--gray700); font-size: 40px; font-weight: 700; line-height: 56px; @@ -146,19 +159,19 @@ justify-content: center; align-items: left; gap: 24px; - background-color: #FCFCFC; + background-color: var(--gray50); border-radius: 12px; overflow: hidden; } .hot-item-text > p { - color: #3692FF; + color: var(--blue); font-size: 16px; font-weight: 700; padding-left: 8px; } .hot-item-text > h2 { - color: #374151; + color: var(--gray700); font-size: 24px; font-weight: 700; line-height: 32px; @@ -166,7 +179,7 @@ padding-left: 8px; } .hot-item-text > h3 { - color: #374151; + color: var(--gray700); font-size: 16px; font-weight: 500; line-height: 26px; @@ -192,19 +205,19 @@ justify-content: center; align-items: end; gap: 24px; - background-color: #FCFCFC; + background-color: var(--gray50); border-radius: 12px; overflow: hidden; } .search-text > p { - color: #3692FF; + color: var(--blue); font-size: 16px; font-weight: 700; text-align: right; padding-right: 8px; } .search-text > h2 { - color: #374151; + color: var(--gray700); font-size: 24px; font-weight: 700; line-height: 32px; @@ -213,7 +226,7 @@ padding-right: 8px; } .search-text > h3 { - color: #374151; + color: var(--gray700); font-size: 16px; font-weight: 500; line-height: 26px; @@ -240,18 +253,18 @@ justify-content: center; align-items: left; gap: 24px; - background-color: #FCFCFC; + background-color: var(--gray50); border-radius: 12px; overflow: hidden; } .register-text > p { - color: #3692FF; + color: var(--blue); font-size: 16px; font-weight: 700; padding-left: 8px; } .register-text > h2 { - color: #374151; + color: var(--gray700); font-size: 24px; font-weight: 700; line-height: 32px; @@ -259,7 +272,7 @@ padding-left: 8px; } .register-text > h3 { - color: #374151; + color: var(--gray700); font-size: 16px; font-weight: 500; line-height: 26px; @@ -277,7 +290,7 @@ section.bottom-banner { width: 100%; height: 540px; - background-color: #CFE5FF; + background-color: var(--gray50); display: flex; justify-content: center; } @@ -293,7 +306,7 @@ .bottom-banner-text { width: 296px; height: 172px; - color: #374151; + color: var(--gray700); font-size: 40px; font-weight: 700; line-height: 56px; @@ -309,7 +322,7 @@ /* footer */ .footer-wrapper { - background-color: #111827; + background-color: var(--gray900); width: 100%; height: 160px; font-size: 16px; @@ -339,18 +352,18 @@ display: flex; flex-direction: row; gap: 30px; - color: #E5E7EB; + color: var(--gray200); text-decoration: none; cursor: pointer; a:visited { - color: #E5E7EB; + color: var(--gray200); } } .footer-mid > a { text-decoration: none; - color: blue; + color: var(--blue); } .footer-right-sns { @@ -385,8 +398,8 @@ /* 버튼 관련 */ .button { - background-color: #3692FF; - color: #F3F4F6; + background-color: var(--blue); + color: var(--gray50); font-weight: 600; cursor: pointer; display: flex; @@ -461,7 +474,7 @@ section.top-banner { width: 100%; height: 771px; - background-color: #CFE5FF; + background-color: var(--gray50); display: flex; justify-content: center; } @@ -478,7 +491,7 @@ display: flex; flex-direction: column; gap: 32px; - color: #374151; + color: var(--gray700); font-size: 40px; font-weight: 700; line-height: 56px; @@ -515,25 +528,25 @@ justify-content: center; align-items: left; gap: 24px; - background-color: #FCFCFC; + background-color: var(--gray50); border-radius: 12px; overflow: hidden; } .hot-item-text > p { - color: #3692FF; + color: var(--blue); font-size: 18px; font-weight: 700; } .hot-item-text > h2 { - color: #374151; + color: var(--gray700); font-size: 32px; font-weight: 700; line-height: 42px; margin: 16px auto 24px; } .hot-item-text > h3 { - color: #374151; + color: var(--gray700); font-size: 18px; font-weight: 500; line-height: 26px; @@ -558,18 +571,18 @@ justify-content: center; align-items: end; gap: 24px; - background-color: #FCFCFC; + background-color: var(--gray50); border-radius: 12px; overflow: hidden; } .search-text > p { - color: #3692FF; + color: var(--blue); font-size: 18px; font-weight: 700; text-align: right; } .search-text > h2 { - color: #374151; + color: var(--gray700); font-size: 32px; font-weight: 700; line-height: 42px; @@ -577,7 +590,7 @@ margin: 16px auto 24px; } .search-text > h3 { - color: #374151; + color: var(--gray700); font-size: 18px; font-weight: 500; line-height: 26px; @@ -603,24 +616,24 @@ justify-content: center; align-items: left; gap: 24px; - background-color: #FCFCFC; + background-color: var(--gray50); border-radius: 12px; overflow: hidden; } .register-text > p { - color: #3692FF; + color: var(--blue); font-size: 18px; font-weight: 700; } .register-text > h2 { - color: #374151; + color: var(--gray700); font-size: 32px; font-weight: 700; line-height: 42px; margin: 16px auto 24px; } .register-text > h3 { - color: #374151; + color: var(--gray700); font-size: 18px; font-weight: 500; line-height: 26px; @@ -637,7 +650,7 @@ section.bottom-banner { width: 100%; height: 927px; - background-color: #CFE5FF; + background-color: var(--gray50); display: flex; justify-content: center; } @@ -653,7 +666,7 @@ .bottom-banner-text { width: 296px; height: 172px; - color: #374151; + color: var(--gray700); font-size: 40px; font-weight: 700; line-height: 56px; @@ -669,7 +682,7 @@ /* footer */ .footer-wrapper { - background-color: #111827; + background-color: var(--gray900); width: 100%; height: 160px; font-size: 16px; @@ -690,8 +703,9 @@ } .footer-left { - color: #9CA3AF; + color: var(--gray400); width: 112px; + order: 0; } .footer-mid { @@ -699,17 +713,17 @@ flex-direction: row; width: 181px; gap: 30px; - color: #E5E7EB; + color: var(--gray200); text-decoration: none; cursor: pointer; a:visited { - color: #E5E7EB; + color: var(--gray200); } } .footer-mid > a { text-decoration: none; - color: blue; + color: var(--blue); } .footer-right-sns { @@ -744,8 +758,8 @@ /* 버튼 관련 */ .button { - background-color: #3692FF; - color: #F3F4F6; + background-color: var(--blue); + color: var(--gray100); font-weight: 600; cursor: pointer; display: flex; @@ -818,7 +832,7 @@ section.top-banner { width: 100%; height: 540px; - background-color: #CFE5FF; + background-color: var(--gray50); display: flex; justify-content: center; } @@ -833,7 +847,7 @@ display: flex; flex-direction: column; gap: 32px; - color: #374151; + color: var(--gray700); font-size: 40px; font-weight: 700; line-height: 56px; @@ -866,23 +880,23 @@ justify-content: center; align-items: center; gap: 64px; - background-color: #FCFCFC; + background-color: var(--gray50); border-radius: 12px; overflow: hidden; } .hot-item-text > p { - color: #3692FF; + color: var(--blue); font-size: 18px; font-weight: 700; } .hot-item-text > h2 { - color: #374151; + color: var(--gray700); font-size: 40px; font-weight: 700; line-height: 56px; } .hot-item-text > h3 { - color: #374151; + color: var(--gray700); font-size: 24px; font-weight: 500; line-height: 32px; @@ -910,23 +924,23 @@ justify-content: center; align-items: center; gap: 64px; - background-color:#FCFCFC; + background-color: var(--gray50); border-radius: 12px; overflow: hidden; } .search-text > p { - color: #3692FF; + color: var(--blue); font-size: 18px; font-weight: 700; } .search-text > h2 { - color: #374151; + color: var(--gray700); font-size: 40px; font-weight: 700; line-height: 56px; } .search-text > h3 { - color: #374151; + color: var(--gray700); font-size: 24px; font-weight: 500; line-height: 32px; @@ -950,23 +964,23 @@ justify-content: center; align-items: center; gap: 64px; - background-color:#FCFCFC; + background-color:var(--gray50); border-radius: 12px; overflow: hidden; } .register-text > p { - color: #3692FF; + color: var(--blue); font-size: 18px; font-weight: 700; } .register-text > h2 { - color: #374151; + color: var(--gray700); font-size: 40px; font-weight: 700; line-height: 56px; } .register-text > h3 { - color: #374151; + color: var(--gray700); font-size: 24px; font-weight: 500; line-height: 32px; @@ -987,7 +1001,7 @@ section.bottom-banner { width: 100%; height: 540px; - background-color: #CFE5FF; + background-color: var(--gray50); display: flex; justify-content: center; } @@ -1002,7 +1016,7 @@ .bottom-banner-text { width: 296px; height: 172px; - color: #374151; + color: var(--gray700); font-size: 40px; font-weight: 700; line-height: 56px; @@ -1018,7 +1032,7 @@ /* footer */ .footer-wrapper { - background-color: #111827; + background-color: var(--gray900); width: 100%; height: 160px; font-size: 16px; @@ -1039,24 +1053,25 @@ } .footer-left { - color: #9CA3AF; + color: var(--gray400); + order: 0; } .footer-mid { display: flex; flex-direction: row; gap: 30px; - color: #E5E7EB; + color: var(--gray200); text-decoration: none; cursor: pointer; a:visited { - color: #E5E7EB; + color: var(--gray200); } } .footer-mid > a { text-decoration: none; - color: blue; + color: var(--blue); } .footer-right-sns {