본문 바로가기
카테고리 없음

Bootstrap으로 Footer와 Header만들기

게리드 2023. 12. 10. 02:09

반응형 웹을 만들어보고싶어서 검색하다 react-bootstrap이라는걸 알았다.

호기심이 생겨서 한번 읽어보고 만들어봄.

import { Row, Col } from "reactstrap"; 
 리엑트 스트랩은 Row라는 전체의 한칸에 크게 한줄이 있다고하면 Col은 그 전체줄을 12칸으로 나눈다.
만약 하나의 Row에 세개의 요소가 있다면 4칸씩 사용하여 배열로 만든것이다
스트래블 사용할때 Row를 사용할거라면 반드시 Col을 넣어주어야한다.

 

npm i node-sass sass-loader

 

scss 파일에 작성한 css를 변환시켜 내가 만든 리엑트앱에 적용해준다.

app.js파일에가서 custom.scss 파일을 불러온다.

 

 

리엑트에서는 스타일을 어떻게 적용하냐면 클래스네임으로 일반적으로 css의 클래스를 적용할 수 있다.

<div id="main-footer" className="text-center m-auto p-3">

 

 m-auto의 m은 margin으로 좌우의 여백을 자동으로 맞춰준다.

p는 padding으로 위아래의 공간을 의미한다.

부트스트랩의 단위는 0.25 rem으로 rem은 반응형 웹사이트를 만드는데 사용되는 크기단위이다.

Midium,Large,Small는 부트스트랩사이트에 들어가서보면 사이즈의 의미를 알 수 있다.

import React, { Fragment } from "react";
import Footer from "../components/Footer";
import Header from "../components/header";

const Router = () => (
  <Fragment>
    <Header />
    <h1> Body</h1>
    <Footer />
  </Fragment>
);

export default Router;
import React from "react";
import { Col, Row } from "reactstrap";

const Header = () => {
  return (
    <div id="page-header" className="mb-3">
      <Row>
        <Col md="6" sm="auto" className="text-center m-auto">
          <h1>Read Our Blog</h1>
          <p>비보의 블로그</p>
        </Col>
      </Row>
    </div>
  );
};

export default Header;
#page-header {
  height: 200px;
  background: url("../assets/img/5zizo.png");
  background-position: 80% 40%;
  background-attachment: fixed;
  color: #fff;
  border-bottom: 1px #eee solid;
  padding-top: 60px;
}

 

⛔️history.ts:494 Uncaught Error: [AppNavbar] is not a <Route> component. All component children of <Routes> must be a <Route> or <React.Fragment>

 

오류 메시지에서 나타나는 문제는 <Routes> 컴포넌트 내에서 <Nav>가 <Route>나 <React.Fragment>로 감싸져 있지 않아서 발생하는 것으로 보입니다.

<Routes> 컴포넌트 안에서는 직접적으로 컴포넌트나 <Route>로 감싸져 있어야 합니다.

import React from "react";
import { BrowserRouter, Routes, Route } from "react-router-dom";
import Footer from "../components/Footer";
import Header from "../components/header";
import Nav from "../components/AppNavbar";

const AppRouter = () => (
  <BrowserRouter>
    <Routes>
      <Route path="/">
        <>
          <Nav />
          <Header />
          <h1> Body</h1>
          <Footer />
        </>
      </Route>
    </Routes>
  </BrowserRouter>
);

export default AppRouter;

 

navbarToggler는 화면을 줄였을때 생기는 햄버거 모양의 아이콘을 말한다.

<Collapse>는 화면을 줄였을때 아래로 주르륵 나타나는 것을 말한다.

import React from "react";
import { Navbar, Container, NavbarToggler, Collapse } from "reactstrap";
import { Link } from "react-router-dom";

const AppNavbar = () => {
  return (
    <>
      <Navbar expand="lg" className="sticky-top">
        <Container>
          <Link to="/" className="text-white text-decoration: none">
            비보의 블로그
          </Link>
          <NavbarToggler />
          <Collapse isOpen={true} Navbar>
            {true ? <h1>Owner</h1> : <h1>Guest</h1>}
          </Collapse>
        </Container>
      </Navbar>
    </>
  );
};

export default AppNavbar;

 

리덕스의 인증값이 true면 Owner로 아니라면 Guest가 나타나도록 상태관리를 할 꺼라고 써놓기는 했는데

고민이다..나만쓸거면 굳이 로그인 회원가입이 필요없을거같은데

 

flexbox란?

행과 열을 배치하기 위해서는 양쪽의 사이즈르 계산해 여백과 ㅎ마께 모든걸 계산해야하지만 계산하기가 어렵다.
이를 간단하게 표현하기위해 사용되는것이 그리드와 플렉스박스이다.import React, { Fragment } from "react"; import Footer from "../components/Footer"; import Header from "../components/header"; const Router = () => ( <Fragment> <Header /> <h1> Body</h1> <Footer /> </Fragment> ); export default Router;
import React from "react"; import { Col, Row } from "reactstrap"; const Header = () => { return ( <div id="page-header" className="mb-3"> <Row> <Col md="6" sm="auto" className="text-center m-auto"> <h1>Read Our Blog</h1> <p>비보의 블로그</p> </Col> </Row> </div> ); }; export default Header;
#page-header { height: 200px; background: url("../assets/img/5zizo.png"); background-position: 80% 40%; background-attachment: fixed; color: #fff; border-bottom: 1px #eee solid; padding-top: 60px; }



⛔️history.ts:494 Uncaught Error: [AppNavbar] is not a <Route> component. All component children of <Routes> must be a <Route> or <React.Fragment>

오류 메시지에서 나타나는 문제는 <Routes> 컴포넌트 내에서 <Nav>가 <Route>나 <React.Fragment>로 감싸져 있지 않아서 발생하는 것으로 보입니다.
<Routes> 컴포넌트 안에서는 직접적으로 컴포넌트나 <Route>로 감싸져 있어야 합니다.
import React from "react"; import { BrowserRouter, Routes, Route } from "react-router-dom"; import Footer from "../components/Footer"; import Header from "../components/header"; import Nav from "../components/AppNavbar"; const AppRouter = () => ( <BrowserRouter> <Routes> <Route path="/"> <> <Nav /> <Header /> <h1> Body</h1> <Footer /> </> </Route> </Routes> </BrowserRouter> ); export default AppRouter;

avbarToggler는 화면을 줄였을 때 생기는 햄버거 모양을 말한다.
<Collapse>는 화면을 줄였을때 아래로 주르르 나타나는 것을 말한다.
import React from "react"; import { Navbar, Container, NavbarToggler, Collapse } from "reactstrap"; import { Link } from "react-router-dom"; const AppNavbar = () => { return ( <> <Navbar expand="lg" className="sticky-top"> <Container> <Link to="/" className="text-white text-decoration: none"> 비보의 블로그 </Link> <NavbarToggler /> <Collapse isOpen={true} Navbar> {true ? <h1>authLink</h1> : <h1>guestLink</h1>} </Collapse> </Container> </Navbar> </> ); }; export default AppNavbar;
리덕스의 인증값이 true면 authLink로 아니라면 guestLink가 나타나도록 상태관리를 할 것이다.

flexbox란?행과 열을 배치하기 위해서는 양쪽의 사이즈르 계산해 여백과 ㅎ마께 모든걸 계산해야하지만 계산하기가 어렵다.이를 간단하게 표현하기위해 사용되는것이 그리드와 플렉스박스이다.

티스토리툴바