File size: 1,620 Bytes
ff8de4a c868774 ee74111 c868774 ee74111 ff8de4a ee74111 c868774 ee74111 ff8de4a ee74111 c868774 ee74111 c868774 ee74111 c868774 ee74111 ff8de4a ee74111 c868774 ee74111 ff8de4a 588660f |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 |
<!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;
}
.grid-container {
display: grid;
grid-template-columns: repeat(4, 1fr); /* 4์ด */
grid-template-rows: repeat(5, 1fr); /* 5ํ */
gap: 10px;
box-sizing: border-box;
padding: 10px;
width:100%;
height:100%;
}
img, video {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
video {
/* video ํ๊ทธ์์๋ autoplay, loop, muted๋ฅผ ์์ฑ์ผ๋ก ์ง์ */
}
</style>
</head>
<body>
<div class="grid-container">
<!-- 1ํ -->
<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ํ -->
<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ํ -->
<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ํ -->
<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ํ -->
<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>
|