전체 코드 | Notion

index.html

<!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>

style.css

#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;
}

src/style/reset.css

meyerweb.com

/* <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;
}