2회차 과제 - 안현석

[nyeonseok]

신경써서 구현한 부분

CSS

• px => rem으로 변경하여 너비, 높이에 따라 유연하게 반응하도록 함, 1rem는 25px로 설정.
• max-width를 여러 경우로 나눠서 html의 px을 변경해줌.
• max-width가 710px이 되면 기존의 inner에 flex-direction : row가 flex-direction : column으로 변경.
• 반응형 관련된 코드는 default.css에 모아둠.

@media ((max-width: 1280px) or (max-height:850px)) {
  html {
    font-size: 23px;
  }
}

@media ((max-width: 1160px) or (max-height:760px)) {
  html {
    font-size: 21px;
  }
  .selectItem {
    height: 12rem;
  }
}
@media ((max-width: 1080px) or (max-height:700px)) {
  html {
    font-size: 19px;
  }
  .selectItem {
    height: 12rem;
  }
}
@media (max-width: 960px) {
  html {
    font-size: 16px;
  }
}
@media (max-width: 810px) {
  html {
    font-size: 14px;
  }
  .selectItem {
    width: 9rem;
  }
}
@media (max-width: 710px) {
  html {
    font-size: 14px;
  }
  #titleContainer {
    justify-content: center;
  }
  #contentContainer {
    margin-top: 4rem;
  }
  .contentText {
    text-align: center;
  }
  #inner {
    display: flex;
    flex-direction: column;
  }
  #leftDiv {
    justify-content: start;
  }
  #rightDiv {
    /* display: none; */
    align-items: start;
    justify-content: center;
  }
  #loginForm {
    display: none;
  }
  #selectContainer {
    margin-top: 3rem;
  }

  .selectItem {
    width: 13rem;
    height: 15rem;
  }
  /* #rightDiv {
    justify-content: center;
  } */
  #loginBtnContainer {
    display: flex;
    justify-content: center;
    margin-top: 2rem;
  }
  #onlyLoginBtn {
    display: block;
  }
}
@media (max-width: 620px) {
  html {
    font-size: 12px;
  }
}
@media (max-width: 560px) {
  html {
    font-size: 10px;
  }
}
@media (max-width: 460px) {
  html {
    font-size: 8px;
  }
}
@media (max-width: 370px) {
  html {
    font-size: 6px;
  }
}

710px 이하인 경우

핸드폰 화면 정도의 작은 경우에 대해 고려한 부분입니다. 앱 느낌처럼 하려고 노력해봤습니다!

• loginForm은 사라지고 로그인 버튼만 보임.
• 로그인 버튼을 누르면 멋사 로고와 타이틀 제목을 제외하고 다 사라지고, loginForm이 보임.
• 뒤로가기 버튼을 누르면 이전 상태로 되돌아감.
• 로그인 버튼을 눌렀을 때와, 뒤로가기 버튼을 눌렀을 때 toggle 설정

나머지

• hover, active를 써서 좀 더 꾸며봤습니다.

질문

좀 더 개선할 수 있는 부분이 있다면 많은 리뷰 부탁 드립니다!😄