Spaces:

aiqtech
/

tetete

Running

App Files Files Community

tetete / index.html

aiqtech

Update index.html

3cb9f76 verified 9 months ago

raw

history blame

1.81 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;
	overflow:hidden; /* 필요시 스크롤 제거 */
	}

	.grid-container {
	display: grid;
	width: 100%;
	height: 100%;
	/* 4열: 이미지(1fr), 영상(2fr), 이미지(1fr), 영상(2fr) -> 총합 6fr 비율 유지 */
	grid-template-columns: 1fr 2fr 1fr 2fr;
	grid-template-rows: repeat(5, 1fr); /* 5행 */
	gap: 5px;
	box-sizing: border-box;
	padding: 5px;
	}

	img, video {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	}

	/* video autoplay, loop, muted 속성 HTML 태그에서 설정 */
	</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>