오늘은 netflix 웹사이트 만들기 마무리 단계이다. 리액트 컴포넌트를사용해서 무엇이든지 만들어보자고 한 첫번째가 netflix였다. html 과 css부분에서는 어려운 부분은 없었다.
자바스크립트와 리액트를 공부하는 동안 css에대해서 조금 미숙해지는 부분이 있었는데 이번기회에 다시 상기가 되었다.
바로 컴포넌트들을 확인해보면
function Home(){
return(
<div>
<Banner />
<Main />
</div>
);
}
보시다시피 banner 컴포넌트 다음에 main컴포넌트를 만들어주었다 해당 페이지의 메인 부분이다.
import "../css/Main.css"
import downroad from "../img/down.png"
import plus from "../img/plus.png"
function Main(){
const video = "https://assets.nflxext.com/ffe/siteui/acquisition/ourStory/fuji/desktop/video-tv-0819.m4v"
const img1 = "https://assets.nflxext.com/ffe/siteui/acquisition/ourStory/fuji/desktop/device-pile.png"
const video1 = "https://assets.nflxext.com/ffe/siteui/acquisition/ourStory/fuji/desktop/video-devices.m4v";
const img3 = "https://assets.nflxext.com/ffe/siteui/acquisition/ourStory/fuji/desktop/mobile-0819.jpg";
return(
<div>
<div className="main_container">
<div className="main_text">
<h2>TV로 즐기세요</h2>
<p>스마트 TV, PlayStation, Xbox, Chromecast, Apple TV, 블루레이 플레이어 등 다양한 디바이스에서 시청하세요.</p>
</div>
<div className="main_img_video">
<img src={img} alt={img}/>
<video width="465px" muted playsinline autoPlay loop>
<source src= {video} type="video/mp4"/>
</video>
</div>
</div>
<div className="br"></div>
<div className="main_container">
<div className="main_img_video_second">
<img src={img1} alt={img1}/>
<video width="390px" muted playsinline autoPlay loop>
<source src= {video1} type="video/mp4"/>
</video>
</div>
<div className="main_text_second">
<h2>어디서나 자유롭게 시청하세요</h2>
<p>각종 영화와 시리즈를 스마트폰, 태블릿, 노트북, TV에서 무제한으로 스트리밍하세요.</p>
</div>
</div>
<div className="br"></div>
<div className="main_container">
<div className="main_text_third">
<h2>어린이 전용 프로필을 만들어 보세요</h2>
<p>자기만의 공간에서 좋아하는 캐릭터와 즐기는 신나는 모험. 자녀에게 이 특별한 경험을 선물하세요. 넷플릭스 회원이라면 무료입니다.</p>
</div>
<div className="main_img_video_third">
<img src={img2} alt={img2}/>
</div>
</div>
<div className="br"></div>
<div className="main_container">
<div className="main_img_video_fourth">
<img className ="img_1"src={img3} alt={img3}/>
<div className="fourth_container">
<img className = "img_2" src={img4} alt={img4}/>
<div class="fourth_layout">
<div>기묘한 이야기</div>
<div>저장 중...</div>
</div>
<img width="22px"src={downroad}/>
</div>
</div>
<div className="main_text_fourth">
<h2>즐겨 보는 콘텐츠를 저장해 오프라인으로 시청하세요</h2>
<p>광고 없는 멤버십에서만 이용 가능합니다.</p>
</div>
</div>
<div className="br"></div>
<div className="qna_container">
<h2>자주 묻는 질문</h2>
<div className="qna">
<ul>
<li>
<h3>
<button>넷플릭스에서 어떤 콘텐츠를 시청할 수 있나요?</button>
<img width="30px" height="30px" src={plus}/>
</h3>
<h3>
<button>넷플릭스란 무엇인가요?</button>
<img width="30px" height="30px" src={plus}/>
</h3>
<h3>
<button>넷플릭스 요금은 얼마인가요?</button>
<img width="30px" height="30px" src={plus}/>
</h3>
<h3>
<button>어디에서 시청할 수 있나요?</button>
<img width="30px" height="30px" src={plus}/>
</h3>
<h3>
<button>멤버십을 해지하려면 어떻게 하나요?</button>
<img width="30px" height="30px" src={plus}/>
</h3>
<h3>
<button>아이들이 넷플릭스를 봐도 좋을까요?</button>
<img width="30px" height="30px" src={plus}/>
</h3>
</li>
</ul>
<div>시청할 준비가 되셨나요? 멤버십을 등록하거나 재시작하려면 이메일 주소를 입력하세요.</div>
<form className="email">
<span>
<input
placeholder="이메일 주소"
required/>
<button>시작하기 {'>'}</button>
</span>
</form>
</div>
</div>
</div>
);
}
export default Main;
main 컴포넌트의 jsx부분이다. 여러 이미지와 비디오를 넷플릭스 공식 홈페이지에서 불러와서 사용하였다.
jsx로 html를 작성하는 것은 딱히 어려운 부분은 없었다.
.main_container{
display:flex;
justify-content: center;
align-items: center;
padding:72px 0px 72px 0px;
color: white;
}
.main_text{
display:flex;
flex-direction:column;
padding-right:10px;
}
.main_text h2{
font-size:45px;
margin:0px;
width:400px;
}
.main_text P {
font-size:25px;
width: 590px;
}
.main_img_video{
position:relative;
}
.main_img_video video{
position: absolute;
top:100px;
right:90px;
z-index: -1;
}
.br{
background-color: #262626;
height:10px;
}
.main_img_video_second{
position:relative;
padding-left:10px;
}
.main_img_video_second video{
position: absolute;
top:50px;
right:130px;
z-index: -1;
}
.main_text_second{
display:flex;
flex-direction:column;
padding-right:10px;
}
.main_text_second h2{
width: 400px;
font-size:45px;
margin:0px;
}
.main_text_second p {
font-size:25px;
width: 550px;
}
.main_text_third{
margin-right:10px;
}
.main_text_third h2{
width: 440px;
font-size:45px;
margin:0px;
}
.main_text_third p {
font-size:25px;
width: 620px;
}
.main_img_video_third img{
width:580px;
height:485px;
}
.main_text_fourth h2{
width: 550px;
font-size:45px;
margin:0px;
}
.main_text_fourth p {
font-size:25px;
width: 620px;
}
.main_img_video_fourth{
position:relative;
}
.img_1{
width:580px;
height:435px;
}
.img_2{
width:57px;
height:80px;
padding-left:2px;
}
.fourth_container{
display:flex;
flex-direction: row;
align-items: center;
position:absolute;
width:300px;
justify-content: space-between;
border-radius: 7px;
border:2px solid #616161;
padding:8px 12px 8px 12px;
left:125px;
top:300px;
background-color: black;
}
.fourth_layout div:first-child{
width:180px;
}
.fourth_layout div:last-child{
color:#007afd;
}
.qna_container{
display:flex;
flex-direction: column;
text-align: center;
padding:72px 0px 72px 0px;
}
.qna_container h2{
color: white;
font-size:48px;
margin:0px;
}
.qna ul {
padding:0px;
display: flex;
justify-content: center;
}
.qna h3 {
display:flex;
align-items: center;
padding:24px;
background-color: #262626;
margin:10px 0px 10px 0px;
cursor:pointer;
}
.qna h3 button{
display:flex;
font-size:24px;
width:1100px;
background-color: #262626;
color:white;
border: none;
cursor:pointer;
}
.qna div{
color:white;
font-size:20px;
}
.email span{
display:flex;
justify-content: center;
margin:20px 0px 20px 0px;
}
.email input{
width: 402px;
height:56px;
background-color: transparent;
padding: 0px 0px 0px 16px;
border: 1px solid #bbbbbb;
font-size:17px;
font-weight:bold;
border-radius: 5px;
}
.email button{
width:176px;
height:56px;
padding: 0px;
border: 0px;
margin-left:10px;
color: white;
border: 1px solid #e50914;
background-color: #e50914;
border-radius: 5px;
font-size:24px;
cursor:pointer;
}
다음은 main의 css부분이다 css또한 새로 알게 된 점은 딱히 없고 알고있는것들중에서 사용하였다.
비디오를 이미지에 넣기위해서 position에 대해서 자세하게 작성한 것 말고는 특이점은 없었다.
그러면 netflix 웹사이트의 결과물을 보자면
.