File size: 1,717 Bytes
ff8de4a 3cb9f76 ff8de4a c868774 ee74111 7907c83 c868774 3cb9f76 ff8de4a 7907c83 7e596f6 7907c83 ff8de4a ee74111 c868774 ee74111 c868774 ee74111 c868774 ff8de4a 7e596f6 ee74111 c868774 7e596f6 ee74111 3cb9f76 7e596f6 ee74111 3cb9f76 7e596f6 ee74111 3cb9f76 7e596f6 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;
display:flex;
justify-content:center;
align-items:center;
background:#000; /* λ°°κ²½μ(μ΅μ
) */
overflow:hidden;
}
.grid-container {
display: grid;
/* μλ νλ©΄μ κ°λ μ±μ°λ κ²μμ 70% ν¬κΈ°λ‘ μΆμ */
width: 70vw;
height: 70vh;
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>
|