[HTML&CSS] CGV 영화 순위 목록 만들기😈

HTML&CSS를 활용하여 CGV 영화 순위 목록 만들기

⭐️ float를 사용하지 않아도, align-items과 position을 사용하여 간단하게 배치할 수 있다.

<만들고자 하는 디자인>

https://www.cgv.co.kr/

영화 그 이상의 감동. CGV

www.cgv.co.kr

<완성본✌️>

~~예매 정보가 바꼈군..~~

<설명>

영화 포스터 모서리 둥글게하기(이미지 모서리 둥글게 넣기)

영화 포스터 위에 시청 연령 이미지 (이미지 위에 이미지 넣기)

영화 포스터 위에 영화 순위(이미지 위에 글씨 넣기)

<div class="box">
	<img src="movie1.jpg" style="border-radius: 20px;"> <!-- 영화 포스터 이미지 -->
		<div class="age"> <!-- 이용 연령 제한 이미지 -->
			<img src="all.png" style="width: 30px; height: 30px">
		</div>
		<div class="rank"> <!-- 영화 순위 텍스트 -->
			<i>1</i> <!--  이텔릭체 -->
		</div>
		<p>공조2-인터내셔날</p> <!-- 영화 제목 -->
		<p style="color: gray; font-size: 19px;">
			<img src="grade.png"
				style="width: 30px; height: 28px; position: relative; 
                top: 5px; left: 3%; margin-right: 2px">
				95% | 예매율 38.5%
		</p>  <!-- 영화 예매, 평점 정보 -->
</div>

전체 코드

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel="icon" href="data:;base64,iVBORw0KGgo=">

<style type="text/css">
* {
	margin: 0;
	padding: 0;
}

body {
	font-family: 맑은 고딕, 굴림;
	font-size: 14px;
	background: #eee;
}

main {
	padding-top: 200px;
	min-height: 1500px;
	padding-left: 40px;
	font-size: 25px;
	display: flex;
	align-items: center;
}

main ul {
	display: flex;
	align-items: center;
}

footer {
	height: 50px;
	line-height: 50px;
	text-align: center;
}

.box {
	width: 200px;
	height: 450px;
	margin: 30px;
	align-items: center;
	align-items: center;
	position: relative;
	text-align: center;
}

img {
	width: 200px;
	height: 350px;
}

.rank {
	position: absolute;
	color: white;
	font-size: 100px;
	font-weight: 700;
	top: 59%;
	left: 5%;
	color: white;
}

.age {
	position: absolute;
	top: 2%;
	left: 80%;
}
</style>

</head>
<body>


	<main>



		<div class="box">
			<img src="movie1.jpg" style="border-radius: 20px;">
			<div class="age">
				<img src="all.png" style="width: 30px; height: 30px">

			</div>
			<div class="rank">
				<i>1</i>
			</div>
			<p>공조2-인터내셔날</p>

			<p style="color: gray; font-size: 19px;">
				<img src="grade.png"
					style="width: 30px; height: 28px; position: relative; top: 5px; left: 3%; margin-right: 2px">
				95% | 예매율 38.5%
			</p>
		</div>
		<div class="box">
			<img src="movie2.jpg" style="border-radius: 20px;">
			<div class="age">
				<img src="all.png" style="width: 30px; height: 30px">

			</div>
			<div class="rank">
				<i>2</i>
			</div>
			<p>늑대사냥</p>
			<p style="color: gray; font-size: 20px;">
				<img src="grade.png"
					style="width: 30px; height: 28px; position: relative; top: 5px; left: 3%; margin-right: 2px">
				99% | 예매율 11.1%
			</p>
		</div>
		<div class="box">

			<img src="movie3.jpg" style="border-radius: 20px;">
			<div class="age">
				<img src="all.png" style="width: 30px; height: 30px">

			</div>
			<div class="rank">
				<i>3</i>
			</div>
			<p>알라딘</p>
			<p style="color: gray; font-size: 20px;">
				<img src="grade.png"
					style="width: 30px; height: 28px; position: relative; top: 5px; left: 3%; margin-right: 2px">98%
				| 예매율 6.5%
			</p>
		</div>
		<div class="box">
			<img src="movie4.jpg" style="border-radius: 20px;">
			<div class="age">
				<img src="all.png" style="width: 30px; height: 30px">

			</div>
			<div class="rank">
				<i>4</i>
			</div>
			<p>탑건-매버릭</p>
			<p style="color: gray; font-size: 20px;">
				<img src="grade.png"
					style="width: 30px; height: 28px; position: relative; top: 5px; left: 3%; margin-right: 2px">99%
				| 예매율 5.8%
			</p>
		</div>
		<div class="box">
			<img src="movie5.jpg" style="border-radius: 20px;">
			<div class="age">
				<img src="all.png" style="width: 30px; height: 30px">

			</div>
			<div class="rank">
				<i>5</i>
			</div>
			<p>시맨틱</p>
			<p style="color: gray; font-size: 20px;">
				<img src="grade.png"
					style="width: 30px; height: 28px; position: relative; top: 5px; left: 3%; margin-right: 2px">96%
				| 예매율 4.5%
			</p>
		</div>
	</main>


</body>
</html>

'💻Programming > 🎨 실습' 카테고리의 다른 글

[HTML&CSS] Grid - CGV 영화 이벤트 정보 만들기😈 (0)	2022.09.15
[HTML] 04. 테이블 태그 실습 (0)	2022.09.13
[HTML&CSS] 테이블 태그 실습 - 이력서 만들기!😈 (0)	2022.09.10