[#1] Style : Header CSS 수정

EWHA-CHAIN · May 29, 2020 · 4881a39 · 4881a39
1 parent 1dd5222
commit 4881a39
Show file tree

Hide file tree

Showing 2 changed files with 37 additions and 13 deletions.
diff --git a/src/components/Header.js b/src/components/Header.js
@@ -1,20 +1,23 @@
-import React, {useState} from 'react';
+import React from 'react';
 import { NavLink } from "react-router-dom";
 import './style.css'
-import Home from "./Home";
 
 const Header = () => {
   return(
-    <header>
-      <img/>
-      <nav>
-        <ul><li><NavLink to="/">Home</NavLink></li></ul>
-        <ul><li><NavLink to="/alumni">Alumni</NavLink></li></ul>
-        <ul><li><NavLink to="/portfolio">Portfolio</NavLink></li></ul>
-        <ul><li><NavLink to="/recruiting">Recruiting</NavLink></li></ul>
+    <header id="Header">
+      <nav className="nav-bar">
+        <div className="nav-bar-div">
+        <img className="header_logo" alt="logo"/>
+        <ul className="header_right">
+          <li><NavLink to="/">Home</NavLink></li>
+          <li><NavLink to="/alumni">Alumni</NavLink></li>
+          <li><NavLink to="/portfolio">Portfolio</NavLink></li>
+          <li><NavLink to="/recruiting">Recruiting</NavLink></li>
+        </ul>
+        </div>
       </nav>
     </header>
   )
 }
 
-export default Header
+export default Header
diff --git a/src/components/style.css b/src/components/style.css
@@ -1,3 +1,11 @@
+html, body {
+    min-width: 320px;
+}
+
+li, ol, ul {
+    list-style: none;
+}
+
 /* Header - nav var */
 header {
     background-color: white;
@@ -11,12 +19,25 @@ header {
     box-shadow: 0 0 15px 0 black;
 }
 
+header * {
+    display: inline;
+}
+
+header .nav-bar {
+    margin: 0 auto;
+    max-width: 1300px;
+    text-align: center;
+}
+
 header img {
+    position: absolute;
+    left: 10%;
     height: 70px;
 }
 
-header * {
-    display: inline;
+header > nav > ul {
+    position: relative;
+    left: 100px;
 }
 
 header li {
@@ -81,5 +102,5 @@ header li a {
 
 /* responsive */
 @media screen {
-    
+
 }