이번주의 목표.
1화차 완주
달성
개인과제
<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">
<title>Document</title>
<style>
* {
font-family: 'Black Han Sans', sans-serif;
font-family: 'Gugi', cursive;
}
.title {
height: 400px;
background-image: linear-gradient(0deg, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('http://www.pmuseums.org/data/file/brd_meminfo/thumb-2038518332_P0zojEsy_9fb51e73fc60f70e5a9bd7e22ca937d2d469eeff_600x264.jpg');
background-position: center;
background-size: cover;
color: white;
display: flex;
align-items: center;
justify-content: center;
}
form {
text-align: center;
padding: 20px 0;
border-bottom: 1px solid black;
}
.mycards {
box-shadow: 0 3px 6px rgba(0, 0, 0, 0.12), 0 3px 6px rgba(0, 0, 0, 0.24);
margin: 20px;
padding: 20px;
width: 300px;
background-color: bisque;
border-radius: 10px;
cursor: pointer;
user-select: none;
}
.card-list {
display: grid;
grid-template-columns: repeat(3, 1fr);
justify-content: center;
}
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
.movie-card {
box-shadow: 0 3px 6px rgba(0, 0, 0, 0.12), 0 3px 6px rgba(0, 0, 0, 0.24);
margin: 20px;
padding: 20px;
width: 350px;
justify-self: center;
background-color: bisque;
border-radius: 10px;
cursor: pointer;
user-select: none;
}
.card-list img {
width: 100%;
height: auto;
border-radius: 10px;
}
</style>
</head>
<body>
<div class='title'>
<h1>최고 평점 영화 컬렉션</h1>
</div>
<form class="search" onsubmit="handleSearch(event)">
<label>영화 검색 :</label>
<input type="text" id="search-input" placeholder="영화 제목을 검색해 보세요">
<button type="submit" id="search-btn">검색</button>
</form>
</form>
<section class="card-list">
<div class="movie-card" id="238">
<h3>The Godfather</h3>
<p>Spanning the years 1945 to 1955, a chronicle of the fictional Italian-American Corleone crime family.
When organized crime family patriarch, Vito Corleone barely survives an attempt on his life, his
youngest son, Michael steps in to take care of the would-be killers, launching a campaign of bloody
revenge.</p>
<p>Rating: 8.7</p>
</div>
<div class="movie-card" id="278">
<img src="https://image.tmdb.org/t/p/w500/q6y0Go1tsGEsmtFryDOJo3dEmqu.jpg" alt="The Shawshank Redemption">
<h3>The Shawshank Redemption</h3>
<p>Framed in the 1940s for the double murder of his wife and her lover, upstanding banker Andy Dufresne
begins a new life at the Shawshank prison, where he puts his accounting skills to work for an amoral
warden. During his long stretch in prison, Dufresne comes to be admired by the other inmates --
including an older prisoner named Red -- for his integrity and unquenchable sense of hope.</p>
<p>Rating: 8.7</p>
</div>
<div class="movie-card" id="240">
<img src="https://image.tmdb.org/t/p/w500/hek3koDUyRQk7FIhPXsa6mT2Zc3.jpg" alt="The Godfather Part II">
<h3>The Godfather Part II</h3>
<p>In the continuing saga of the Corleone crime family, a young Vito Corleone grows up in Sicily and in
1910s New York. In the 1950s, Michael Corleone attempts to expand the family business into Las Vegas,
Hollywood and Cuba.</p>
<p>Rating: 8.6</p>
</div>
<div class="movie-card" id="19404">
alt="Dilwale Dulhania Le Jayenge">
<h3>Dilwale Dulhania Le Jayenge</h3>
<p>Raj is a rich, carefree, happy-go-lucky second generation NRI. Simran is the daughter of Chaudhary Baldev
Singh, who in spite of being an NRI is very strict about adherence to Indian values. Simran has left for
India to be married to her childhood fiancé. Raj leaves for India with a mission at his hands, to claim
his lady love under the noses of her whole family. Thus begins a saga.</p>
<p>Rating: 8.6</p>
</div>
<div class="movie-card" id="424">
<h3>Schindler's List</h3>
<p>The true story of how businessman Oskar Schindler saved over a thousand Jewish lives from the Nazis while
they worked as slaves in his factory during World War II.</p>
<p>Rating: 8.6</p>
</div>
<div class="movie-card" id="772071">
<h3>Cuando Sea Joven</h3>
<p>70-year-old Malena gets a second chance at life when she magically turns into her 22-year-old self. Now,
posing as "Maria" to hide her true identity, she becomes the lead singer of her grandson's band and
tries to recover her dream of singing, which she had to give up at some point.</p>
<p>Rating: 8.6</p>
</div>
<div class="movie-card" id="129">
<h3>Spirited Away</h3>
<p>A young girl, Chihiro, becomes trapped in a strange new world of spirits. When her parents undergo a
mysterious transformation, she must call upon the courage she never knew she had to free her family.</p>
<p>Rating: 8.5</p>
</div>
<div class="movie-card" id="389">
<h3>12 Angry Men</h3>
<p>The defense and the prosecution have rested and the jury is filing into the jury room to decide if a
young Spanish-American is guilty or innocent of murdering his father. What begins as an open and shut
case soon becomes a mini-drama of each of the jurors' prejudices and preconceptions about the trial, the
accused, and each other.</p>
<p>Rating: 8.5</p>
</div>
<div class="movie-card" id="372058">
<h3>Your Name.</h3>
<p>High schoolers Mitsuha and Taki are complete strangers living separate lives. But one night, they
suddenly switch places. Mitsuha wakes up in Taki’s body, and he in hers. This bizarre occurrence
continues to happen randomly, and the two must adjust their lives around each other.</p>
<p>Rating: 8.5</p>
</div>
<div class="movie-card" id="496243">
<h3>Parasite</h3>
<p>All unemployed, Ki-taek's family takes peculiar interest in the wealthy and glamorous Parks for their
livelihood until they get entangled in an unexpected incident.</p>
<p>Rating: 8.5</p>
</div>
<div class="movie-card" id="155">
<h3>The Dark Knight</h3>
<p>Batman raises the stakes in his war on crime. With the help of Lt. Jim Gordon and District Attorney
Harvey Dent, Batman sets out to dismantle the remaining criminal organizations that plague the streets.
The partnership proves to be effective, but they soon find themselves prey to a reign of chaos unleashed
by a rising criminal mastermind known to the terrified citizens of Gotham as the Joker.</p>
<p>Rating: 8.5</p>
</div>
<div class="movie-card" id="497">
<h3>The Green Mile</h3>
<p>A supernatural tale set on death row in a Southern prison, where gentle giant John Coffey possesses the
mysterious power to heal people's ailments. When the cell block's head guard, Paul Edgecomb, recognizes
Coffey's miraculous gift, he tries desperately to help stave off the condemned man's execution.</p>
<p>Rating: 8.5</p>
</div>
<div class="movie-card" id="680">
<h3>Pulp Fiction</h3>
<p>A burger-loving hit man, his philosophical partner, a drug-addled gangster's moll and a washed-up boxer
converge in this sprawling, comedic crime caper. Their adventures unfurl in three stories that
ingeniously trip back and forth in time.</p>
<p>Rating: 8.5</p>
</div>
<div class="movie-card" id="429">
alt="The Good, the Bad and the Ugly">
<h3>The Good, the Bad and the Ugly</h3>
<p>While the Civil War rages on between the Union and the Confederacy, three men – a quiet loner, a ruthless
hitman, and a Mexican bandit – comb the American Southwest in search of a strongbox containing $200,000
in stolen gold.</p>
<p>Rating: 8.5</p>
</div>
<div class="movie-card" id="13">
<h3>Forrest Gump</h3>
<p>A man with a low IQ has accomplished great things in his life and been present during significant
historic events—in each case, far exceeding what anyone imagined he could do. But despite all he has
achieved, his one true love eludes him.</p>
<p>Rating: 8.5</p>
</div>
<div class="movie-card" id="122">
alt="The Lord of the Rings: The Return of the King">
<h3>The Lord of the Rings: The Return of the King</h3>
<p>Aragorn is revealed as the heir to the ancient kings as he, Gandalf and the other members of the broken
fellowship struggle to save Gondor from Sauron's forces. Meanwhile, Frodo and Sam take the ring closer
to the heart of Mordor, the dark lord's realm.</p>
<p>Rating: 8.5</p>
</div>
<div class="movie-card" id="995133">
alt="The Boy, the Mole, the Fox and the Horse">
<h3>The Boy, the Mole, the Fox and the Horse</h3>
<p>The unlikely friendship of a boy, a mole, a fox and a horse traveling together in the boy’s search for
home.</p>
<p>Rating: 8.5</p>
</div>
<div class="movie-card" id="769">
<h3>GoodFellas</h3>
<p>The true story of Henry Hill, a half-Irish, half-Sicilian Brooklyn kid who is adopted by neighbourhood
gangsters at an early age and climbs the ranks of a Mafia family under the guidance of Jimmy Conway.</p>
<p>Rating: 8.5</p>
</div>
<div class="movie-card" id="372754">
<img src="https://image.tmdb.org/t/p/w500/cIfRCA5wEvj9tApca4UDUagQEiM.jpg" alt="Dou kyu sei – Classmates">
<h3>Dou kyu sei – Classmates</h3>
<p>Rihito Sajo, an honor student with a perfect score on the entrance exam and Hikaru Kusakabe, in a band
and popular among girls, would have never crossed paths. Until one day they started talking at the
practice for their school’s upcoming chorus festival. After school, the two meet regularly, as Hikaru
helps Rihito to improve his singing skills. While they listen to each other’s voice and harmonize, their
hearts start to beat together.</p>
<p>Rating: 8.5</p>
</div>
<div class="movie-card" id="704264">
<img src="https://image.tmdb.org/t/p/w500/9NBBkdxH0TjQEBSN2AzeE1sgsF9.jpg" alt="Primal: Tales of Savagery">
<h3>Primal: Tales of Savagery</h3>
<p>Genndy Tartakovsky's Primal: Tales of Savagery features a caveman and a dinosaur on the brink of
extinction. Bonded by tragedy, this unlikely friendship becomes the only hope of survival.</p>
<p>Rating: 8.5</p>
</div>
</section>
</html>