어떤 방법으로 사용자에게 정보를 편리하게 제공할까?

• 사용자가 원하는 정보를 빠르게 습득할 수 있도록 ‘오늘의 관람 시간’ 영역을 전시 안내와 함께 배치

  

• '소식·참여' 페이지를 추가해 메인 페이지 재구성

  

핀터레스트 스타일(Masonry)레이아웃을 어떻게 만들 수 있을까?

Masonry 레이아웃을 구현하기 위해 관련 자료 서치, 플러그인 혹은 grid를 활용하는 방법 습득

다양한 기능을 직접 활용하는 것을 목표로 삼아 grid, flex로 레이아웃 구성

메인 영상에 요소들이 가려져 보이지 않을 때

video, logo, header 등 main 페이지의 요소가 순서대로 정리되지 않아 서로 가려 보이는 문제 발생
▶ z-index로 해결

비디오 사이즈 조절 스크롤 이벤트

• 1) 스크롤을 최대로 내려도 비디오가 뷰포트를 가득 채우지 않음

  기존에 구현하고자 했던 이벤트 대신 한 번의 스크롤로 비디오 사이즈가 확대되도록 변경

  scrollY로 현재 스크롤 위치&뷰포트 높이 계산, 스크롤 위치 0 이상일 때 비디오 사이즈 확대

• 2) 비디오가 확대되면 메인 페이지의 요소들이 보이지 않음

  CSS에서 .on 클래스를 작성해 비디오가 확대되었을때 보이지 않는 요소들은 색상이 반전되도록 설정

  스크립트에 if문과 scrollY를 사용해 스크롤이 최상단을 벗어나면 .on이 활성화되도록 구현

더보기 버튼에서 커서 이미지가 보이지 않으면?

CSS에서 색상 반전 스타일 값 설정, JavaScript로 해당 클래스를 활성화할 수 있는 스크립트 작성

clientX, clientY로 마우스 현재 위치 계산, 마우스가 위치한 요소의 색상이 #000일 때 클래스 활성화