[하유리] Sprint3

css/login.css

@@ -0,0 +1,228 @@
+/* 상단 로고 */
+.logo {
+  width: 396px;
+  height: 132px;
+  display: flex;
+  justify-content: space-around;
+  align-items: center;
+  margin: 0 auto;
+  margin-top: 60px;
+  margin-bottom: 40px;
+}
+
+.logo_image {
+  width: 103.53px;
+  height: 103.88px;
+  top: 12.98px;
+  border-radius: 28.93px;
+}
+
+.logo_text {
+  width: 266px;
+  height: 90px;
+  top: 23.98px;
+  left: 125.77px;
+  font-family: 'ROKAF Sans';
+  font-weight: 700;
+  font-size: 66.34px;
+  /* line-height: 89.56px; */
+  color: #3692FF;
+  text-decoration: none;
+}
+
+form {
+  width: 640px;
+  height: 430px;
+  display: flex;
+  flex-direction: column;
+  gap: 24px;
+  /* top: 232px;
+  left: 640px; */
+  margin: 0 auto;
+}
+
+/* 이메일, 비밀번호 */
+.label-input_total {
+  display: flex;
+  flex-direction: column;
+  gap: 24px;
+}
+
+/* email, password 각각 <div> */
+.email, .password {
+  gap: 16px;
+  flex-direction: column;
+  display: flex;
+}
+
+.email-label, .password-label {
+  height: 21px;
+  font-weight: 700;
+  font-size: 18px;
+  line-height: 21.48px;
+  color: #1F2937;
+}
+
+.email-input, .password-input {
+  width: 100%;
+  height: 56px;
+  border: none;
+  border-radius: 12px;
+  padding: 16px 24px;
+  gap: 10px;
+  background-color: #F3F4F6;
+  /* 폰트 */
+  font-weight: 400;
+  font-size: 16px;
+  /* line-height: 24px; */
+  color: #1F2937;
+}
+
+input:focus {
+  outline: solid #3692FF; /* input 요소에 focus in일 때 테두리 지정 */
+}
+
+::placeholder {
+  height: 24px;
+  font-weight: 400;
+  font-size: 16px;
+  /* line-height: 24px; */
+  color: #9CA3AF;
+}
+
+.password {
+  position: relative;
+}
+
+.password img {
+  position: absolute;
+  right: 23px;
+  bottom: 15px;
+}
+
+.login-btn {
+  width: 100%;
+  height: 56px;
+  border: none; /* 테두리 제거 */
+  border-radius: 40px;
+  /* padding: 16px 124px; */
+  background-color: #9CA3AF;
+
+  font-weight: 600;
+  font-size: 20px;
+  line-height: 24px;
+  text-align: center;
+  color: #FFFFFF;
+  user-select: none; /* 버튼 속 텍스트 선택 방지 */
+}
+
+/* 간편로그인하기 <div> */
+.social_login {
+  width: 100%;
+  height: 74px;
+  border-radius: 8px;
+  background-color: #E6F2FF;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin: 0 auto;
+  position: relative;
+}
+
+.social_login > p {
+  width: 101px;
+  height: 24px;
+  position: relative;
+  /* top: 25px; */
+  left: 23px;
+  font-weight: 500;
+  font-size: 16px;
+  line-height: 24px;
+  color: #1F2937;
+}
+
+/* 구글, 카카오 아이콘 <div> */
+.sns_icons {
+  width: 100px;
+  height: 42px;
+  /* top: 16px; */
+  right: 23px;
+  gap: 16px;
+  position: absolute;
+  display: flex;
+}
+
+/* 구글 아이콘 */
+.sns_icons > img {
+  width: 42px;
+  height: 42px;
+}
+
+/* 하단 텍스트 */
+.bottom_text {
+  display: flex; /* 옆에 배치 */
+  align-items: center;
+  justify-content: center; /* 가로 중앙 정렬 */
+  gap: 4px;
+}
+
+.first_visit, .signup {
+  height: 18px;
+  font-weight: 500;
+  font-size: 15px;
+  line-height: 17.9px;
+  gap: 4px;
+}
+
+/* 첫방문 여부 <p> */
+.first_visit {
+  width: 154px;
+  color: #1F2937;
+}
+
+/* 회원가입 <a> */
+.signup {
+  width: 52px;
+  color: #3182F6;
+}
+
+/* Tablet: 768px ~ 1199px */
+@media screen and (max-width: 1199px) {
+  body {
+    margin: 52px;
+  }
+
+  form {
+    width: 100%;
+  }
+}
+
+/* Mobile: 375px ~ 767px */
+@media screen and (max-width: 767px) {
+  body {
+    margin: 16px;
+  }
+
+  /* 상단 로고영역 */
+  .logo {
+    width: 198px;  /* 원래의 50% */
+    height: 66px;  /* 원래의 50% */
+    gap: 13px;
+  }
+
+  .logo_image {
+    width: 51.765px;  /* 원래의 50% */
+    height: 51.94px;  /* 원래의 50% */
+    border-radius: 0;
+  }
+
+  .logo_text {
+    font-size: 33.17px;  /* 원래의 50% */
+    height: 45px;  /* 원래의 50% */
+  }
+
+  form {
+    width: 100%;
+    max-width: 400px;
+  }
+}