[login responsive css] 로그인 반응형 페이지 style & unsplash 랜덤이미지 사용

완성된 login css

현재는 일반 사이트 사용처럼 로그인 페이지로 이동하여 로그인을 하도록 작성하였는데 이게 아닌!!
url을 통해 홈페이지를 열면 가장 먼저 로그인 페이지가 나오고, 로그인이 완료되면 완성해놓은 이 나오도록 해야 하기 때문에 Login Route의 코드를 수정해야 했다.
(admin이니까 당연했음...👀)

그래서 코드를 변경하기 전에 기록용으로 작성해 놓으려고 한다!

login jsx

import { Link } from "react-router-dom";

function LoginPages() {
  return (
    <section className="mainWrap loginWrap">
      <h3 className="blind">login</h3>
      <div className="loginBox commonBox">
        <div className="loginImg">
          <span className="blind">로그인 설명 및 광고 이미지</span>
        </div>
        <div className="loginServies">
          <h3>login</h3>
          <form className="loginForm">
            <input
              type="text"
              name="user__Id"
              id="userId"
              placeholder="아이디를 입력해 주세요."
            />
            <label htmlFor="userId" className="blind userIdLabel">
              아이디를 입력해 주세요.
            </label>
            <input
              type="password"
              name="user__Pw"
              id="userPw"
              placeholder="비밀번호를 입력해 주세요."
            />
            <label htmlFor="userPw" className="blind userPwLabel">
              비밀번호를 입력해 주세요.
            </label>
            <button type="submit" className="loginBtn">
              Log In
            </button>
          </form>
          <div className="LoginLinkWrap">
            <Link to="/join" className="joinLink link">
              <span>회원가입</span>
            </Link>
            <Link to="/forgetPw" className="forgerPwLink link">
              <span>비밀번호 찾기</span>
            </Link>
          </div>
        </div>
      </div>
    </section>
  );
}
export default LoginPages;

css

.loginWrap {
  padding: 0 2rem;
}
/*wide PC version*/
@media screen and (min-width: 1200px) {
  .loginWrap {
    padding: 0 10rem;
  }
}

.loginBox {
  display: flex;
  width: 100%;
  height: 400px;
}

.loginImg {
  display: block;
  width: 50%;
  height: 100%;
  background-image: url("https://source.unsplash.com/random");
  background-repeat: no-repeat;
  background-size: cover;
  border-top-left-radius: 5px;
  border-bottom-left-radius: 5px;
}

.loginServies {
  width: 50%;
  height: 100%;
  padding: 30px 50px;
}
/*mob & tab version*/
@media screen and (max-width: 767px) {
  .loginBox {
    display: block;
  }
  .loginImg {
    display: none;
  }
  .loginServies {
    width: 100%;
  }
}

.loginForm {
  width: 100%;
  height: auto;
}
.loginServies h3 {
  font-size: 30px;
  font-family: var(--font-point);
  color: var(--color-primary);
  padding: 20px 0 40px;
  text-transform: uppercase;
}
.loginServies input {
  width: 100%;
  height: 50px;
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
  border-bottom: 1px solid var(--color-gray);
}
.loginServies input:focus {
  transition: all 300ms ease-in;
  border-bottom: 1px solid var(--color-primary);
  background-color: var(--color-gray);
}
#userId {
  margin-bottom: 20px;
}
#userPw {
  margin-bottom: 40px;
}
.loginBtn {
  width: 100%;
  height: 40px;
  background-color: var(--color-gray);
  border-radius: 5px;
  transition: all 300ms ease-in;
  color: var(--color-black);
  margin-bottom: 20px;
  outline: none;
}
.loginBtn:hover {
  background-color: var(--color-primary);
  color: var(--color-white);
}
.loginBtn:focus {
  background-color: var(--color-pointgray);
  color: var(--color-white);
  box-shadow: var(--styles-boxShadow);
}
.LoginLinkWrap {
  display: flex;
  justify-content: center;
}
.LoginLinkWrap .link {
  padding: 4px 12px;
  transition: all 300ms ease-in;
  outline: none;
  font-size: var(--font-size-small);
  font-weight: 300;
}
.LoginLinkWrap .link:hover {
  border-radius: 5px;
  font-weight: 400;
}
.LoginLinkWrap .link:focus {
  background-color: var(--color-gray);
  border-radius: 5px;
  font-weight: 400;
}

• backgound-img()에서 background-image: url("https://source.unsplash.com/random");를 이용하여 배경 이미지가 랜덤으로 나오게 했다.