NETFLIX
HTML
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Netflix</title>
<link rel="stylesheet" href="css/netflix.css">
<script src="https://kit.fontawesome.com/9e480ae7f0.js" crossorigin="anonymous"></script>
</head>
<body>
<div class="container">
<nav>
<a href="a">
<img src="/images/netflix-logo.png" id="logo">
</a>
<ul>
<li>TV 프로그램</li>
<li>영화</li>
<li>최신 등록 콘텐츠</li>
<li>내가 찜한 콘텐츠</li>
</ul>
<div class="icon-box">
<div>
<i class="fa-solid fa-display"></i>
</div>
<div>
<i class="fa-solid fa-magnifying-glass"></i>
</div>
<div>
<i class="fa-solid fa-user"></i>
</div>
</div>
</nav>
<section class="banner">
<div class="title-box">
<h1>마션</h1>
<p>NASA 아레스3탐사대는 화성을 탐사하던 중 <br> 모래폭풍을 만나고 팀원 마크 와트니가 사망했다고 판단, 그를 남기고 떠난다.<br> 극적으로 생존한 마크 와트니는 <br>남은 식량과 기발한 재치로 화성에서 살아남을 방법을 찾으며<br> 자신이 살아있음을 알리려 노력한다.</p>
<div class="title-box-btn">
<button>재생</button>
<button>내가 찜한 콘텐츠</button>
</div>
</div>
</section>
<main>
<section class="contents-box">
<h2>오늘 한국의 TOP 10 콘텐츠</h2>
<section>
<div class="poster-box">
<p>1</p>
<div>
<img src="/images/해리포터.webp">
</div>
</div>
<div class="poster-box">
<p>2</p>
<div>
<img src="/images/wish.jpg">
</div>
</div>
<div class="poster-box">
<p>3</p>
<div>
<img src="/images/해리포터.webp">
</div>
</div>
<div class="poster-box">
<p>4</p>
<div>
<img src="/images/wish.jpg">
</div>
</div>
<div class="poster-box">
<p>5</p>
<div>
<img src="/images/해리포터.webp">
</div>
</div>
</section>
</section>
<section class="contents-box">
<h2>지금 뜨는 콘텐츠</h2>
<section class="poster-box-2">
<div>
<img src="/images/해리포터.webp">
</div>
<div>
<img src="/images/wish.jpg">
</div>
<div>
<img src="/images/해리포터.webp">
</div>
<div>
<img src="/images/wish.jpg">
</div>
</section>
</section>
</main>
</div>
</body>
</html>
CSS
* {
color: white;
box-sizing: border-box;
margin: 0;
padding: 0;
/* border: 1px solid white; */
}
.container {
background-color: black;
height: 100%;
/* body태그의 100% */
}
#logo{
width: 50px;
}
nav {
height: 60px;
display: flex;
/* border-bottom: 1px solid red; */
}
nav > ul {
display: flex;
list-style: none;
flex-basis: 75%;
}
nav>ul>li {
text-align: center;
line-height: 60px;
margin: 0 10px;
}
.icon-box {
display: flex;
flex-basis: 20%;
justify-content: space-around;
align-items: center;
}
nav > a:first-child {
flex-basis: 5%;
display: flex;
justify-content: center;
align-items: center;
}
.banner {
background-image: url(/images/netflix-banner.jpg);
width: 100vw;
height: 800px;
background-repeat: no-repeat;
display: flex;
align-items: flex-end;
/* 이미지가 반복되는 것을 막음 */
}
/* background에 이미지를 넣으면
글씨를 적었을 경우 background위에 올라간다 */
.title-box {
height: 400px;
display: flex;
flex-direction: column;
padding: 50px;
}
.title-box >h1 {
font-size: 50px;
}
.title-box > p {
font-size: 20px;
margin-top: 20px;
}
.title-box-btn {
margin-top: 50px;
}
.title-box-btn > button {
color : black;
padding: 10px 50px;
margin-right: 10px;
border: none;
border-radius: 5px;
font-size: 15px;
font-weight: bold;
cursor: pointer;
}
.title-box-btn > button:last-child{
background-color: rgba(255, 255, 255, 0.3);
color: white;
}
.contents-box {
/* border: 1px solid red; */
display: flex;
flex-direction: column;
}
.contents-box img {
width: 200px;
}
.contents-box p {
font-size: 150px;
font-weight: bold;
-webkit-text-stroke :5px white;
color: black;
position: absolute;
bottom: 0;
left: -50px;
}
.contents-box >section {
display: flex;
}
.contents-box > h2 {
padding: 20px 50px;
}
.poster-box {
position: relative;
/* border: 1px solid red; */
margin: 0 50px;
}
.poster-box-2 {
padding: 0 50px;
}
.poster-box-2 > div {
margin-right: 50px;
}
