[최제원] Sprint4 (#155)

* reset

* fix: 머지 후 브랜치 삭제 github action 수정

* env: workflows 폴더로 이동

* codeit sprint mission part1 update (#13)

* BEM 네이밍 및 시멘틱 구조 개선

* BEM에 맞게 HTML의 class 명칭과 CSS 명칭 수정

* codeit-sprint2 mission 로그인 홈페이지와 회원가입 홈페이지 제작 (#68)

* [최제원] Sprint2 (#102)

* div태그 대신 header 태그로 변경 및 logo-img에 대한 a태그 추가

* 이미지 파일구조 수정 및 파일구조 수정에 따른 이미지들의 src 수정

* login.html form태그와 label태그로 변경 및 비밀번호 가림 이미지 추가와 그에 맞는 css 적용

* signup.html form태그와 label태그로 변경 및 비밀번호 가림 이미지 추가와 그에 맞는 css 적용

* [최제원] Sprint3 (#114)

* 메인 홈페이지 반응형 웹으로 변경함으로써 CSS 수정 및 변경

* login 홈페이지와 signup 홈페이지를 반응형 웹으로 변경함으로써 CSS 수정 및 변경

* 불필요한 CSS 삭제 및 BEM에 맞게 클래스 이름  수정

* 로그인 홈페이지와 회원가입 홈페이지의 에러메세지 관련 로직 구현

* input에 aria-label 속성 추가

---------

Co-authored-by: hanseulhee <3021062@gmail.com>
Co-authored-by: withyj-codeit <48437814+withyj-codeit@users.noreply.github.com>

css/login.css

@@ -0,0 +1,232 @@
+/* 모든 요소의 크기를 테두리 포함하도록 설정 */
+* {
+  box-sizing: border-box;
+}
+
+@font-face {
+  font-family: "Pretendard-Regular";
+  src: url("https://fastly.jsdelivr.net/gh/Project-Noonnu/noonfonts_2107@1.1/Pretendard-Regular.woff")
+    format("woff");
+  font-weight: 400;
+  font-style: normal;
+}
+
+body {
+  font-family: "Pretendard-Regular", "Noto Sans KR", Arial, sans-serif;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: 100vh;
+}
+
+.login {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  width: 640px;
+}
+
+.logo__container {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 396px;
+  height: 132px;
+  gap: 8px;
+  padding-bottom: 40px;
+}
+
+.logo__link {
+  text-decoration: none;
+  color: #3692ff;
+}
+
+.logo__title {
+  font-size: 66px;
+  font-weight: 700;
+  line-height: 89.56px;
+}
+
+.login__container {
+  display: flex;
+  flex-direction: column;
+  gap: 24px;
+  width: 100%;
+}
+
+.form__container {
+  display: flex;
+  flex-direction: column;
+  gap: 24px;
+}
+
+.form__group {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+  width: 100%;
+}
+
+.form__group-input {
+  height: 56px;
+  border-radius: 12px;
+  border: 0px;
+  background-color: #f3f4f6;
+  padding: 15px 24px;
+  width: 100%;
+}
+
+.form__group-input,
+.form__group-input::placeholder {
+  font-size: 16px;
+  line-height: 26px;
+  font-weight: 400;
+}
+
+.error {
+  border: 2px solid red;
+}
+
+.email__error-message,
+.password__error-message {
+  color: red;
+  padding: 0px 16px;
+  display: none;
+  font-size: 14px;
+  line-height: 24px;
+  font-weight: 600;
+  transform: translateY(-8px);
+}
+
+.form__group-label {
+  font-size: 18px;
+  font-weight: 700;
+  line-height: 26px;
+}
+
+.form__group-input-container {
+  position: relative;
+}
+
+.form__group-img {
+  position: absolute;
+  right: 24px;
+  top: 15px;
+}
+
+.login-button {
+  width: 100%;
+  height: 56px;
+  border-radius: 40px;
+  background-color: #9ca3af;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  text-decoration: none;
+  color: #f3f4f6;
+  font-size: 20px;
+  line-height: 32px;
+  font-weight: 600;
+  border: 0;
+}
+
+.login-button:hover {
+  cursor: pointer;
+}
+
+.social-login__container {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 16px 23px;
+  width: 100%;
+  border-radius: 8px;
+  background-color: #e6f2ff;
+}
+
+.social-login__icon {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  gap: 16px;
+}
+
+.social-login__container > p {
+  font-size: 16px;
+  line-height: 26px;
+  font-weight: 500;
+  color: #1f2937;
+}
+
+.sign-up__container {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  gap: 4px;
+}
+
+.sign-up__container > p {
+  font-size: 14px;
+  font-weight: 500;
+  line-height: 24px;
+  color: #1f2937;
+}
+
+.sign-up__link {
+  font-size: 14px;
+  line-height: 16px;
+  font-weight: 500;
+  color: #3692ff;
+}
+
+@media screen and (max-width: 767px) {
+  .login {
+    padding: 0 16px;
+    width: 100%;
+    max-width: 100%;
+    margin: 0 auto;
+  }
+
+  .logo__container {
+    width: 100%;
+    height: auto;
+    padding-bottom: 24px;
+  }
+
+  .logo__img {
+    width: 51px;
+    height: auto;
+  }
+
+  .logo__title {
+    font-size: 34px;
+    line-height: 44px;
+  }
+
+  .form__container {
+    gap: 16px;
+  }
+
+  .form__group {
+    gap: 8px;
+  }
+
+  .form__group-label {
+    font-size: 14px;
+    line-height: 24px;
+  }
+
+  .login-button {
+    font-size: 20px;
+    line-height: 32px;
+  }
+
+  .social-login__icon {
+    gap: 16px;
+  }
+
+  .sign-up__container {
+    gap: 4x;
+  }
+}