Merge pull request #9 from LikeLionHGU/header-gyuho

Header gyuho - 모바일 버전 제작
LikeLionHGU · Jan 10, 2025 · 0e3db41 · 0e3db41
2 parents b745c8b + 8d4d5b9
commit 0e3db41
Show file tree

Hide file tree

Showing 10 changed files with 106 additions and 13 deletions.
diff --git a/.DS_Store b/.DS_Store
diff --git a/assets/.DS_Store b/assets/.DS_Store
diff --git a/assets/img/.DS_Store b/assets/img/.DS_Store
diff --git a/assets/img/likelion-header.jpg b/assets/img/likelion-header.jpg
diff --git a/assets/img/likelion-header.png b/assets/img/likelion-header.png
diff --git a/assets/img/mob_nav_about.png b/assets/img/mob_nav_about.png
diff --git a/assets/img/mob_nav_bot.png b/assets/img/mob_nav_bot.png
diff --git a/assets/img/mob_nav_top.png b/assets/img/mob_nav_top.png
diff --git a/index.html b/index.html
@@ -10,16 +10,26 @@
     <link rel="stylesheet" href="./styles/index.css" />
   </head>
   <body>
+    <script href=".js/index.js"></script>
     <!-- Header 영역 -->
     <div id="likelion-header">
-      <span id="header_logo">
-        <a href="#"><img src="./assets/img/likelion-header.png" alt="LikeLion-Logo" />
-         <span id="header-text">I <span class="memory--heart"></span> FRONTEND</span>
-        </a>
+        <span id="header-padding">
+        <span id="header_logo">
+          <a href="#"><img src="./assets/img/likelion-header.png" alt="LikeLion-Logo" /></a>
+          <span id="header-text">I <span class="memory--heart"></span> FRONTEND</span>   
+        </span>
+        <span id="navigation">
+          <span id="header-home">HOME</span>
+          <span id="header-about">ABOUT</span>
+          <span id="header-contact">CONTACT</span>
+        </span>
       </span>
-      <span id="header-home">HOME</span>
-      <span id="header-about">ABOUT</span>
-      <span id="header-contact">CONTACT</span>
+    </div>
+
+    <div class="mobile-nav">
+      <div id="mob_top"><img src="./assets/img/mob_nav_top.png" alt="mobile navigation top"/></div>
+      <div id="mob_about"><img src="./assets/img/mob_nav_about.png" alt="mobile navigation about"/></div>
+      <div id="mob_bot"><img src="./assets/img/mob_nav_bot.png" alt="mobile navigation bottom"/></div>
     </div>
 
     <!-- Grid 영역 -->

diff --git a/styles/index.css b/styles/index.css
@@ -3,21 +3,103 @@ body {
   height: 100vh;
 }
 
+.memory--heart {
+  color:#F9C756;
+  display: inline-block;
+  width: 25px;
+  height: 20px;
+  background-repeat: no-repeat;
+  background-size: 100% 100%;
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 22'%3E%3Cpath fill='F5F5F5' d='M12 20h-2v-1H9v-1H8v-1H7v-1H6v-1H5v-1H4v-1H3v-1H2v-2H1V5h1V4h1V3h1V2h5v1h1v1h2V3h1V2h5v1h1v1h1v1h1v5h-1v2h-1v1h-1v1h-1v1h-1v1h-1v1h-1v1h-1v1h-1zm-7-9v1h1v1h1v1h1v1h1v1h1v1h2v-1h1v-1h1v-1h1v-1h1v-1h1v-1h1V9h1V6h-1V5h-1V4h-3v1h-1v1h-1v1h-2V6H9V5H8V4H5v1H4v1H3v3h1v2z'/%3E%3C/svg%3E");
+}
+
 #likelion-header {
   /*
     '>' : 직접적인 자식 요소일 때만 스타일을 적용하고 싶을 때 사용
     만약 모든 하위 요소 중에서 #header_logo를 선택하고 싶다면 >를 생략
   */
   display: flex;
-  flex-direction: column;
-  border: 1px solid black;
-  padding: 50px;
+  flex-direction: row;
+
+  font-family: "Jersey 10";
+  font-weight: 400;
+  font-style: bold;
+  color: #F9C756;
 
-  > #header_logo {
+  width: 100%;
+  height: auto;
+  flex-shrink: 0;
+
+  background: #0D1C3C;
+  box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
+
+  position: sticky;
+  top: 1px;
+
+  > #header-padding {
+    padding: 30px;
+  }
+
+  #header_logo {
+    font-size: 50px;
     img {
-      width: 100px;
+      width: 80px;
+      display: inline-block;
+      padding-right: 10px;
     }
   }
+
+  #header_text {
+    display: inline-block;
+  }
+}
+
+#navigation {
+  display: inline-block;
+  position: absolute;
+  right: 50px;
+  top: 35px;
+}
+
+@media screen and (max-width: 750px){
+  #navigation {
+    display: none;
+  }
+  .mobile-nav {
+    display: none;
+  }
+}
+
+.mobile-nav {
+  position: fixed;
+  right: 2%;
+  bottom: 0;
+  display: block;
+
+  img{
+    width:50px;
+  }
+}
+
+@media screen and (min-width: 750px){
+  .mobile-nav {
+    display: none;
+  }
+}
+
+#header-home, #header-about, #header-contact {
+  padding-left: 30px; 
+  font-size: 40px;
+}
+
+#likelion-header a {
+  color: #F9C756;
+}
+
+#likelion-header a:link {
+  color: #F9C756;
+  background-color: transparent;
+  text-decoration: none;
 }
 
 #likelion-banner {
@@ -48,6 +130,7 @@ body {
 #footer {
   border: 1px solid slategrey;
   width: 100%;
-  padding: 50px;
+  /* padding: 50px; */
   height: 50px;
 }
+