add ad

hslee2008 · Aug 14, 2024 · 6d55eb1 · 6d55eb1
1 parent 374c4be
commit 6d55eb1
Show file tree

Hide file tree

Showing 6 changed files with 60 additions and 10 deletions.
diff --git a/index.html b/index.html
@@ -18,15 +18,15 @@
 
   <body>
     <div id="app"></div>
-
+   
     <script type="module" src="/src/main.ts"></script>
     <noscript>
       <h1>This site requires JavaScript to run</h1>
     </noscript>
 
     <script>
       console.log(
-        "%cHyunseung Lee\n\n%c낙원중학교 이현승\n\nhttps://www.instagram.com/hxn_sxng/\nhttps://github.com/hslee2008\nhttps://twitter.com/hyunsoong_i\nhttps://play.google.com/store/apps/dev?id=7815903651523223132\n\n현재 중학교 성적 산출 시스템은 수행평가와 지필고사(중간, 기말)을 합산해서 89.5점을 넘으면 A, 79.5점을 넘으면 B 등으로 계산한다. 학생들은 최종적으로 성적을 결정하는 기말고사를 준비하는 과정에서 특정 등급을 얻기 위해 얼마나 기말고사를 잘 봐야하는지 궁금해 한다. 하지만 최소 점수를 얻기 위해서는 지필고사 비율, 소수점 등을 정확히 알고 있어야 하므로 계산이 쉽지 않다. 그래서 이 과정을 자동화하여 친구들에게 도움이 될 수 있도록 하기 위해 프로그램을 개발하였다.",
+        "%cHyunseung Lee\n\n%c낙원중학교 이현승\n\nhttps://www.instagram.com/hxn_win/\nnhttps://play.google.com/store/apps/dev?id=7815903651523223132\n\n현재 중학교 성적 산출 시스템은 수행평가와 지필고사(중간, 기말)을 합산해서 89.5점을 넘으면 A, 79.5점을 넘으면 B 등으로 계산한다. 학생들은 최종적으로 성적을 결정하는 기말고사를 준비하는 과정에서 특정 등급을 얻기 위해 얼마나 기말고사를 잘 봐야하는지 궁금해 한다. 하지만 최소 점수를 얻기 위해서는 지필고사 비율, 소수점 등을 정확히 알고 있어야 하므로 계산이 쉽지 않다. 그래서 이 과정을 자동화하여 친구들에게 도움이 될 수 있도록 하기 위해 프로그램을 개발하였다.",
         "font-size: 25px;",
         "font-size: 12px;"
       );

diff --git a/public/ad.html b/public/ad.html
@@ -0,0 +1,28 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <title>기말고사 계산기 광고</title>
+
+    <style>
+      body {
+        margin: 0;
+        padding: 0;
+      }
+    </style>
+  </head>
+  <body>
+    <ins
+      class="kakao_ad_area"
+      style="display: none"
+      data-ad-unit="DAN-gJdrvHGQWo4GAxnk"
+      data-ad-width="320"
+      data-ad-height="100"
+    ></ins>
+    <script
+      type="text/javascript"
+      src="//t1.daumcdn.net/kas/static/ba.min.js"
+      async
+    ></script>
+  </body>
+</html>
diff --git a/src/App.svelte b/src/App.svelte
@@ -61,6 +61,13 @@
       <Grade></Grade>
     {/if}
   </main>
+
+  <br />
+
+  <div class="ad-container">
+    <iframe src="/ad.html" class="ad-iframe" title="Ad" height="100" width="320" scrolling="no"
+    ></iframe>
+  </div>
 {:else}
   <h1>{$_("offline")}</h1>
 {/if}
diff --git a/src/css/ad.css b/src/css/ad.css
@@ -0,0 +1,6 @@
+.ad-container {
+  position: relative;
+  display: flex;
+  justify-content: center;
+  margin: 5px;
+}
diff --git a/src/css/layout.css b/src/css/layout.css
@@ -1,21 +1,29 @@
 body {
   margin: 0;
   place-items: center;
-  min-width: 300px;
-  margin-top: 20px;
 }
 
 @media screen and (min-width: 500px) {
   body {
     display: flex;
     min-height: 100vh;
   }
+
+  #app {
+    max-width: 1280px;
+    min-width: 350px;
+    margin: 0 auto;
+    padding: calc(1rem + 2em);
+    text-align: center;
+  }
 }
 
-#app {
-  max-width: 1280px;
-  min-width: 350px;
-  margin: 0 auto;
-  padding: calc(1rem + 2em);
-  text-align: center;
+@media screen and (max-width: 500px) {
+  main {
+    max-width: 1280px;
+    min-width: 350px;
+    margin: 0 auto;
+    padding: calc(1rem + 2em);
+    text-align: center;
+  }
 }
diff --git a/src/main.ts b/src/main.ts
@@ -1,4 +1,5 @@
 import "carbon-components-svelte/css/white.css";
+import "@/css/ad.css";
 import "@/css/layout.css";
 import "@/css/utility.css";
 import "@/css/element.css";