[React]리액트에서 이미지 넣는 방법(background-image/size/position)

리액트에서 이미지 넣는 방법

 

CSS 파일에서 이미지 불러오기

  background-image: url("./path/to/your/image.jpg");

 

html 파일에서 이미지 불러오기

이미지를 넣어주기 위해서

상단에 이미지에 대한 경로를 설정해준다

import 사용할이름 from "./이미지파일 경로.jpg";

원하는 이름안에 이미지의 경로를 작성해주고

 

이미지를 넣어줄 태그 안에

    <div className="main-bg" style={{backgroundImage:'url(사용할이름)'}}></div>

style 속성안에 CSS 파일과 마찬가지로 backgroundImage 를 넣어주면

이미지가 뜨는 것을 확인 할 수 있다

 

문자열 안에 변수를 넣어주기 위해서 +  연산자를 이용해서

다음과 같이 코드를 작성해주었다

 

이미지 사이즈 변경하기

  background-image: url("./main-bg.jpg");
  background-size: cover;

 background-size: cover 는

배경 이미지의 크기가 가로 세로 비율을 유지하면서 전체 컨테이너를 덮도록 사이즈가 조정된다

또한 contain'', auto''와 같은 'background-size'에 다른 값을 사용하거나

'100% 100%'와 같은 특정 크기 값을 사용할 수 있다

  background-image: url("./main-bg.jpg");
  background-size: cover;

 

backgroundSize: 'contain'을 사용할 때 배경 이미지의 크기가 가로 세로 비율을 잃지 않고

컨테이너 내에 맞도록 조정되도록 지정된다

 

전체 배경 이미지가 컨테이너 내에 표시되며

컨테이너의 가로 세로 비율이 이미지의 가로 세로 비율과 다른 경우

이미지 주위에 빈 공간이 생길 수 있다

background-image: url("./main-bg.jpg");
background-size: contain;

 

auto를 사용하면 전체 비율에 맞게 이미지가 변경된다

background-image: url("./main-bg.jpg");
background-size: auto;

 

 

이미지의 기준점 변경하기( background-position)

 

원본이미지

 

기준점을 설정하지 않았을 때

 

이미지가 이렇게 보인다

이렇게 보이는 이유는 이미지의 기준점을 정해주지 않아서 나타나는 현상인데

backgroundPosition 을 사용해서

배경 이미지가 해당 그룹 내에서 나타나는 위치를 제어할 때 상당한 유연성을 얻을 수 있다

 

backgroundPosition 속성에는 center / top / bottom / left / right 와

'50% 50%'와 같은 특정 좌표를 사용하여

배경 이미지의 기준이 컨테이너의 기준에 맞추어 정렬됨

디자인에 따라 위치를 맞춤 설정할 수 있다

 

background-position: center

background-position: left;

background-position: right;

background-position: top;

background-position: bottom;