[HTML&CSS] Grid - CGV 영화 이벤트 정보 만들기😈

HTML&CSS를 활용하여 CGV 영화 이벤트 정보 만들기

⭐️ Grid를 사용하면 간단한 방법으로

동일한 형태를 정렬하여 배치할 수 있다.

<만들고자 하는 디자인>

http://www.cgv.co.kr/culture-event/event/defaultNew.aspx#1

영화 그 이상의 감동. CGV

www.cgv.co.kr

<완성본✌️>

전체 코드

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
* {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
}

body {
	background: #eee;
	font-size: 14px;
	font-family: "Malgun Gothic", "맑은 고딕", NanumGothic, 나눔고딕, 돋움, sans-serif;
}

main {
	margin: 30px auto;
	width: 980px;
	min-height: 500px;
}


.container {
	width: 600px;
	height: 600px;
	margin: 50px;
	border-radius: 10px;
	display: grid;
	/* 행렬의 크기를 명시적으로 설정 */
	grid-template-rows: repeat(3, 300px);
	grid-template-columns: repeat(3, 300px);
	grid-gap: 10px;
}

.item {
	font-weight: 900;
	font-size: 25px;
	border: 1px solid #333;
	border-radius: 3px;
	
	display: flex;
	align-items: center;
	justify-content: center;
}

img {
	width: 100%;
	height: 200px;
	vertical-align: bottom;
}

.sub {
	width: 300px;
	height: 100px;
	background: #fff;
	border: gray;
	font-weight: 450;
	font-size: 22px;
}

.date {
	color: gray;
	font-size: 17px;
	text-align: left;
	margin-top: 20px;
	margin-left: 20px;
}

.grid {
	border: 1px solid gray;

}

/* 숫자가 적을 수록 앞에 배치
 숫자를 주지 않은 것은 0이라고 생각하면 됨 */
</style>

</head>
<body>

	<div class="container">
		<div class="item">
			<div class="grid">
				<img src="event1.jpg">
				<div class="sub">
					<p style="margin-left: 8px;">CGV 특별관, 특별한 재개봉</p>
					<div class="date">
						<p>2022.09.01~2022.09.03</p>
					</div>
				</div>

			</div>
		</div>
		<div class="item">
			<div class="grid">
				<img src="event2.jpg">
				<div class="sub">
					<p style="margin-left: 8px;">개봉작 사용 설명서</p>

				</div>

			</div>
		</div>
		<div class="item">
			<div class="grid">
				<img src="event3.jpg">
				<div class="sub">
					<p style="margin-left: 8px;">[공조2: 인터내셔날] 무비 스펙트럼트 카드</p>
					<div class="date">
						<p>2022.09.01~2022.09.03</p>
					</div>
				</div>

			</div>
		</div>
		<div class="item">
			<div class="grid">
				<img src="event4.jpg">
				<div class="sub">
					<p style="margin-left: 8px;">VIP가 쏘는 영화 쿠폰백</p>
					<div class="date">
						<p>2022.09.01~2022.09.03</p>
					</div>
				</div>

			</div>
		</div>
		<div class="item">
			<div class="grid">
				<img src="event5.jpg">
				<div class="sub">
					<p style="margin-left: 8px;">[늑대사냥] 필름마크</p>
					<div class="date">
						<p>2022.09.01~2022.09.03</p>
					</div>
				</div>

			</div>
		</div>
		<div class="item">
			<div class="grid">
				<img src="event6.png">
				<div class="sub">
					<p style="margin-left: 8px;">[아바타] 필름마크</p>
					<div class="date">
						<p>2022.09.01~2022.09.03</p>
					</div>
				</div>

			</div>
		</div>

		<div class="item">
			<div class="grid">
				<img src="event7.jpg">
				<div class="sub">
					<p style="margin-left: 8px;">[귀멸의 칼날: 장구저택]</p>
					<div class="date">
						<p>2022.09.01~2022.09.03</p>
					</div>
				</div>

			</div>
		</div>
		<div class="item">
			<div class="grid">
				<img src="event8.jpg">
				<div class="sub">
					<p style="margin-left: 8px;">[탑건] 한정판 포스터</p>
					<div class="date">
						<p>2022.09.01~2022.09.03</p>
					</div>
				</div>

			</div>
		</div>
		<div class="item">
			<div class="grid">
				<img src="event9.jpg">
				<div class="sub">
					<p style="margin-left: 8px;">[공조2] 필름마크</p>
					<div class="date">
						<p>2022.09.01~2022.09.03</p>
					</div>
				</div>

			</div>
		</div>
	</div>

</body>
</html>

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

[HTML&CSS] CGV 영화 순위 목록 만들기😈 (0)	2022.09.15
[HTML] 04. 테이블 태그 실습 (0)	2022.09.13
[HTML&CSS] 테이블 태그 실습 - 이력서 만들기!😈 (0)	2022.09.10

HTML&CSS를 활용하여 CGV 영화 이벤트 정보 만들기

<만들고자 하는 디자인>

<완성본✌️>

전체 코드

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

티스토리툴바