first_project DAY+5

KEEP 오늘의 좋았던 경험

• Main 페이지 Footer가 페이지의 맨밑에 그냥 잘 있게 만들기 성공.

<section class="wrapper">
  <Header />
  <Content />
  <Footer />
</section>

위 처럼 페이지가 구성 되어있을 때, 최상위 태그에 flex를 걸어준다.

.wrapper {
  display: flex;
  flex-direction: column;
  height: 100vh;
}

그리고 Content 컴포넌트에 flex: 1로 화면 전체를 다 사용하라고 해준다. 이때, Header와 Footer에 height로 높이를 설정해주면 스크롤을 내리거나 화면이 작아질때 높이가 달라질 수 있다. padding을 줘서 높이를 조절해주면 된다.

• LogIn 페이지 디자인 완료.
• BookReviewModal 리뷰 삭제기능 만들기.

PROBLEM 고쳐나갈 경험

• CSS 생각보다 알고있어야 하는 지식이 많은것 같다. CSS관련된 영상 찾아보면서 어떤 기능들이 있는지 익혀둘 필요가 있을 것 같다.
• 재사용 될 것같은 코드 같은 것을 미리 한곳에 모아놓고 사용할 필요가 있어 보인다. 지금은 생각나는 대로 만드는 감이 있는데, 4주차 프로젝트 할 때는 미리 어떤게 자주 쓰일지를 미리 생각해서 만들어야겠다.
• LogIn 페이지에서 웹 크기를 가로로 줄이면 찌그러들면서 작아졌는데, 가장 최상위 태그에 align-items : center가 걸리면서 크기가 줄어들지 않게됐다. 이러한 부분이 반응형 디자인과 관련된 부분인 것 같은데 왜 그렇게 되는지 이해하고 넘어갈 필요가 있어보인다.

TRY 시도해볼 일

• styled component에서 div에 background-image가 적용이 안되었는데 왜 안되는지 찾아보기.