[학원 웹사이트] 01. 네비게이션 바 만들기

 

리액트 프로젝트를 생성하고

scss 설치하고 

Navbar.js 파일을 만들어서 

App.js에 추가 

import Navbar from "./components/common/Navbar";
import Home from "./components/routes/Home";
// import { Link } from "react";

function App() {
  return (
    <div className="App">
      <Navbar />
      <Home />
    </div>
  );
}

export default App;

 

 

css 연습을 좀 했다
저 아이콘 부분 중앙 정렬하는 게 헷갈려서 시간 좀 쏟음

 

 

 

 

Navbar.js

import "./Navbar.scss";
import instagram from "../../images/instagram.png";
import facebook from "../../images/facebook.png";
import kakaotalk from "../../images/kakaotalk.png";

const Navbar = () => {
  return <div className="nav__bar">
    <div className="nav__logo">
      Kadza Jężyk Koreański
      <img src="" alt="" />
      <ul className="nav__icons">
        <li><a href=""><img src={instagram} alt="" /></a></li>
        <li><a href=""><img src={facebook} alt="" /></a></li>
        <li><a href=""><img src={kakaotalk} alt="" /></a></li>
      </ul>
    </div>
    <ul className="nav__menu">
      <li>Home</li>
      <li>Courses</li>
      <li>Fees</li>
      <li>Register</li>
      <li>FAQ</li>
    </ul>
  </div>
}

export default Navbar;

Navbar.scss

.nav__bar {
  background-color: rgb(182, 232, 231);
  padding-bottom: .4%;
  // color: #fff;
}

.nav__logo {
  padding: 1% 0;
  font-size: 1.8rem;
  text-align: center;
  position: relative;
}

.nav__menu {
  display: flex;
  justify-content: space-around;
  font-size: 1.2rem;
}

.nav__icons {
  position: absolute;
  margin: 0;
  top: 0;
  right: 0;
  display: flex;
  padding-left: 0;
  width: 12vw;
  height: 100%;

  li {
    display: flex;
    align-items: center;
    height: 100%;
    width: 100%;

    img {
      width: 1.7rem;
    }
  }
}

/* common */
a {
  cursor: pointer;
  text-decoration: none;
}

li {
  list-style: none;
}