Hugging Face's logo

Spaces:
aiqtech
/
tetete
Running

App Files Community
aiqtech commited on
Commit
7e596f6
Β·
verified Β·
1 Parent(s): 3cb9f76

Update index.html

Browse files
Files changed (1) hide show
  1. index.html +13 -16
index.html CHANGED
@@ -7,19 +7,18 @@
7
  html, body {
8
  margin:0; padding:0;
9
  width:100vw; height:100vh;
10
- overflow:hidden; /* ν•„μš”μ‹œ 슀크둀 제거 */
11
  }
12
 
13
  .grid-container {
14
  display: grid;
15
- width: 100%;
16
- height: 100%;
17
- /* 4μ—΄: 이미지(1fr), μ˜μƒ(2fr), 이미지(1fr), μ˜μƒ(2fr) -> 총합 6fr λΉ„μœ¨ μœ μ§€ */
18
- grid-template-columns: 1fr 2fr 1fr 2fr;
19
- grid-template-rows: repeat(5, 1fr); /* 5ν–‰ */
20
- gap: 5px;
21
- box-sizing: border-box;
22
- padding: 5px;
23
  }
24
 
25
  img, video {
@@ -28,38 +27,36 @@
28
  object-fit: cover;
29
  display: block;
30
  }
31
-
32
- /* video autoplay, loop, muted 속성 HTML νƒœκ·Έμ—μ„œ μ„€μ • */
33
  </style>
34
  </head>
35
  <body>
36
 
37
  <div class="grid-container">
38
- <!-- 1ν–‰: 1번, 2번 쌍 -->
39
  <img src="1.webp" alt="1">
40
  <video src="1.mp4" autoplay loop muted></video>
41
  <img src="2.webp" alt="2">
42
  <video src="2.mp4" autoplay loop muted></video>
43
 
44
- <!-- 2ν–‰: 3번, 4번 쌍 -->
45
  <img src="3.webp" alt="3">
46
  <video src="3.mp4" autoplay loop muted></video>
47
  <img src="4.webp" alt="4">
48
  <video src="4.mp4" autoplay loop muted></video>
49
 
50
- <!-- 3ν–‰: 5번, 6번 쌍 -->
51
  <img src="5.webp" alt="5">
52
  <video src="5.mp4" autoplay loop muted></video>
53
  <img src="6.webp" alt="6">
54
  <video src="6.mp4" autoplay loop muted></video>
55
 
56
- <!-- 4ν–‰: 7번, 8번 쌍 -->
57
  <img src="7.webp" alt="7">
58
  <video src="7.mp4" autoplay loop muted></video>
59
  <img src="8.webp" alt="8">
60
  <video src="8.mp4" autoplay loop muted></video>
61
 
62
- <!-- 5ν–‰: 9번, 10번 쌍 -->
63
  <img src="9.webp" alt="9">
64
  <video src="9.mp4" autoplay loop muted></video>
65
  <img src="10.webp" alt="10">
 
7
  html, body {
8
  margin:0; padding:0;
9
  width:100vw; height:100vh;
10
+ overflow:hidden; /* 화면에 λ”± 맞게 ν‘œμ‹œν•˜κ³  슀크둀 μ•ˆ λ‚˜μ˜€λ„λ‘ 함 */
11
  }
12
 
13
  .grid-container {
14
  display: grid;
15
+ width: 100vw;
16
+ height: 100vh;
17
+ /* κ°€λ‘œλ°©ν–₯: 이미지(1fr), μ˜μƒ(2fr), 이미지(1fr), μ˜μƒ(2fr) */
18
+ grid-template-columns: 1fr 2fr 1fr 2fr;
19
+ /* μ„Έλ‘œλ°©ν–₯: 5ν–‰ κ· λ“± λΆ„ν•  */
20
+ grid-template-rows: repeat(5, 1fr);
21
+ gap: 0; /* μ—¬λ°± 제거 */
 
22
  }
23
 
24
  img, video {
 
27
  object-fit: cover;
28
  display: block;
29
  }
 
 
30
  </style>
31
  </head>
32
  <body>
33
 
34
  <div class="grid-container">
35
+ <!-- 1ν–‰: 1번, 2번 -->
36
  <img src="1.webp" alt="1">
37
  <video src="1.mp4" autoplay loop muted></video>
38
  <img src="2.webp" alt="2">
39
  <video src="2.mp4" autoplay loop muted></video>
40
 
41
+ <!-- 2ν–‰: 3번, 4번 -->
42
  <img src="3.webp" alt="3">
43
  <video src="3.mp4" autoplay loop muted></video>
44
  <img src="4.webp" alt="4">
45
  <video src="4.mp4" autoplay loop muted></video>
46
 
47
+ <!-- 3ν–‰: 5번, 6번 -->
48
  <img src="5.webp" alt="5">
49
  <video src="5.mp4" autoplay loop muted></video>
50
  <img src="6.webp" alt="6">
51
  <video src="6.mp4" autoplay loop muted></video>
52
 
53
+ <!-- 4ν–‰: 7번, 8번 -->
54
  <img src="7.webp" alt="7">
55
  <video src="7.mp4" autoplay loop muted></video>
56
  <img src="8.webp" alt="8">
57
  <video src="8.mp4" autoplay loop muted></video>
58
 
59
+ <!-- 5ν–‰: 9번, 10번 -->
60
  <img src="9.webp" alt="9">
61
  <video src="9.mp4" autoplay loop muted></video>
62
  <img src="10.webp" alt="10">