[React]쇼핑물 레이아웃 디자인

[React]쇼핑물 레이아웃 디자인

네브바 만들기

1.리액트 부트스트랩에서 네브바 UI를 가져온다.

<Navbar bg="light" expand="lg">
  <Container>
    <Navbar.Brand href="#home">Shoe Shop</Navbar.Brand>
    <Navbar.Toggle aria-controls="basic-navbar-nav" />
    <Navbar.Collapse id="basic-navbar-nav">
      <Nav className="me-auto">
        <Nav.Link href="#home">Home</Nav.Link>
        <Nav.Link href="#link">Link</Nav.Link>
        <NavDropdown title="Dropdown" id="basic-nav-dropdown">
          <NavDropdown.Item href="#action/3.1">Action</NavDropdown.Item>
          <NavDropdown.Item href="#action/3.2">Another action</NavDropdown.Item>
          <NavDropdown.Item href="#action/3.3">Something</NavDropdown.Item>
          <NavDropdown.Divider />
          <NavDropdown.Item href="#action/3.4">Separated link</NavDropdown.Item>
        </NavDropdown>
      </Nav>
    </Navbar.Collapse>
  </Container>
</Navbar>

2.네브바에 사용된 부트스트랩 컴포넌트를 import한다.

import { Navbar, Nav, NavDropdown, Container} from 'react-bootstrap';

결과 화면

사이트 대문 만들기

1.리액트 부트스트랩에서 네브바 UI를 가져온다.

      <Alert variant="success" className="background">
        <Alert.Heading>20% Season off</Alert.Heading>
        <p>
          Aww yeah, you successfully read this important alert message. This example
          text is going to run a bit longer so that you can see how spacing within an
          alert works with this kind of content.
        </p>
        <hr />
        <p className="mb-0">
          Whenever you need to, be sure to use margin utilities to keep things nice
          and tidy.
        </p>
      </Alert>

App.css

.background {
  background-image: url("./background.jpg");
  background-size: cover;
  color: #fff;
}

이미지 경로는 src 바로 아래에 있다.

결과 화면

2.네브바에 사용된 부트스트랩 컴포넌트를 import한다.

import { Navbar, Nav, NavDropdown, Container, Alert} from 'react-bootstrap';

 

상품 컨테이너 만들기

      <div className="container">
        <div className="row">
          <div className="col-md-4">
            <img src="https://codingapple1.github.io/shop/shoes1.jpg" width="100%" alt="이미지1"/>
            <h4>상품명</h4>
            <p>상품설명 & 가격</p>
          </div>
          <div className="col-md-4">
          <img src="https://codingapple1.github.io/shop/shoes2.jpg" width="100%" alt="이미지2" />
            <h4>상품명</h4>
            <p>상품설명 & 가격</p>
          </div>
          <div className="col-md-4">
          <img src="https://codingapple1.github.io/shop/shoes3.jpg" width="100%" alt="이미지3" />
            <h4>상품명</h4>
            <p>상품설명 & 가격</p>
          </div>
        </div>
      </div>

결과 화면(화면이 넓은 경우)

결과 화면(화면이 좁은 경우)