[React] 홈 화면에 이미지를 넣어보자📸

궁금하신 점이나 고칠 부분이 있다면 언제든지 댓글 남겨주세요!

👇아래의 링크를 통해 공부 후 작성되었습니다.👇
이미지 적용
이미지CSS

원래 처음에 배너를 만들고 리액트Router 관련 공부를 하다가,
만들고 있던 홈페이지에 멋있는 이미지를 넣어서 이쁜 홈화면을 적용시켜 보고싶어졌다.

바로 적용시켜보자!

생각보다 삽질을 오래했다...

이미지를 찾아올 경로 파일 생성하기

src폴더에서 images폴더를 만들어주고 거기다 사용할 이미지파일 2개를 담았다.

원래 계획은 이미지 파일을 components 폴더의 Home.js에다가 import 시켜서 적용할 계획이었는데..
이상하게 경로 관련 문제가 꼬여서 그냥 App.js에 넣기로 했다.

리액트에서 이미지사용

리액트에서 이미지를 사용할때는 <img> 태그를 이용해서 사용할수 있다.

방법은 2가지인데

public 폴더에 저장후 상대경로 사용

src 폴더에 저장후 import 하기

🚩
절대경로와 상대경로의 차이점은 내가 원하는 곳을 간다고 생각했을때
절대경로는 가장 상위에서 찾아서 내려가는 방법이고,
상대경로는 내가 있는 위치를 기준으로 원하는 곳을 찾아가는 방법이다.

여기서 나는 src폴더에서 images폴더에 담은 후 사용했기때문에 2번째 방법을 이용했다.

(_첫번째 방법은 처음 파일 생성하면 나오는 로고가 나오는 이미지 방식이 같기때문에 넘어갈게요..)

src폴더에서 이미지 가져오기

import surf라는 키워드로 경로를 지정해줬고

App.js

import surf from "./images/two_board.jpg";

const App = (props) => {
  return (
    <div>
      <Header />
      <div className="HomeImageContainer">
        <img src={surf} alt="Logo" />
      </div>
      {props.children}
      <div className="Home">
        <Home title="Hello" />
      </div>
    </div>
  );
};

export default App;

css파일은 적용하지 않고 먼저 결과만 보기로 했다.

참고로 메뉴는 내가 날린거임!

이제 CSS를 적용해보자

CSS 적용해보기

App.css

.HomeImageContainer {
  margin-left: 20px;
  margin-right: 20px;
  width: auto;
  height: 700px;
  overflow: hidden;
}

.HomeImageContainer > img {
}

여 하나 썰고, 여기도 하나 썰고, 어?
(현실 CSS인가...)

CSS파일로 크기 조금 줄이고 옆부분 공간을 비워주니까 조금 살아보인다.
사실 이미지를 몇개넣어서 넘기는 것도 해보고싶은데 그거는 다음에 해보자!
추가로 Home.js로 다시적용하는것도 수정해야할듯..
오늘은 여기까지! 🖐