목표
이미지 태그 사용법을 익힌다.
URL 지정하는 법
1. CSS에서 url을 지정한다.
1) CSS
.main-bg{
height: 400px;
background-image: url('./img/apple.PNG');
background-size: cover;
background-position: center;
}
2) App.js
<div className="main-bg"></div>
2. htm 태그 내에서 src 속성을 사용
import appleImagePath from './img/apple.PNG';
<div className="main-bg" style={{backgroundImage : 'url('+appleImagePath+')'}}></div>
url 괄호 내부에 들어가는 경로를 입력해주기 위해 양단에 작음 따옴표와 덧셈 부호가 들어간다.
3. img 태그내 src 속성에 이미지 저장소 url 입력
<img src="https://abc~~~~.~~~/shop/shoes1.jpg" width="80%"/>
이미지 경로 설정법
1. public 폴더에 이미지가 있는 경우
process.env.PUBLIC_URL+"/logo192.png"
2. 프로젝트 폴더의 하위 폴더에 이미지가 있는 경우
'./img/apple.PNG'
img는 프로젝트 폴더 하위에 있는 폴더다
출처 : 코딩애플_React 기초부터 쇼핑몰 프로젝트까지!
https://codingapple.com/course/react-basic/
'React > 코딩애플 강의' 카테고리의 다른 글
[React] react-router-dom 라이브러리 (0) | 2023.07.03 |
---|---|
[React] 외부 데이터를 받아오는 import, export (0) | 2023.07.03 |
[React] Bootstrap 사용하기 (0) | 2023.07.03 |
[React] state Array 삽입 및 삭제 (0) | 2023.07.03 |
[React] 이벤트 버블링 방지( setPropagation() ) (0) | 2023.07.03 |