<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<title>넷플릭스 - 따라만들기</title>
<style>
@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@100;300;400;500;700;900&display=swap");
* {
font-family: "Noto Sans KR", sans-serif;
color: white;
}
body,
h1,
h2,
h3,
p,
a {
font-weight: normal;
margin: 0;
padding: 0;
text-decoration: none;
}
.gnb {
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
}
.gnb > a {
margin: 0px 40px;
color: white;
}
.gnb > a:last-child {
margin-right: auto;
}
body {
background-color: black;
}
.today {
background-image: url("https://image.tmdb.org/t/p/w500/p1F51Lvj3sMopG948F5HsBbl43C.jpg");
background-size: cover;
background-position: center;
height: 300px;
color: white;
display: flex;
}
.today > h1 {
font-size: 20px;
font-weight: 700;
margin: 10px 20px;
}
.top > img {
margin: 2px;
}
.recommend > img {
margin: 2px;
}
.top > img:hover {
scale: 1.1;
}
.recommend > img:hover {
scale: 1.1;
}
.main > p {
margin: 10px;
font-size: 22px;
}
</style>
<script>
$(document).ready(function () {
movie();
});
function movie() {
let base_url = "https://image.tmdb.org/t/p/w500";
let url =
"https://api.themoviedb.org/3/movie/popular?api_key=127d1ec8dfd28bfe9f6b8d15f689cdd4&language=ko-KR&page=1";
$("#top_movie").empty();
$("#recommend_movie").empty();
fetch(url)
.then((res) => res.json())
.then((data) => {
let movies = data["results"];
for (a of movies) {
let movie_image = base_url + a["poster_path"];
let temp_html = `<img
width="200"
src="${movie_image}"
/>`;
$("#top_movie").append(temp_html);
}
for (b of movies) {
let movie_image = base_url + b["poster_path"];
let temp_html = `<img
width="200"
src="${movie_image}"
/>`;
b["vote_average"] > 7
? $("#recommend_movie").append(temp_html)
: null;
}
});
}
</script>
</head>
<body>
<div class="gnb">
<img
width="130"
src="https://upload.wikimedia.org/wikipedia/commons/thumb/7/7a/Logonetflix.png/1200px-Logonetflix.png"
/>
<a href="#">홈</a>
<a href="#">TV프로그램</a>
<a href="#">영화</a>
<a href="#">내가 찜한 콘텐츠</a>
</div>
<div class="main">
<p>오늘의 영화</p>
<div id="today_movie" class="today">
<h1>토르: 러브 앤 썬더</h1>
</div>
<p>오늘 한국의 Top 10 영화</p>
<div class="top" id="top_movie">
<img
width="200"
src="https://image.tmdb.org/t/p/w500/bZLrpWM065h5bu1msUcPmLFsHBe.jpg"
/>
<img
width="200"
src="https://image.tmdb.org/t/p/w500/bZLrpWM065h5bu1msUcPmLFsHBe.jpg"
/>
<img
width="200"
src="https://image.tmdb.org/t/p/w500/bZLrpWM065h5bu1msUcPmLFsHBe.jpg"
/>
<img
width="200"
src="https://image.tmdb.org/t/p/w500/bZLrpWM065h5bu1msUcPmLFsHBe.jpg"
/>
</div>
<p>오늘 한국의 추천 영화</p>
<div class="recommend" id="recommend_movie">
<img
width="200"
src="https://image.tmdb.org/t/p/w500/bZLrpWM065h5bu1msUcPmLFsHBe.jpg"
/>
<img
width="200"
src="https://image.tmdb.org/t/p/w500/bZLrpWM065h5bu1msUcPmLFsHBe.jpg"
/>
<img
width="200"
src="https://image.tmdb.org/t/p/w500/bZLrpWM065h5bu1msUcPmLFsHBe.jpg"
/>
<img
width="200"
src="https://image.tmdb.org/t/p/w500/bZLrpWM065h5bu1msUcPmLFsHBe.jpg"
/>
<img
width="200"
src="https://image.tmdb.org/t/p/w500/bZLrpWM065h5bu1msUcPmLFsHBe.jpg"
/>
<img
width="200"
src="https://image.tmdb.org/t/p/w500/bZLrpWM065h5bu1msUcPmLFsHBe.jpg"
/>
</div>
</div>
</body>
</html>갑시다 갑시다
어려웠던점
또 모르고 글씨를 지워서 한참 시간낭비 (삼항의 null부분)
유심히 보자.
