[React] 상단 배너 만들어보기👆

궁금하신 점이나 고칠 부분이 있다면 언제든지 댓글 남겨주세요!

👇해당 링크를 통해서 공부 후 작성되었습니다!👇
https://velopert.com/2937

처음에 만들어진 홈페이지에서 다른페이지를 이동하려는 기능을 구현하려고 했는데 그러려면 먼저 배너를 만들어야 겠다는 생각을 하게되었다.

그럼 배너를 만들 파일 먼저 만들어보자.
components폴더에 Header.js를 만들어준다.

Header.js

import React from "react";
import "./Header.css";

const MenuItem = ({ active, children, to }) => (
  <div className="menu-item">{children}</div>
);

const Header = () => {
  return (
    <div>
      <div className="logo">Baner</div>
      <div className="menu">
        <MenuItem>홈</MenuItem>
        <MenuItem>소개</MenuItem>
        <MenuItem>포스트</MenuItem>
      </div>
    </div>
  );
};

export default Header;

그리고 css파일도 만들어주자!

Header.css

.logo {
  height: 3.5rem;
  background-color: #ffecec;
  width: 100vw;
  line-height: 3.5rem;
  color: white;
  font-size: 1.5rem;
  font-weight: bold;
  text-align: center;
}

.menu {
  background-color: #ffffff;
  height: 3.5rem;
}

.menu-item {
  display: inline-block;
  color: rgb(59, 59, 59);
  font-size: 1.2rem;
  font-style: bold;
  line-height: 3.5rem;
  width: 33.3333%;
  text-align: center;
  cursor: pointer;
  transition: background-color 0.3s;
  text-decoration: none;
}

.menu-item:hover {
  background-color: #cdfff3;
}

.menu-item:active,
.menu-item.active {
  background-color: #9cd7ee;
}

css부분은 위의 링크에서 수정을 조금했다(이거도 색깔만 변경한게 다임..)
이제 App.js로 가서 적용해보자.

App.js

import React from "react";
import "./App.css";
import Home from "./components/Home";
import Header from "./components/Header";

const App = (props) => {
  return (
    <div>
      <Header />
      {props.children}
      <div className="Home">
        <Home title="Hello" />
      </div>
    </div>
  );
};

export default App;

결과는..

위의 링크에서 배너를 만드는 코드만 배운다고 생각했는데 css효과까지 배울수 있었다.

어째 코드를 따라 타이핑만 하다 보니 옆부분도 짤려서 안보인다..

만들어진 프로그램 코드를 보면서 분석하고 뜯어보면서 공부해보자!✍