✅ gnb 구역 / main 구역 만들기
진행 PLAN
1. 구역 계획하기 ⇒ 2. HTML 쓰기 ⇒ 3. CSS 설정 하기 ⇒ 4. fetch 적용 하기 + 호버 효과
<!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;
}
body,h1,h2,h3,p,a {
font-weight: normal;
margin: 0;
padding: 0;
text-decoration: none;
}
body {
background-color: black;
}
.gnb {
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
padding: 20px;
}
.gnb > a {
margin: 0px 40px;
color: white;
}
.gnb > a:hover {
color: red;
}
.gnb > a:last-child {
margin-right: auto;
}
.main {
color: white;
padding: 20px;
}
.main > p {
margin-top: 40px;
margin-bottom: 10px;
font-size: 20px;
}
.today {
background-image: url('https://image.tmdb.org/t/p/w500/9PqD3wSIjntyJDBzMNuxuKHwpUD.jpg');
background-position: center;
background-size: cover;
height: 250px;
padding: 50px;
font-size: 32px;
}
.top > img {
margin: 2px;
}
.top > img:hover {
width: 250px;
margin: 10px;
}
.recommend > img {
margin: 2px;
}
.recommend > img:hover {
width: 250px;
margin: 10px;
}
</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'
fetch(url).then(res => res.json()).then((data) => {
let movies = data['results']
///오늘의 영화
let rand = Math.floor(Math.random() * 10)
let today_movie = movies[rand]
let todat_img = base_url+today_movie['backdrop_path']
let today_title = today_movie['title']
$('#today').css('background-image', `url('${todat_img}')`)
$('#today > h1').text(today_title)
// TOP 10 영화
for (let i = 0; i < 10; i++) {
let top_movie = movies[i]
let top_img = base_url+top_movie['poster_path']
let temp_html = `<img width="200" src="${top_img}">`
$('#top').append(temp_html)
}
// 추천 영화
for (let i = 0; i < movies.length; i++) {
let recommend_movie = movies[i]
let recommend_img = base_url+recommend_movie['poster_path']
if (recommend_movie['vote_average'] > 7.5) {
let temp_html = `<img width="200" src="${recommend_img}">`
$('#recommend').append(temp_html)
}
}
});
}
</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" class="today">
<h1>토르: 러브 앤 썬더</h1>
</div>
<p>오늘 한국의 Top 10 영화</p>
<div id="top" class="top">
</div>
<p>오늘 한국의 추천 영화</p>
<div id="recommend" class="recommend">
</div>
</div>
</body>
</html>'Web_Project' 카테고리의 다른 글
| momentum_체크박스+모달창 만들기 (1) | 2023.12.05 |
|---|---|
| 구글 모멘텀 앱 만들기 (2) | 2023.12.05 |
| [Jquery + Fetch] 버튼 누르면, 다음 영화 리뷰가 나오게 하는 방법 (0) | 2023.12.02 |
| [jQuery + 자바스크립트] 이메일 로그인 하기 (1) | 2023.12.02 |
| [CSS] 부트스트랩 활용 - 쇼핑몰 만들기 (0) | 2023.12.01 |
