clone_netflix

자료 준비

• Netflix 로고 : 구글링
• 버튼 아이콘 : 부트스트랩 웹 사이트(https://getbootstrap.kr/)
• 배경 콘텐츠 썸네일, 제목 : 넷플릭스 홈페이지 개발자도구 탭
• 기타 영화 및 드라마 썸네일 : 넷플릭스 홈페이지

헤더(Header)

• 로고

  • 좌측 상단 배치

    

• 메뉴 탭

  • 중단 배치 : 왼쪽 정렬

    

  • 헤더 배경 색상 검정 → 투명 그라데이션 지정

    

  • 마우스 hover 시 투명도 변경 되도록 지정

    

    

  • 창 크기 줄였을 때 메뉴 탭 없어지고 ‘▼메뉴’ 로 변경 : 미디어 쿼리 활용

    

• 유저 정보, 알람, 키즈, 검색 탭

  • 우측 상단 배치

    

배경(Background)

• 전체 배경은 탭의 background-image로 지정

  

  • ‘국민사형투표’ 텍스트 이미지 및 재생 버튼, 상세 정보 버튼은 따로 탭을 만들어 줌

  • 재생 버튼, 상세 정보 버튼 hover시 버튼의 background만 투명 해지도록 지정

    

    

    

    

컨텐츠(Contents)

• 썸네일 담는 컨텐츠 박스에 display: flexbox 지정 : 가로로 담을 수 있도록 설정

  

• 썸네일 담는 컨텐츠 박스에 overflow-x: auto 지정 : 넘어가는 부분 생기면 스크롤로 넘기기 가능

  

  • .new-content-thumb::-webkit-scrollbar { display: none; } 옵션으로 어울리지 않는 스크롤 바 삭제 (방향키로 이동 가능)

• 썸네일 이미지에 hover시 확대 및 컨텐츠 상세 정보 표시

  

  • display: grid 이용하여 썸네일 이미지와 상세정보 컨텐츠박스를 각 행에 배치

  • 상세정보 컨텐츠 박스 는 기본 상태를 display:none 상태 로 지정

    📌 이 부분에서 dsplay: none 과 opacity 변경, visiblity: hidden 속성 이용, animation 활용 등 방법으로 구현해봤었는데 각각 문제가 발생.

    📌 display: none : transition 적용이 안됨

    📌 opacity 변경 : 투명도가 달라질 뿐 컨텐츠 박스가 남아있어서 투명할 때 컨텐츠 박스 자리에 마우스를 hover시 반응

    📌 visiblity: hidden 속성 이용 : 마찬가지로 컨텐츠 박스가 남아있어서 컨텐츠 박스 자리에 마우스 hover시 반응

    📌 animation 활용 커서가 이미지 박스와 상세정보 박스를 왔다갔다 할 때마다 animation이 재생

  • 썸네일 이미지에 hover시 상세정보 컨텐츠 박스를 diplay:block 해 줌

  • 썸네일과 상세정보의 부모 탭에 hover 시 transform: scale(1.3) 지정

    📌 이미지에 hover시 부모 탭의 스케일 증가 로 지정했었는데 안돼 서 부모 탭 자체에 hover시 스케일 증가로 처리함!!

  • 상세정보 컨텐츠 박스 hover시 에도 display:block 으로 지정

    📌 그렇게 해야지 확대 이후 커서를 상세 정보 쪽으로 옮겨도 display:none 상태가 되지 않음!!!