4. 쇼핑몰 웹사이트 만들기 (11) - 리액트 부트스트랩

https://react-bootstrap.netlify.app/

React Bootstrap | React Bootstrap

 

 

 

여기서 잠깐!

2개의 터미널 중 

'npm start' 터미널을 ctrl+c로 중단시킨후 위의 화면처럼 install해야한다.

'npx json-server --watch db.json --port 5000' 터미널은 중단시키지 않고 건들지 않고  실행을 유지(?)해야한다.

 

 

부트스트랩에서 쓸수있는것?

바로 layout !

한 줄에 아이템을 몇개 보여줄지 & 사이즈 등을 어떻게 할것인지?를 결정한다.

 

한 줄의 사이즈는 최대 12

if 반으로 쪼개고 싶다면... 6 6

if 3개로 쪼개고 싶다면 ... 4 4 4

if 4개로 쪼개고 싶다면 ... 3 3 3 3 

등....

 

container(라는 컴포넌트)의 역할은? 아이템이 가운데로 모이게 만들어준다.

이미지들이 너무 퍼져 있으면 사용자 유저가 한눈에 다 보기가 힘들다.

따라서 (적당히) 가운데 중앙에 있어야 보기에 편하다.

부트스트랩에서 제공해준다.

 

lg = (column이) 클  때 사이즈

 

컬럼안에 ProductCard를 (하나씩) 보여준다.

 

 

<결과>