[TIL] 09.11

오늘 한일

프로젝트 마무리로 전체적인 css 작업을 하였다. ant 디자인을 적용 시켜 둔 덕에 위치와 크기 조절만 해주면 되었다.

하지만 비디오 썸네일을 클릭하면 썸네일 <div> 바로 아래에 동영상을 띄우도록 하는 일에서 많은 시간을 소비했다. 

처음엔 ant 디자인의 드롭 박스 기능을 가져와 적용 시켰는데 동영상 위치 조절이 불가능 하여 가장 왼쪽의 동여상은 짤려서 나왔다.

그래서 두번째로 실행한 방법은 display 속성을 이용하는 방법이었다. 스테이츠 값으로 display: none 으로 설정해두고 클릭을 하면 block 으로 바뀌도록 만들어 두었다. 하지만 이 방법도 썸네일 <div>에 동영상 플레이어가 포함되어 있는 경우라서 위치 이동이 쉽지 않았고 드롭박스와 마찬가지로 제일 왼쪽 동영상은 짤려서 나오게 되었다, 결국 시간이 부족하여 그 상태로 프로젝트를 마무리 하게 되었는데 시간이 된다면 동영상 플레이어를 출력하는 부분에 다시 한번 시도해보려고 한다.