📌 React-Bootstrap으로 navbar 만들기
React-Bootstrap 라이브러리를 사용해서 css 레이아웃을 간단하게 불러와보자.
-
검색창에 react bootstrap을 친 뒤 맨 처음에 나오는 사이트에 접속한다. (https://react-bootstrap.netlify.app/)
-
get started 버튼을 누르면 설치 방법을 알 수 있다.
에디터에서 npm install react-bootstrap bootstrap
-
간혹 bootstrap css 파일을 요구하는 경우가 있는데, 그럴 땐
- 사이트에 있는 css 파일을 index.html 파일의
<head>태그 안에 복붙하거나 - App.js에
import 'bootstrap/dist/css/bootstrap.min.css';를 해주면 된다.
-
React-Bootstrap 사이트에는 button, navbar 등 다양한 css 레이아웃들이 있는데, 내가 원하는 것의 예제코드를 복붙해서 쓰기만 하면 된다. 단, App.js 파일 상단에 꼭 해당 요소를 import 해야 한다.
ex) import {button} from 'react-bootstrap'
<실습>
import logo from './logo.svg';
import './App.css';
import React, {useState} from 'react';
import { Container, Nav, Navbar } from 'react-bootstrap';
import 'bootstrap/dist/css/bootstrap.min.css';
function App() {
return (
<div className="App">
<Navbar className="navbar" bg="primary" data-bs-theme="dark">
<Container>
<Navbar.Brand href="#home">Dessert Shop 🍰</Navbar.Brand>
<Nav className="me-auto">
<Nav.Link href="#home">Home</Nav.Link>
<Nav.Link href="#features">Dessert</Nav.Link>
<Nav.Link href="#pricing">Cart</Nav.Link>
</Nav>
</Container>
</Navbar>
</div>
);
}
export default App;
아주 간단하게 navbar 생성을 완료했다!
📌 직접 navbar 만들기
하지만... 이렇게 이미 만들어진 ui킷을 사용하는 데에 익숙해지면 css 공부는 많이 안 하고 여기에만 의존하게 될 것 같아서 위의 navbar를 직접 html과 css로 만들어보려고 한다.
- App.js 파일에 생성하면 복잡해지니 src 폴더 안에 Navbar.js 파일을 생성해서 Navbar 컴포넌트를 생성해준 뒤, 이것을 App.js에서 import하여 사용해주도록 하자!
/* Navbar.js */
import React from "react";
import './Navbar.css';
const Navbar = ()=>{
return (
<nav className="navbar">
<ul>
<li><a href="#Home"><h4>DESSERT SHOP 🍰</h4></a></li>
<li><a href="#Home">Home</a></li>
<li><a href="#Dessert">Dessert</a></li>
<li><a href="#Cart">Cart</a></li>
</ul>
</nav>
);
};
export default Navbar;/* Navbar.css */
.navbar {
background-color: cadetblue;
padding: 10px;
height: 50px;
width: 100%px;
font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
}
ul {
list-style: none;
}
li {
/* 수평 배치 */
float: left;
margin-right: 40px;
}
/* h4 태그에 디폴트로 설정되어 있는 마진을 제거해야 다른 리스트들이랑 같은 위치에 정렬 가능 */
li h4 {
margin: 0;
}
a {
text-decoration: none;
color: rgb(104, 52, 6);
}/* App.js */
import './App.css';
import Navbar from './Navbar';
function App() {
return (
<div>
<Navbar />
</div>
);
}
export default App;
완성!
개발자연습생의 개발 일기