File size: 1,760 Bytes
ff8de4a 3cb9f76 ff8de4a c868774 ee74111 7907c83 bc34f8f 7907c83 c868774 3cb9f76 ff8de4a c64d8c1 7e596f6 7907c83 bc34f8f 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: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>
|