[React - Study] 이미지 넣기

JooSehyun·2023년 2월 18일
0

[Study]

목록 보기
5/28
post-thumbnail

React - Study

이미지 넣기


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

  1. CSS에서 이미지경로
.main-bg{
  height: 300px;
  background-image: url('./img/bg.png');
  background-size: cover;
  background-position: center; 
}

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

  1. HTML에서 직접 이미지 넣기
import bg from './img/bg.png';

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

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

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

이미지가 들어온 모습


0개의 댓글