이미지 삽입

background image

<div className="main-bg"></div>

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

• div 태그에 이미지를 넣어 메인 배너로 활용할 수 있다
  - background-image: url에 원하는 이미지 경로를 입력
  - background-size: 이미지가 어떤 형태로 자동 맞춤 될 것인지 선택, cover는 이미지가 잘리더라도 여백 없이 채워주고 contain은 여백이 있더라도 이미지가 잘리지 않도록 채워준다
  - background-position: cover 속성일 경우 이미지의 어느 위치를 기준으로 이미지를 맞출 건지 정해주는 속성, default로는 왼쪽 상단을 기준으로 하고 center로 바꿀 경우 가운데를 기준점으로 이미지가 채워진다
• 참고 HTML/CSS background-image

image import

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

function App() {
    return (
        <div className="app">
            <div className="main-bg" style={{ backgroundImage: 'url(' + bg + ')' }}>
        </div>
    )
}

• 위와 같이 bg.png를 import해 style 속성으로 넣어주는 방법도 가능하다

img src

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

function App() {
    return (
        <div className="app">
            <img src={bg} width="100%"/>
            <img src="https://codingapple1.github.io/shop/shoes1.jpg" width="80%" />
        </div>
    )
}

• HTML과 마찬가지로 img src 속성을 통해 이미지 경로를 삽입해 주는 방법도 가능하다
  - 상대 경로는 import 후 src={이미지명}, 절대 경로는 url 그대로 넣어주면 된다
  

Public 경로

function App(){
    return (
        <div className="app">
            <img src="/image.png" />
            <img src={process.env.PUBLIC_URL + '/image.png'} />
        </div>
    )
}

• 여러 가지 수정이 필요 없는 static file은 public 폴더에 보관해도 되는데(build 시 압축이 필요 없는 image, txt, json 등의 파일들), public 폴더의 파일들은 build 시 그대로 보존된다
• public 폴더에 저장한 이미지 파일을 사용할 땐 처럼 /이미지경로 로 사용하면 되며, 따로 import가 필요하지 않다
• 권장하는 public 경로 사용 방법은 src={process.env.PUBLIC_URL} 을 앞에 불여주는 것인데, ~.com 경로에 리액트 페이지를 배포할 땐 상관 없지만 ~.com/page 경로에 배포할 때는 /image.png 로 사용하면 경로를 찾지 못할 수 있어 상대적인 public 경로를 추가해주는 것이 좋다