모래알 반응형웹

Bootstrap(부트스트랩) 4.0 소개, 다운로드 및 파일 구성 본문

부트스트랩

Bootstrap(부트스트랩) 4.0 소개, 다운로드 및 파일 구성

전상하 2018. 3. 28. 13:53


부트스트랩(Bootstrap)은 트위터의 UI 디자이너 Mark Otto(@mdo)와 개발자 Jacob Thornton(@fat)이 만든 오픈소스 프런트 엔드(front-end) 툴킷이다. '프런트 엔드'란 사용자와의 직접적인 인터페이스를 말하는 것으로 알기쉽게 말하면 홈페이지가 어떻게 보여질 것인가를 정하는 기능을 모은 것이다. 


부트스트랩이 제공하는 Grid Layout System(격자형 레이아웃 시스템: 12열의 격자로 이루어져 있음)은 반응형 웹디자인을 가능하게 하는 기본적인 구성요소이다. 


뿐만 아니라 웹페이지를 구성하는 메뉴, 타이포그래피, 표, 입력폼, 버튼 심지어 아이콘까지 이미지가 아닌 텍스트 형식으로 표현할 수 있도록 하는 요소들을 제공한다.


여기에 다양한 JQUERY 플러그인까지 활용하여 웹페이지에 역동적 기능을 부여할 수 있다.


부트스트랩 (Bootstrap)이 적용되면

1) 데스크탑, 태블릿, 스마트폰 브라우저 모두에서 잘 보이고 동작하는 홈페이지 (반응형 홈페이지)

2) HTML5, CSS3, JQUERY, 자바스크립트 조합의 효율적인 UI 구성 

3) 깔끔하고 잘 정돈된 느낌의 구성요소들 - 표, 입력폼, 버튼, 아이콘 등

4) Youtube 영상까지 모두 반응형으로


부트스트랩 (Bootstrap) 다운로드

https://getbootstrap.com/

먼저 부트스트랩을 다운로드 받는다.



다운로드 페이지에서 컴파일된 파일과 원본 파일(Source files)을 다운로드 받을 수 있는데 , 나중에 작업을 하다보면 부트스트랩 원본 CSS를 수정해야할 일이 있으므로 원본 파일을 다운로드 받는다.

다운로드 받은 파일의 압축을 풀면 부트스트랩을 사용하기에 꼭 필요한 파일 외의 파일 들이 엄청 많다.
부트스트랩을 활용하기 위해 필요한 파일은 아래의 폴더에 모두 들어있다.
bootstrap/ 
      ├── dist/ 
                  ├── css/ 
                  └── js/ 
      ├── js/
      └── scss/


해당 폴더와 포함된 파일들을 내 작업 폴더 안에 복사한다.



Comments