React - Study

이미지 넣기

---

🕵️이미지 넣는 방법은 두가지가 있다.

1. CSS에서 이미지경로

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

이런식으로 background-image 를 이용하여 url 파일경로를 넣어 이미지를 넣는 방법이 있고

2. HTML에서 직접 이미지 넣기

import bg from './img/bg.png';

이렇게 파일을 직접 이름을 지어주고 이미지 경로를 입력해 만들어준다.

<div className='main-bg' style={{backgroundImage:'url('+bg+')'}}></div>

해당 요소(태그)에 style 속성을 활용하여 backgroundImage 를 하여 위에 이름을 지어주고 import 시킨 이름을 자바스크립트 문법 'url('+bg+')' 를 넣어준다.

이미지가 들어온 모습

---