👇해당 링크를 통해서 공부 후 작성되었습니다!👇
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효과까지 배울수 있었다.
어째 코드를 따라 타이핑만 하다 보니 옆부분도 짤려서 안보인다..
만들어진 프로그램 코드를 보면서 분석하고 뜯어보면서 공부해보자!✍