Spaces:

aiqtech
/

tetete

Paused

App Files Files Community

tetete / index.html

aiqtech

Update index.html

90696e8 verified over 1 year ago

raw

history blame contribute delete

1.76 kB

	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<style>
	html, body {
	margin:0; padding:0;
	width:100vw; height:100vh;
	display:flex;
	justify-content:center; /* 가로 방향 중앙 정렬 */
	align-items:flex-start; /* 세로 방향 상단 정렬 */
	background:#000;
	overflow:hidden;
	}

	.grid-container {
	display: grid;
	width: 50vw;
	height: 50vh;
	grid-template-columns: 1fr 2fr 1fr 2fr;
	grid-template-rows: repeat(5, 1fr);
	gap: 0;
	/* 상단에 불필요한 여백 없이 바로 붙여둠 */
	}

	img, video {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	}
	</style>
	</head>
	<body>

	<div class="grid-container">
	<!-- 1행: 1번, 2번 -->
	<img src="1.webp" alt="1">
	<video src="1.mp4" autoplay loop muted></video>
	<img src="2.webp" alt="2">
	<video src="2.mp4" autoplay loop muted></video>

	<!-- 2행: 3번, 4번 -->
	<img src="3.webp" alt="3">
	<video src="3.mp4" autoplay loop muted></video>
	<img src="4.webp" alt="4">
	<video src="4.mp4" autoplay loop muted></video>

	<!-- 3행: 5번, 6번 -->
	<img src="5.webp" alt="5">
	<video src="5.mp4" autoplay loop muted></video>
	<img src="6.webp" alt="6">
	<video src="6.mp4" autoplay loop muted></video>

	<!-- 4행: 7번, 8번 -->
	<img src="7.webp" alt="7">
	<video src="7.mp4" autoplay loop muted></video>
	<img src="8.webp" alt="8">
	<video src="8.mp4" autoplay loop muted></video>

	<!-- 5행: 9번, 10번 -->
	<img src="9.webp" alt="9">
	<video src="9.mp4" autoplay loop muted></video>
	<img src="10.webp" alt="10">
	<video src="10.mp4" autoplay loop muted></video>
	</div>

	</body>
	</html>