modify: index 모바일 대응 및 사용법 링크 추가

Nuung · Nuung · commit e238e8eb02c4 · 2023-11-16T23:46:09.000+09:00
diff --git a/README.md b/README.md
@@ -1,6 +1,7 @@
 # Velog Dashboard Project
 
-> velog dashboard project, ***velog의 모든 게시글, 통계 데이터를 한 눈에 편하게 확인하자!!*** - https://velog-dashboard.kro.kr/
+> velog dashboard project, ***velog의 모든 게시글, 통계 데이터를 한 눈에 편하게 확인하자!!*** </br>
+> https://velog-dashboard.kro.kr/
 
 ## 1. HOW TO USE
 
diff --git a/nginx/pages/index.html b/nginx/pages/index.html
@@ -89,9 +89,9 @@
       gtag("config", "G-8G3N74JV82");
     </script>
     <!-- CUSTOM -->
-    <link rel="stylesheet" href="./index/index.css" />
+    <link rel="stylesheet" href="./index.css" />
   </head>
-  <body>
+  <br>
     <div class="login-container">
       <div class="login-container-logo">
         <img
@@ -115,9 +115,11 @@
         />
         <button type="submit">Check In</button>
       </form>
+      <a href="https://github.com/Check-Data-Out/velog-dashboard" class="login-container-footer-help">어떻게 사용하나요?! (클릭)</a>
+      </br>
       <span id="login-container-footer">made by Nuung</span>
     </div>
-    <script src="./global.js"></script>
-    <script src="./index/index.js"></script>
+    <script src="../global.js"></script>
+    <script src="./index.js"></script>
   </body>
 </html>
diff --git a/nginx/pages/index/index.css b/nginx/pages/index/index.css
@@ -12,7 +12,7 @@ body, html {
 .login-container {
     position: relative;
     /* 자식 요소의 절대 위치를 기준으로 함 */
-    height: 30%;
+    height: 36%;
     width: 100%;
     display: flex;
     flex-direction: column;
@@ -52,6 +52,13 @@ body, html {
     cursor: pointer;
 }
 
+.login-container-footer-help {
+    font-size: 0.8rem;
+    color: inherit;
+    text-decoration: none;
+    font-weight: bolder;
+}
+
 form {
     display: flex;
     flex-direction: column;
@@ -77,4 +84,26 @@ button {
 
 button:hover {
     background: #666;
+}
+
+/* ====================================================== */
+/* MOBILE */
+/* ====================================================== */
+
+@media only screen and (max-width: 600px) {
+
+    /* 화면 너비가 600px 이하일 때 적용할 스타일을 여기에 작성합니다. */
+    .login-container {
+        height: 350px;
+    }
+
+}
+
+@media only screen and (max-width: 350px) {
+
+    /* 화면 너비가 600px 이하일 때 적용할 스타일을 여기에 작성합니다. */
+    .login-container {
+        height: 30%;
+    }
+
 }
diff --git a/nginx/pages/index/index.html b/nginx/pages/index/index.html
@@ -91,7 +91,7 @@
     <!-- CUSTOM -->
     <link rel="stylesheet" href="./index.css" />
   </head>
-  <body>
+  <br>
     <div class="login-container">
       <div class="login-container-logo">
         <img
@@ -115,6 +115,8 @@
         />
         <button type="submit">Check In</button>
       </form>
+      <a href="https://github.com/Check-Data-Out/velog-dashboard" class="login-container-footer-help">어떻게 사용하나요?! (클릭)</a>
+      </br>
       <span id="login-container-footer">made by Nuung</span>
     </div>
     <script src="../global.js"></script>
