[react] 쇼핑몰 프로젝트 - 1 : main_page_ layout 디자인하기
navbar 생성하기
부트스트랩 활용하기
- navbar 컴포넌트 디자인 코드 복사해서 사용할 App컴포넌트 내에 복사 붙여넣기
- import : 사용하는 navbar 코드 내 컴포넌트 명 { } 중괄호 내애 작성하여 사용하겠다 선언하기
- 필요없는 부분과 디자인 수정은 알아서하면 된다! => 뒤에서 할 예정
- 화면을 줄이면 변하게 자동 설정 : 부트스트랩 장점, 기본 flex 설정이 되어있어서 화면을 줄일때 어떤 기능, 디자인으로 편할지 설정되어있다.
import { Navbar, Nav, Container, NavDropdown} from "react-bootstrap";
function App() {
return (
<>
<div className="App">
<Navbar bg="light" expand="lg">
<Container>
<Navbar.Brand href="#home">Shoes 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>
<NavDropdown title="상품상세페이지" 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>
</div>
</>
);
}
export default App;
https://classic.yarnpkg.com/en/docs/install/#windows-stable
메인 페이지 - 커버 생성
import : 버튼 디자인 갖고와서 사용하기, 중괄호에 {Button}추가
import { Navbar, Nav, Container, NavDropdown, Button} from "react-bootstrap";
.... <Navbar/>..
<div className="jumbotron">
<div className="font-background">
<h1> 50% Season SALE !</h1>
<p>
운동화, 구두, 부츠, 워커 모두 최대 ~50% 세일 판매합니다!
<br />
인기 상품은 빠른 시일 내에 품절될 수 있는 점 안내드립니다.
</p>
<p>SALE 기간 : 4월 1일 ~ 4월 15일 (2주 간)</p>
</div>
<div>
<Button variant="primary">Learn more</Button>
</div>
</div>
상품 가로 나열 레이아웃 만들기 - 가로 3등분
가로로 상품을 나열하는 레이아웃 만들려면, 박스를 세로열 잘라야한다.
부트스트랩 grid 문법 사용 : className = "row" 가로 정렬 박스안에,classNmae="col" 세로 열로 나눠지게 설정하기
- col-md-4 옵션이해하기
- md (테블릿 사이지 px 부터) 세로열로 나눠지도록 설정- 4 : 어느 배율로 나눌지 설정하는 것, 3등분하고 싶으면 4로 설정
<div className="row">
<div className="col-md-4">상품사진 전시 1</div>
<div className="col-md-4">상품사진 전시 1</div>
<div className="col-md-4">상품사진 전시 1</div>
</div>
기본 사진 및 구성 내용 정하기
위에서 md 로 옵션을 정했기에, 화면을 특정 사이즈보다 작아지면 div의 원래 성질되로 세로정렬이된다.
<div className="product-container">
<div className="row">
<div className="col-md-4">
<img src="https://codingapple1.github.io/shop/shoes1.jpg"></img>
<h3>상품명</h3>
<p>상품설명, 가격</p>
</div>
<div className="col-md-4">
<img src="https://codingapple1.github.io/shop/shoes2.jpg"></img>
<h3>상품명</h3>
<p>상품설명, 가격</p>
</div>
<div className="col-md-4">
<img src="https://codingapple1.github.io/shop/shoes3.jpg"></img>
<h3>상품명</h3>
<p>상품설명, 가격</p>
</div>
</div>
</div>
</div>
Author And Source
이 문제에 관하여([react] 쇼핑몰 프로젝트 - 1 : main_page_ layout 디자인하기), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@estell/react-쇼핑몰-프로젝트-1저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)