File size: 1,760 Bytes
ff8de4a 3cb9f76 ff8de4a 90696e8 ee74111 90696e8 c868774 ff8de4a 90696e8 c868774 90696e8 3cb9f76 90696e8 3cb9f76 90696e8 3cb9f76 90696e8 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: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>
|