1.0.0

unbroken2650 · May 10, 2022 · b5b8b79 · b5b8b79 · vercel · May 10, 2022
2 parents 5726337 + 784cb06
commit b5b8b79
Show file tree

Hide file tree

Showing 17 changed files with 74 additions and 16 deletions.
diff --git a/Korean-Quotes/fonts/AppleSDGothicNeoB.eot b/Korean-Quotes/fonts/AppleSDGothicNeoB.eot
diff --git a/Korean-Quotes/fonts/AppleSDGothicNeoB.ttf b/Korean-Quotes/fonts/AppleSDGothicNeoB.ttf
diff --git a/Korean-Quotes/fonts/AppleSDGothicNeoB.woff b/Korean-Quotes/fonts/AppleSDGothicNeoB.woff
diff --git a/Korean-Quotes/fonts/AppleSDGothicNeoB.woff2 b/Korean-Quotes/fonts/AppleSDGothicNeoB.woff2
diff --git a/Korean-Quotes/fonts/AppleSDGothicNeoH.eot b/Korean-Quotes/fonts/AppleSDGothicNeoH.eot
diff --git a/Korean-Quotes/fonts/AppleSDGothicNeoH.ttf b/Korean-Quotes/fonts/AppleSDGothicNeoH.ttf
diff --git a/Korean-Quotes/fonts/AppleSDGothicNeoH.woff b/Korean-Quotes/fonts/AppleSDGothicNeoH.woff
diff --git a/Korean-Quotes/fonts/AppleSDGothicNeoH.woff2 b/Korean-Quotes/fonts/AppleSDGothicNeoH.woff2
diff --git a/Korean-Quotes/images/backgroundImage_1.jpg b/Korean-Quotes/images/backgroundImage_1.jpg
diff --git a/Korean-Quotes/images/backgroundImage_2.jpg b/Korean-Quotes/images/backgroundImage_2.jpg
diff --git a/Korean-Quotes/images/backgroundImage_3.jpg b/Korean-Quotes/images/backgroundImage_3.jpg
diff --git a/Korean-Quotes/images/backgroundImage_4.jpg b/Korean-Quotes/images/backgroundImage_4.jpg
diff --git a/Korean-Quotes/images/backgroundImage_5.jpg b/Korean-Quotes/images/backgroundImage_5.jpg
diff --git a/Korean-Quotes/images/backgroundImage_6.jpg b/Korean-Quotes/images/backgroundImage_6.jpg
diff --git a/Korean-Quotes/images/backgroundImage_7.jpg b/Korean-Quotes/images/backgroundImage_7.jpg
diff --git a/Korean-Quotes/index.html b/Korean-Quotes/index.html
@@ -13,22 +13,25 @@
 
 <body>
     <div id="bg">
-        <img id="image" src="https://i.ibb.co/tBVLZDs/background-Image-5.jpg" alt="배경이미지입니다.">
+        <img id="image" src="https://i.ibb.co/G0RT85C/background-Image-1.jpg" alt="배경이미지입니다.">
         <div id="quote">
             <p id="quote_1">한국어 명언 위젯입니다.</p>
             <p id="quote_2">5분마다 새로운 명언으로 바뀝니다.</p>
-            <p id="changeButton" onclick="resetQuote()">새로고침</p>
+            <p id="refreshButton" onclick="resetQuote()"><img id="refreshImage"
+                    src="https://i.ibb.co/pRc2cVz/refresh-2-48.png" alt="새로고침"></p>
         </div>
     </div>
-
     <script>
-        const images = ["https://i.ibb.co/tBVLZDs/background-Image-5.jpg",
-            "https://i.ibb.co/NCVpQfm/background-Image-4.jpg",
-            "https://i.ibb.co/JFdmJgD/background-Image-3.jpg",
-            "https://i.ibb.co/QXnwKsp/background-Image-2.jpg",
-            "https://i.ibb.co/FhmPR8Y/background-Image-1.jpg",]
+        const images = ["https://i.ibb.co/X5H2XqM/background-Image-5.jpg",
+            "https://i.ibb.co/M8TtNsq/background-Image-6.jpg",
+            "https://i.ibb.co/s9rT9SW/background-Image-7.jpg",
+            "https://i.ibb.co/G0RT85C/background-Image-1.jpg",
+            "https://i.ibb.co/PChYhMz/background-Image-2.jpg",
+            "https://i.ibb.co/1QvvcvH/background-Image-3.jpg",
+            "https://i.ibb.co/DKwdfnV/background-Image-4.jpg",]
             ;
 
+        ///배경 이미지 preload
         function preload(images) {
             let n = images.length;
             for (let i = 0; i < n; i++) {
@@ -37,6 +40,7 @@
             }
         };
         preload(images);
+
         const IMG_COUNT = images.length;
 
         function randomInt(max) {
@@ -83,7 +87,6 @@
             } else {
                 goRandom();
             }
-
         }
 
         function resetQuote() {

diff --git a/Korean-Quotes/main.css b/Korean-Quotes/main.css
@@ -12,10 +12,14 @@ body iframe:first-child {
 #bg {
     width: 100vw;
     height: 100vh;
+
     display: flex;
     justify-content: center;
     align-items: center;
     position: relative;
+
+    background-color: rgba(0, 0, 0, 0.3);
+    border-radius: 35px;
 }
 
 #image {
@@ -25,28 +29,79 @@ body iframe:first-child {
     z-index: -99;
     object-fit: cover;
 
-    border-radius: 25px;
+    border-radius: 35px;
 }
 
-#changeButton {
+#refreshButton {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+
     margin: 0;
     position: absolute;
-    right: 1%;
-    bottom: 1%;
+    right: 3%;
+    bottom: 3%;
 
     cursor: pointer;
 
-    background-color: grey;
-    color: white;
-    border-radius: 15px;
+    border-radius: 50%;
+}
+
+#refreshImage {
+    width: 35px;
+    object-fit: cover;
+}
+
+#quote {
+    padding: 2em;
+}
+
+@font-face {
+    font-family: AppleSDGothicNeoB;
+    src: url(./fonts/AppleSDGothicNeoB.eot);
+    src: local(AppleSDGothicNeoB),
+        url(./fonts/AppleSDGothicNeoB.eot?#iefix) format("embedded-opentype"),
+        url(./fonts/AppleSDGothicNeoB.woff2) format("woff2"),
+        url(./fonts/AppleSDGothicNeoB.woff) format("woff"),
+        url(./fonts/AppleSDGothicNeoB.ttf) format("truetype");
+    font-style: normal;
+    font-weight: bold;
+    unicode-range: U+0-10FFFF;
+}
+
+@font-face {
+    font-family: AppleSDGothicNeoH;
+    src: url(./fonts/AppleSDGothicNeoH.eot);
+    src: local(AppleSDGothicNeoH),
+        url(./fonts/AppleSDGothicNeoH.eot?#iefix) format("embedded-opentype"),
+        url(./fonts/AppleSDGothicNeoH.woff2) format("woff2"),
+        url(./fonts/AppleSDGothicNeoH.woff) format("woff"),
+        url(./fonts/AppleSDGothicNeoH.ttf) format("truetype");
+    font-style: normal;
+    font-weight: normal;
+    unicode-range: U+0-10FFFF;
 }
 
 #quote_1 {
     font-size: 20px;
     color: white;
+    font-weight: bold;
+    word-break: keep-all;
+}
+@media screen and (max-width: 250px) {
+    #quote_1 {
+        font-size: 1em;
+    }
 }
 
 #quote_2 {
+    font-style: italic;
     font-size: 10px;
     color: white;
+    word-break: keep-all;
+}
+@media screen and (max-width: 250px) {
+    #quote_2 {
+        font-size: 0.5em;
+    }
 }