리액트로 쇼핑몰 사이트 만들기 #1 상단바, 그리드, 이미지 삽입

 

 1. 부트스트랩 설치하기 

 

12. 부트스트랩

 

부트스트랩을 사용하여 상단바를 만들어보았다.

 

 

 2. 대문 사진 만들기 

 

크게 2가지 방법이 있다.

 

 1. css 파일과 함께 작성하기 

 

1-1 App.js 파일에 div 박스를 만든다.

 

1-2 대문에 넣을 이미지를 src 폴더에 저장한다.

 

1-3 App.css 파일에 아래와 같이 작성한다.

 

 

상세설명

- 여기서  background-image: url('./shoe.png');  의 괄호 안에는 저장한 이미지의 이름을 작성하고,

 

-  background-size: cover;  은 이미지를 요소를 모두 덮도록 너비 , 높이 모두 다 확대하거나 축소해서 이미지를 맞추게 된다.

-  background-position: center;  은 배경 이미지의 위치를 가운데로 맞춘다.

 

---

 

 2. js 파일 안에서 전부 작성하기 - (1) src 폴더 안에 있는 이미지를 삽입하기 

 

 

2-1  import 원하는대로작명 from 이미지 경로  를 작성한다.

 

2-2 style 태그를 추가한다. 

자바스크립트 문법을 인해 'url(mainImg)'로 하면 문자열로 인식한다.
따라서 문자열과 변수를 따로 입력하기 위해 'url(' 과 변수명과 ')' 를 따로 입력해야한다.

 

 

둘 중 어느 방법을 선택해도 이미지는 잘 나올 것이다.

 

하지만 문제가 있다. 삽입할 이미지가 여러 장이라면 import 문도 길어질 것이다. (부트스트랩과 달리 이미지 import 는 한 줄로 요약할 수 없다.)

 

 

 2. js 파일 안에서 전부 작성하기 - (2) public 폴더에 있는 이미지를 삽입하기 

 

그 문제를 해결하려면 이미지 파일을 public 파일에 저장하면 된다.

import 문은 필요없다!

<img src={process.env.PUBLIC_URL + '/이미지파일이름'}/>

 

 

 

 2. js 파일 안에서 전부 작성하기 - (3) 절대경로가 있는 이미지를 삽입하기 

 

가장 쉬운 것 같다. import 문도 필요없이 그냥 경로만 복붙해주면 된다.

<Col sm><img src="경로"/></Col>

 

 

 

---

 

 3. 세부 이미지 삽입하기 

 

1. 먼저 리액트 부트스트랩 사이트에 접속해서 "grid" 를 검색한다.

 

2. 마음에 드는 형식을 찾아 복붙해준다.

 

요걸로 선택! 텍스트나 이미지를 추가로 작성할 수도 있다.

 

완성본