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

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

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

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

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

• z-index로 해결

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

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

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

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

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

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

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

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