React Project2. 레이아웃 디자

• css는 하드코딩 할필요없이 bootstrap에서 복붙해오면 빠르고 쉽게 페이지를 만들 수 있다.
  (React Bootstrap 에서 코드 복붙시 항상 상단에 컴포넌트 명 import하는거 주의)

*참고) img파일을 src에 넣으면 압축돼서 저장, public에 넣으면 압축안되고 저장.
가져올 때 경로작성의 차이인데 src에 넣는게 편함.
public에 넣으면 경로가 더 길어지는데 뭐 별 큰 차이 아니긴함

상단메뉴 (Navbar) 만들기

react bootstrap 공식사이트로 들어간 뒤
Component 메뉴로 들어가신 다음 navbar라고 검색하면 간지나는 navbar 예제들이 많이있음

마음에 드는 navbar의 HTML 예제 코드를 원하는 곳에 붙여넣기만 해주면 navbar 개발 끝!(붙여넣을 때는 붙여넣은 컴포넌트를 상단에 import를 먼저 해와야함)

import { Navbar } from 'react-bootstrap';

function App(){
 return (
   <div className="App">
     <Navbar></Navbar> (그 사이트에 있던 navbar 예제 어쩌구)
   </div>
 )
}   

큰 그림위에 글씨 + 버튼있는 그런 UI도 쌩코딩할 필요는 없지만 해봤다. Jumbotron이라는게 있었는데 사라짐

import { Navbar,Nav,NavDropdown,Form,Button,FormControl, Jumbotron } from 'react-bootstrap';

function App(){
  return (
    <div className="App">
      <Navbar></Navbar> (그 사이트에 있던 navbar 예제 어쩌구)
      <Jumbotron></Jumbotron> (그 사이트에 있던 jumbotron 예제 어쩌구)
    </div>
  )
}

(App.css 파일)
이미지 파일 src폴더로 갖다놓고 url()
.background {
background-image : url(/background.jpg);
background-position : center;
}

<div className="container">
        <div className="row"> //안에 있는 것들을 12컬럼으로 쪼개라
          <div className="col-md-4"> // 4개 컬럼을 차지하는 div박스를 만들라
            <img
              src="https://codingapple1.github.io/shop/shoes1.jpg"
              alt=""
              width="100%"
            />
            <h4>상품명</h4>
            <p>상품설명 & 가격</p>
          </div>
          <div className="col-md-4">
            <img
              src="https://codingapple1.github.io/shop/shoes2.jpg"
              alt=""
              width="100%"
            />
            <h4>상품명</h4>
            <p>상품설명 & 가격</p>
          </div>
          <div className="col-md-4">
            <img
              src="https://codingapple1.github.io/shop/shoes3.jpg"
              alt=""
              width="100%"
            />
            <h4>상품명</h4>
            <p>상품설명 & 가격</p>
          </div>
        </div>
      </div>