유튜브 벤치마킹 반응형으로 만들어 보기

스스로 처음으로 만들어 볼 벤치마킹 사이트로 유튜브 만들기에 도전해 봤다.

 

처음엔 실제로 유튜브 영상들을 하나하나 링크를 걸어서 만들었는데 렉이 너무 걸려서 다양한 영상이 있는 것처럼 보이게 하기 위해 박스를 무지개 색으로 나열하였고 hover 이벤트로 마우스를 가져다 놓으면 박스 모양이 변하도록 하여 재생이 될 것처럼 만들어 보았다. (두번째 박스에 마우스를 hover시)

 

유튜브를 보면 스크롤을 내릴시 끝없이 계속 영상이 나오는데 이걸 재현하기 위해 스크롤을 내리면 새로운 박스 6개를 생성 되도록 만들었다.

y = 수직 스크롤바 위치, max_heihgt = 윈도우의 높이, fullheight = body의 전체 요소의 길이 를 계산해서

수직 스크롤바 위치 + 윈도우의 높이가 body의 전체 요소길이 - 50 보다 길다면 새로운 박스 6개를 생성하도록 했다.

 

이제 창의 크기에 따라 박스 크기를 바꿔주고 창크기가 800px 이하로 작아진다면 박스 배열을 row에서 column로 바꿔준다

이때 굳이 flex-direction을 사용하여 row에서 column 바꿔줄 필요 없이 flex-wrap:wrap로 주고 박스 크기를 90%로 바꿔서 수직 정렬이 자동으로 되도록 하였다. 

 

link : https://jenniejuno.github.io/youtube_benchmarking_last/