[Book-IT][코로나보드 실전 웹 서비스][MEMO][Chapter06:반응형 웹 디자인하기, 부트스트랩]

[개발PC : MacBook]

Chapter06) 반응형 웹 디자인하기, 부트스트랩

학습 목표 : 부트스크랩이 무엇인지 알아보고 자주 사용하는 부트스트랩 컴포넌트들을 살펴봅시다.

부트스트랩의 그리드 시스템을 이용하여 반응형 디자인의 웹페이지를 만드는 방법을 이해합니다.

부트스트랩(Bootstrap)은 프론트엔드 개발을 쉽고 빠르게 하는 프레임워크입니다.

각종 레이아웃, 입력창, 버튼 같은 HTML UI 컴포넌트를 CSS와 자바스크립트를 이용하여 쓰기 편하게 제공합니다.

[부트스트랩 프로젝트에 추가하기]

coronaboard-web 디렉터리로 이동한 다음 아래 명령어로 필요한 라이브러리를 설치합니다.

$ npm install bootstrap@4.6.0 react-bootstrap@1.6.1 react-select@4.3.1

bootstrap : 부트스트랩 라이브러리입니다.
react-bootstrap : 부트스트랩은 정적인 HTML 페이지에 적용하기 좋도록 개발되어 있어서 리액트로 웹페이지를 만들 때 적용하기가 까다롭습니다. react-bootstrap은 부트스크랩에서 제공하는 UI 컴포넌트와 기능을 리액트에서 쓰기 편하도록 리액트 컴포넌트 형태로 감싸주는 라이브러리입니다.
react-select : 부트스트랩에서 많은 UI 컴포넌트를 제공하지만 아쉽게도 기본 제공되는 선택 상자(셀렉트 혹은 콤보 박스라고 부르기도 합니다.) 기능이 매우 제한적입니다. 예를 들어 선택 가능한 목록 중에서 원하는 항목을 검색해서 선택한다거나, 하나의 선택 상자에서 항목 여러 개를 동시에 선택하는 기능을 제공하지 않습니다. react-select를 사용하면 이런 기능을 가진 선택 상자를 쉽게 구현할 수 있습니다.

[부트스트랩 UI 컴포넌트 소개]

P226~238

[그리스 시스템으로 반응형 현황판 만들기]

p239~