뚠뚜 개발일지

[HTML_CSS] Netflix clone coding 본문

공부/html_css

[HTML_CSS] Netflix clone coding

뚠뚜 2022. 12. 16. 20:39

시작하며

 

- 프로젝트 기간 : 2022. 12. 14

- 학습 목표 : html과 cssa 그리고 맛보기 js로 넷플릭스 클론 코딩하기 (반응형)

- 사용한 언어 :

 

- 강의 영상 : https://www.youtube.com/watch?v=P7t13SGytRk&t=22s 

 

- 깃허브 페이지 : https://junmi0918.github.io/netflix-clone/

 

Netflix - Watch TV Show Online, Watch Movies Online

Watch TV shows and movies anytime, anywhere - personalized for you. Watch Free For 30 Days Watch on your TV Smart TVs, PlayStation, Xbox, Chromecast, Apple TV, blu-ray players and more. Watch instantly or download for later Available in phone and tablet, w

junmi0918.github.io

준비 과정

 

1. 무료 아이콘 연결하기

https://fontawesome.com/

 

Font Awesome

The internet's icon library + toolkit. Used by millions of designers, devs, & content creators. Open-source. Always free. Always awesome.

fontawesome.com

2. 로그인 후 Font Awesome을 사용하려는 프로젝트 <body> 내부 하단에 복사해서 붙여넣기 한다.

font Awesome 로그인 후 Your Kits 버튼을 누른 화면
font Awesome 코드를 프로젝트 body 하단 부분에 삽입했다.

구현 목록

css에서 background에 url을 이용하여 이미지를 삽입했다.

background: url(./img/background.jpg) no-repeat center center/cover;

 

투명도와 그림자 효과를 주기 전, 후 이미지

class_name:after에서 background: rgba랑 box-shadow 코드를 사용하여 메인 이미지에 어둡고 그림자가 낀 효과를 줬다. 

background: rgba(0, 0, 0, 0.6);
box-shadow: inset 120px 100px 250px #000, inset -120px -100px 250px #000;

 

Cancel antyime 메뉴를 클릭했을 때 보이는 화면
Watch anywhere&nbsp;메뉴를 클릭했을 때 보이는 화면
Pick your price&nbsp;메뉴를 클릭했을 때 보이는 화면

먼저 html에서 div를 분리하여 적은 후 css에서 displye: none; 코드를 이용하여 페이지를 안보이게 했다.

js에서 addEventListener에 click 이벤트를 추가한 후, 클릭한 메뉴(div)에 displye: none;이 제거된 class name가 추가될 수 있게 했다. 최종적으로 클릭한 메뉴에 해당하는 페이지만 보이도록 했다.

 

저작자표시

'공부 > html_css' 카테고리의 다른 글

[CSS] css초기화/ 리셋 reset  (0) 2023.01.04
[HTML_CSS] 반응형 웹페이지 제작하기  (0) 2022.12.15
[CSS] css flexbox 속성  (0) 2022.11.10
[CSS] css로 춘식이 만들기  (0) 2022.11.09
[CSS] css로 라이언 만들기  (0) 2022.11.09
'공부/html_css' Related Articles more