🌟 영화제작사이트 만들기
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>THISISMOVIE</title>
<script src="index.js"></script>
<script src="https://unpkg.com/boxicons@2.1.4/dist/boxicons.js"></script>
<link rel="stylesheet" href="common.css">
<link rel="stylesheet" href="index.css">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link
href="https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;0,600;0,700;1,300;1,400;1,500;1,600;1,700&family=Playwrite+BE+VLG:wght@100..400&family=Rajdhani:wght@300;400;500;600;700&display=swap"
rel="stylesheet">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Noto+Serif+KR:wght@200..900&display=swap" rel="stylesheet">
</head>
<body>
<header>
<h1>THISISMOVIE</h1>
</header>
<section>
<div class="container1">
<p class="containerP-1">Mo<span>vie</span></p>
<p class="containerP-2">Ma<span>ke</span></p>
<p class="containerP-3">Dr<span>eam</span></p>
<p class="comment"><span>Whatever you want</span><br /> <span>wherever you want</span><br /> it is all here
</p>
<box-icon type='solid' name='down-arrow' color="cornsilk" size="3rem"></box-icon>
</div>
<div class="section2">
<form class="search">
<input type="text" id="searchInput" placeholder="Search Movie">
<button id="searchButton"><img src="./img/search.png" alt="search"></button>
</form>
<div id="movie-container">
<!-- <div class="card-img>
<img src="https://image.tmdb.org/t/p/w500${movie.poster_path}" alt="${movie.title}">
</div>
<div class="card-content">
<h3>${movie.title}</h3>
<p>${movie.overview}</p>
<p>Rating: ${movie.vote_average}</p>
</div>` -->
</div>
</div>
</section>
</body>
</html>// Database연결
const API_KEY = "fbf16579bff5b8c3f6664841d9dd0613";
const URL = `https://api.themoviedb.org/3/movie/popular?api_key=${API_KEY}&language=en-US&page=1`;
fetch(URL)
.then((response) => response.json())
.then((response) => console.log(response))
.catch((err) => console.error(err));
// 영화카드
// 자바스크립트로 카드 생성
function createMovieCards(movie) {
const card = document.createElement("div");
card.className = "movie-card";
card.innerHTML = `<div class = "card-img">
<img src="https://image.tmdb.org/t/p/w500${movie.poster_path}" alt="${movie.title}"></div>
<h3>${movie.title}</h3>
<p>${movie.overview}</p>
<p>Rating: ${movie.vote_average}</p>`;
card.addEventListener("click", () => alert(`movie ID : ${movie.id}`));
return card;
}
// DOM에 추가
fetch(URL)
.then((response) => response.json())
.then((data) => {
const movie = data.results;
const movieContainer = document.getElementById("movie-container");
movie.forEach((movie) => {
const card = createMovieCards(movie);
movieContainer.appendChild(card);
});
})
.catch((error) => console.error("Error:"));
// 검색버튼 클릭시 영화 검색 (+초성으로 검색가능)
function searchMovies() {
const searchInput = document
.getElementById("searchInput")
.value.trim()
.toLowerCase();
const movieCards = document.querySelectorAll(".movie-card");
const title = document.querySelector;
}
@font-face {
font-family: "main";
src: url(/assets/font/sugarmagicpersonaluseonly-jemyo.otf);
}
body {
background-color: rgb(5, 5, 5);
overflow-x: hidden;
overflow-y: auto;
}
header {
width: 100%;
padding-top: 10px;
}
header h1 {
text-align: center;
font-size: 1.2rem;
font-weight: 500;
color: white;
}
section {
width: 100%;
margin: 0 auto;
}
.search {
display: flex;
margin-top: 15px;
}
.search input {
width: 200px;
border: none;
text-align: center;
background-color: rgb(255, 250, 235);
}
.search input::placeholder {
color: rgb(20, 19, 19);
font-weight: 600;
font-family: "Noto Serif KR", serif;
font-optical-sizing: auto;
font-weight: 300;
font-style: normal;
}
#searchButton {
width: 20px;
height: 20px;
border: none;
cursor: grab;
}
.search img {
width: 100%;
height: 100%;
}
.section2 {
width: 100%;
display: flex;
flex-direction: column;
align-items: center;
}
.container1 {
width: 100%;
margin: 0 auto;
display: flex;
flex-direction: column;
align-items: center;
}
.containerP-1,
.containerP-2,
.containerP-3,
.comment,
header h1 {
font-family: "main";
font-weight: 100;
}
.containerP-3 {
font-size: 8rem;
font-weight: 900;
color: rgb(142, 226, 208);
}
.containerP-3 span {
color: rgb(255, 230, 160);
}
.containerP-2 {
font-size: 17rem;
font-weight: 900;
color: rgb(160, 177, 255);
margin-top: 8rem;
margin-bottom: 1rem;
line-height: 9rem;
}
.containerP-2 span {
color: rgb(212, 192, 255);
}
.containerP-1 {
font-size: 24rem;
font-weight: 900;
color: pink;
margin-top: 11rem;
line-height: 6rem;
}
.containerP-1 span {
color: rgb(255, 141, 232);
}
.comment {
font-size: 0.8rem;
text-align: center;
margin: 0 auto;
color: white;
line-height: 1.3rem;
margin-bottom: 3.4rem;
color: cornsilk;
}
.comment span:nth-child(1) {
font-size: 2rem;
}
.comment span:nth-child(3) {
font-size: 1.2rem;
line-height: 2rem;
}
.comment span:nth-child(5) {
font-size: 0.8rem;
}
#movie-container {
width: 100%;
padding: 20px;
display: flex;
justify-content: center;
align-items: center;
flex-wrap: wrap;
gap: 70px;
}
.movie-card {
width: 250px;
height: 400px;
display: flex;
flex-direction: column;
overflow: scroll;
border-radius: 4px;
border-bottom: 1px solid rgb(255, 250, 235);
}
.movie-card::-webkit-scrollbar {
display: none;
}
.card-img {
width: 100%;
height: 300px;
}
.card-img img {
width: 100%;
height: 100%;
object-fit: fill;
}
.movie-card h3 {
width: 100%;
border-top: 1px solid rgb(255, 250, 235);
border-bottom: 1px solid rgb(255, 250, 235);
padding: 5px;
font-size: 20px;
font-weight: 500;
padding-bottom: 10px;
margin-bottom: 3px;
color: rgb(255, 250, 235);
}
.movie-card p {
color: rgb(255, 250, 235);
}
so