TIL - CSS와 친해지기

오늘은 새로운 팀 과제 발제가 있는 날이었습니다. 기존의 영화 페이지에 성능을 추가하는데 내가 맡은 역할은 영화 카드를 클릭 시 기존엔 영화 id가 alert창에 출력되었다면 영화 상세 페이지에 이동해서 영화 상세페이지 안에 코멘트를 등록 수정 삭제 할 수 있게 만드는 것입니다.

 

와이어 프레임

오늘 하루는 영화 상세 페이지를 어떻게 작성할지 고민하느라 시간을 다 소비했던 것 같습니다. 우선 모바일 화면일 땐 뒤로 가기 버튼이 없으니 따로 만들어 줘야 된다는 것을 가장 첫 번째로 생각했고 개인 과제에서 사용했던 슬라이더에서 backdrop.path 배경을 전체 배경으로 사용해야겠다고 생각했고 아래에는 연습용으로 만든 블로그에서 사용했던 탭 전환 기술도 적용시키면서 코멘트는 한 사람당 한 개로 제외하도록 하는 것으로 와이어 프레임을 작성했습니다.

 

 

 

기본 틀

 

오늘 배운 것은 대부분 CSS나 홈페이지의 뼈대를 어떻게 구성할지 고민하느라 다른 개념을 학습하지 못했지만 기존에 사용했던 탭 전환 기술에서 어떻게 하면 부드럽게 표시해야 하는지 배웠고 display: none; / display: block; 과 opacity를 이용한 투명도 애니메이션 중에 팀 프로젝트에는 display로 변경하는 것이 나을 것 같아서 display로 결정했습니다.

 

또한 기존의 배경 이미지에 위와 아래에 div를 넣어서 포지션으로 고정하고 그림자 효과를 넣어서 영화 화면의 배경을 자연스럽게 강조시켜도 보고 코멘트 작성창을 모달창으로 할지 탭 전환으로 만들지 엄청 고민한 끝에 결국 탭전환을 사용하기로 했습니다. 오늘 느낀 점은 JS코드로 데이터를 동적으로 가져오거나 이벤트 처리 함수를 만드는 것보다 코딩을 시작하기 전에 어떻게 만들지 고민하는 것이 더 시간이 많이 소모되는 것 같다고 생각하게 된 하루였습니다. 내일은 JS로 동적으로 데이터를 받아와서 페이지에 적용시키는 것을 목표로 하고 팀원분이 로그인 기능을 구현하시면 코멘트 창과 코멘트 데이터를 CRUD 기능을 구현 하는 것 목표로 하겠습니다.