INDEX

1. 대문만들기 & CSS파일에서 이미지 넣기
2. html에서 이미지 넣을 땐
3. 상품목록 레이아웃 만들기
4. public 폴더 이용할 수도 있음

1. 대문만들기 & CSS파일에서 이미지 넣기

   <aside> 💡 강의에서 사용하는 사진들

   https://codingapple1.github.io/shop/shoes1.jpg

   https://codingapple1.github.io/shop/shoes2.jpg

   https://codingapple1.github.io/shop/shoes3.jpg

   </aside>

   1-1. 대문만들기

   .main-bg {
     height: 300px;
     background-image: url('./img/bg.png');
     background-size: cover;
     background-position: center;
   }
   

   import './App.css';
   import { Navbar, Container, Nav } from 'react-bootstrap';
   
   function App() {
     return (
       <>
         <Navbar bg="dark" variant="dark">
           <Container>
             <Navbar.Brand href="/">Navbar</Navbar.Brand>
             <Nav className="me-auto">
               <Nav.Link href="/">Home</Nav.Link>
               <Nav.Link href="/cart">Cart</Nav.Link>
             </Nav>
           </Container>
         </Navbar>
         <div className='main-bg'></div>
       </>
     );
   }
   
   export default App;
   

   

2. 3등분하기

   import './App.css';
   import { Navbar, Container, Nav } from 'react-bootstrap';
   
   function App() {
     return (
       <>
         <Navbar bg="dark" variant="dark">
           <Container>
             <Navbar.Brand href="/">Navbar</Navbar.Brand>
             <Nav className="me-auto">
               <Nav.Link href="/">Home</Nav.Link>
               <Nav.Link href="/cart">Cart</Nav.Link>
             </Nav>
           </Container>
         </Navbar>
         **<div className='main-bg'></div>
         <div className="container">
           <div className="row">
             <div className="col-md-4">안녕</div>
             <div className="col-md-4">안녕</div>
             <div className="col-md-4">안녕</div>
           </div>
         </div>**
       </>
     );
   }
   
   export default App;
   

   

   기기의 사이즈에 따라 3등분을 자동으로 해줌

   import './App.css';
   import { Navbar, Container, Nav } from 'react-bootstrap';
   
   function App() {
     return (
       <div className='App'>
         <Navbar bg="dark" variant="dark">
           <Container>
             <Navbar.Brand href="/">Navbar</Navbar.Brand>
             <Nav className="me-auto">
               <Nav.Link href="/">Home</Nav.Link>
               <Nav.Link href="/cart">Cart</Nav.Link>
             </Nav>
           </Container>
         </Navbar>
         <div className='main-bg'></div>
         **<div className="container">
           <div className="row">
             <div className="col-md-4">
               <img src="<https://codingapple1.github.io/shop/shoes1.jpg>" width="80%" />
               <h4>상품명</h4>
               <p>상품정보</p>
             </div>
             <div className="col-md-4">
               <img src="<https://codingapple1.github.io/shop/shoes2.jpg>" width="80%" />
               <h4>상품명</h4>
               <p>상품정보</p>
             </div>
             <div className="col-md-4">
               <img src="<https://codingapple1.github.io/shop/shoes3.jpg>" width="80%" />
               <h4>상품명</h4>
               <p>상품정보</p>
             </div>
           </div>
         </div>**
       </div>
     );
   }
   
   export default App;
   

   

3. public 폴더 활용

   import './App.css';
   import { Navbar, Container, Nav } from 'react-bootstrap';
   
   function App() {
     return (
       <div className='App'>
         <Navbar bg="dark" variant="dark">
           <Container>
             <Navbar.Brand href="/">Navbar</Navbar.Brand>
             <Nav className="me-auto">
               <Nav.Link href="/">Home</Nav.Link>
               <Nav.Link href="/cart">Cart</Nav.Link>
             </Nav>
           </Container>
         </Navbar>
         <div className='main-bg'></div>
         <div className="container">
           <div className="row">
             <div className="col-md-4">
               <img **src={process.env.PUBLIC_URL + '/img/shoes1.jpg'}** width="80%" />
               <h4>상품명</h4>
               <p>상품정보</p>
             </div>
             <div className="col-md-4">
               <img **src={process.env.PUBLIC_URL + '/img/shoes2.jpg'}** width="80%" />
               <h4>상품명</h4>
               <p>상품정보</p>
             </div>
             <div className="col-md-4">
               <img **src={process.env.PUBLIC_URL + '/img/shoes3.jpg'}** width="80%" />
               <h4>상품명</h4>
               <p>상품정보</p>
             </div>
           </div>
         </div>
       </div>
     );
   }
   
   export default App;