[Instagram] 프로젝트 설정(4) - Bootstrap 적용 + reset.css

[ Bootstrap ]

• 웹사이트를 쉽게 만들 수 있게 도와주는 HTML, CSS, JS 프레임워크
• 하나의 CSS로 휴대폰, 태블릿, 데스크탑까지 다양한 기기에서 동작
• 다양한 기능을 제공하여 사용자가 쉽게 웹사이트를 제작, 유지, 보수할 수 있도록 도와준다.

 

 

- Bootstrap 적용하는 이유. Why ?

• 디자이너 없이 웹사이트 개발 가능
• 다양한 인터페이스 제공
• 반응형 웹 제공

 

- 프로젝트에 Bootstrap 적용

• Bootstrap 설치

npm i bootstrap

 

• Bootstrap Import & Customize
  • Bootstrap에 정의되어 있는 변수의 값을 재정의하여 사용할 수 있다.
  • Bootstrap scss Import 하여 Bootstrap Components 등을 사용한다.

// Default variable overrides
$primary: #fdc000;

$container-max-widths: (
  sm: 540px,
  md: 704px,
  lg: 924px,
  xl: 1140px,
  xxl: 1364px,
);

// Required
@import '../../node_modules/bootstrap/scss/functions';
@import '../../node_modules/bootstrap/scss/variables';
@import '../../node_modules/bootstrap/scss/mixins';

@import '../../node_modules/bootstrap/scss/bootstrap';

---

[ reset.css ]

• 브라우저마다 설정 되어있는 기본 스타일 초기화

https://www.jsdelivr.com/package/npm/reset-css

jsDelivr - A free, fast, and reliable CDN for Open Source

---

[ 참고자료 ]

https://getbootstrap.com/

Bootstrap

https://getbootstrap.com/docs/5.0/customize/sass/

Sass