<!DOCTYPE html>
<html lang="ko">
<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">
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@100;300;400;500;700;900&display=swap"
rel="stylesheet">
<link rel="stylesheet" href="reset.css">
<link rel="stylesheet" href="style.css">
<title>영화 별점 평가하기</title>
</head>
<body>
<div id="app">
<div class="movie-container">
<section class="movie">
<div class="poster-container">
<img src="./images/poster_bootcamp.jpg" alt="영화 포스터" />
</div>
<div class="content">
<div class="content-type">
<span>드라마</span>
<span>전체이용가</span>
</div>
<h3 class="content-title">파이썬 부트캠프</h3>
<div class="content-favorite">
<button class="button-recommend">
<i class="icon-thumbs-up"></i>
</button>
<button class="button-heart">
<i class="icon-heart"></i>
</button>
</div>
<div class="content-star">
<em class="star-average">별점 평균 4.5</em>
<div class="star-point-container">
<div class="star-background">
<img src="./images/icon_empty_star.png" data-point="1" title="별로에요.."
alt="1" />
<img src="./images/icon_empty_star.png" data-point="2" title="그저 그래요"
alt="2" />
<img src="./images/icon_empty_star.png" data-point="3" title="괜찮아요"
alt="3" />
<img src="./images/icon_empty_star.png" data-point="4" title="좋아요!"
alt="4" />
<img src="./images/icon_empty_star.png" data-point="5" title="완전 강추!!"
alt="5" />
</div>
<button class="icon-remove-star">
<img src="./svg/icon_remove_star.svg" alt="별점 제거" />
</button>
</div>
</div>
</div>
</section>
</div>
</div>
</body>
</html>
#app {
overflow: scroll;
font-family: 'Noto Sans KR', sans-serif;
}
img {
width: 100%;
}
.movie-container {
display: flex;
height: 100vh;
align-items: center;
width: 673px;
margin: 0 auto;
}
.movie {
display: flex;
align-items: center;
position: relative;
margin-left: 64px;
}
.poster-container {
position: absolute;
left: -64px;
width: 281px;
height: 396px;
border-radius: 10px;
overflow: hidden;
}
.content {
width: 608px;
height: 500px;
box-sizing: border-box;
color: #fff;
background-color: #333;
border-radius: 15px;
padding: 64px 45px 68px 266px;
}
.content-type span {
color: #BDBDBD;
}
.content-type span + span::before {
content: '';
display: inline-block;
width: 1px;
height: 13px;
margin: 0px 7px -1px 3px;
background-color: #BDBDBD;
}
.content-title {
margin: 13px 0 114px 0;
font-size: 32px;
line-height: 46px;
font-weight: 700;
}
.content-favorite {
display: flex;
margin-bottom: 22px;
}
.content-favorite button {
display: flex;
justify-content: center;
align-items: center;
width: 60px;
height: 60px;
border: 2px solid #fff;
border-radius: 100%;
margin-right: 20px;
}
.button-recommend .icon-thumbs-up {
width: 23.8px;
height: 23.8px;
margin-top: -1px;
background: center / contain url(/images/icon_thumbs_up.png) no-repeat;
}
.button-recommend.on .icon-thumbs-up {
background-image: url(/images/icon_thumbs_up_fill.png);
}
.button-heart .icon-heart {
width: 22.6px;
height: 22.6px;
margin-top: 3px;
background: center / contain url(/images/icon_heart.png) no-repeat;
}
.button-heart.on .icon-heart {
background-image: url(/images/icon_heart_fill.png);
}
.star-average {
display: block;
margin-bottom: 16px;
}
.star-point-container {
display: flex;
align-items: center;
}
.star-background {
display: flex;
/* width: 250px;
height: 50px; */
}
.star-background img {
/* width: auto; */
width: 50px;
}
.icon-remove-star {
width: 22px;
height: 22px;
margin-left: 12px;
}
/* http://meyerweb.com/eric/tools/css/reset/
v2.0 | 20110126
License: none (public domain)
*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
button {
background: none;
color: inherit;
border: none;
padding: 0;
font: inherit;
cursor: pointer;
outline: inherit;
}
