React Website 만들기) 4.Home에 적용할 부분 만들기

 

 

 

홈페이지에서 products, services, signup 파트를 누르면 나올 홈페이지를 구현한다. 

 

 

 

 

1. Products.js, Services.js, SignUp.js

components폴더의 pages폴더에 각각의 파일을 만들고 구현해 놓는다 .

import React from 'react';
import '../../App.css';

export default function Products() {
    return <h1 className='products'>PRODUCTS</h1>;
}

import React from 'react'
import '../../App.css';

export default function Services() {
    return <h1 className='services'>SERVICES</h1>;
}

import React from 'react'
import '../../App.css';

export default function SignUp() {
    return <h1 className='sign-up'>SIGN Up</h1>;
}

 

 

 

 

 

2. App.js

구현파트 설정

import React from 'react';
import './App.css';
import Navbar from'./components/Navbar';
import {BrowserRouter as Router, Switch, Route} from 'react-router-dom';
import Home from './components/Pages/Home';
import Services from './components/Pages/Services';
import Products from './components/Pages/Products';
import SignUp from './components/Pages/SignUp';

function App() {
  return (
    <>
    <Router>
      <Navbar />
      <Switch>
        <Route path='/' exact component = {Home} />
        <Route path='/services' component = {Services} />
        <Route path='/products' component = {Products} />
        <Route path='/sign-up' component = {SignUp} />
      </Switch>
    </Router>
    </>
  );
}

export default App;

 

 

 

 

 

3. App.css

css파일(스타일파일)에도 각각의 파트를 설정해 둔다. 

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    font-family: 'PT Sans', sans-serif;
  }
  
  .home,
  .services,
  .products,
  .sign-up {
    display: flex;
    height: 90vh;
    align-items: center;
    justify-content: center;
    font-size: 3rem;
  }
  
  .services {
    background-image: url('/src/images/img-2.jpg');
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    color: #fff;
    font-size: 100px;
  }
  
  .products {
    background-image: url('/src/images/img-1.jpg');
    background-position: center;
    background-size: fill;
    background-repeat: no-repeat;
    color: #fff;
    font-size: 100px;
  }
  
  .sign-up {
    background-image: url('/src/images/img-8.jpg');
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    color: #fff;
    font-size: 100px;
  }

 

 

 

 

 

사진으로 보면,

홈페이지에서 각각 버튼을 눌렀을 때 각기의 페이지가 구현된다.