1. 외부 이미지 링크 가져오는건 똑같이 url 넣어주면 됨.
2. CSS에서 background-image: url로 가져오기
app.css에서 아래 코드처럼 경로를 넣어줌.
.main-bg {
height: 300px;
background-image: url("/src/img/F2BAC502-1A50-4268-9068-E882282EFE1E_1_105_c.jpeg");
background-size: cover;
background-position: center;
}
3. JSX 내부에서 가져오기.
위와 똑같은 이미지를 app.js에서 가져오려면,
import 이미지 from './img/F2BAC502-1A50-4268-9068-E882282EFE1E_1_105_c.jpeg';
요렇게 app.js 위에 import를 먼저 해준다 (경로 src대신 . 붙음 + ''작은따옴표만 가능함에 유의)
그리고 아래와 같이 사용
style은 {{}}내부에 object형태로 아래와 같이 넣어주고,
변수명은 아래처럼 +사이에 + 넣어준다. 그리고 '' 그로 감싸줘야 한다 (import의 ''은 여기로 오는게 아님)
<div style={{ height: '100px', backgroundImage: 'url(' + 이미지 + ')' }}></div>
center, cover가 안되어있긴 하지만 그래도 이제 뜨긴 뜬다.
4. public 폴더 이용하기.
public폴더는 발행 과정에서도 압축, 손실되지 않고 그대로 남아있는 폴더.
<img src="/logo192.png" />
public 폴더에 넣으면 public빼고 /경로 이렇게 넣어주면 끝.이지만, 추후 경로 오류가 나올수 있기에 아래와 같이 써줘야 한다.
(배포 url/다른페이지 이렇게 말고 1페이지로만 배포하는 경우엔 위와 같이 해도 됨)
<img src={process.env.PUBLIC_URL + '/logo192.png'} />
----
col 의 md, lg, sm 는 창 크기를 의미하고,
md={숫자}는 해당 창 크기에서 12분의 몇을 차지할건지 설정함.
import { Button, Navbar, Nav, Container, Row, Col } from 'react-bootstrap';
import 'bootstrap/dist/css/bootstrap.min.css';
import './App.css';
import Card from 'react-bootstrap/Card';
import ListGroup from 'react-bootstrap/ListGroup';
import 이미지 from './img/F2BAC502-1A50-4268-9068-E882282EFE1E_1_105_c.jpeg';
import Image from 'react-bootstrap/Image';
import CardGroup from 'react-bootstrap/CardGroup';
function App() {
return (
<div className="App">
<Container>
<Row>
<Col lg={3} md={4} className='col'> <Card style={{ width: '18rem' }}>
<Card.Img variant="top" src="https://codingapple1.github.io/shop/shoes2.jpg" />
<Card.Body>
<Card.Title>Card Title</Card.Title>
<Card.Text>
Some quick example text to build on the card title and make up the
bulk of the card's content.
</Card.Text>
<Button variant="primary">Go somewhere</Button>
</Card.Body>
</Card>
</Col>
<Col lg={3} md={4} className='col'> <Card style={{ width: '18rem' }}>
<Card.Img variant="top" src="https://codingapple1.github.io/shop/shoes1.jpg" />
<Card.Body>
<Card.Title>Card Title</Card.Title>
<Card.Text>
Some quick example text to build on the card title and make up the
bulk of the card's content.
</Card.Text>
<Button variant="primary">Go somewhere</Button>
</Card.Body>
</Card></Col>
<Col lg={3} md={4} className='col'> <Card style={{ width: '18rem' }}>
<Card.Img variant="top" src="https://codingapple1.github.io/shop/shoes3.jpg" />
<Card.Body>
<Card.Title>Card Title</Card.Title>
<Card.Text>
Some quick example text to build on the card title and make up the
bulk of the card's content.
</Card.Text>
<Button variant="primary">Go somewhere</Button>
</Card.Body>
</Card></Col>
<Col lg={3} md={4} className='col'> <Card style={{ width: '18rem' }}>
<Card.Img variant="top" src="https://codingapple1.github.io/shop/shoes1.jpg" />
<Card.Body>
<Card.Title>Card Title</Card.Title>
<Card.Text>
Some quick example text to build on the card title and make up the
bulk of the card's content.
</Card.Text>
<Button variant="primary">Go somewhere</Button>
</Card.Body>
</Card></Col>
</Row>
</Container>
</div>
);
}
export default App;
<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>