20 [부트스트랩(Bootstrap)]
■■■ 부트스트랩(Bootstrap) ■■■
○ 웹 개발의 흐름
(웹 어플리케이션)
홈페이지 ----------> 웹 사이트 ----------> 웹 서비스 ----------> 웹 앱
- 읽기 위주의 - 쓰기 가능한 - 기능성 - 실시간
정적 콘텐츠 동적 콘텐츠 개발 생산성 상호작용
- HTML - CGI & - MVC 서버 - 경량 서버
제작도구 서버 페이지 프레임워크 프레임워크
+ +
AJAX 툴킷 프론트엔드
프레임워크
★ CGI(Common Gateway Interface) : 공용 게이트웨이 인터페이스
웹 서버 상에서 사용자 프로그램을 동작시키기 위한 조합이다.
(프로그램을 실행 시킬때마다 프로세스를 발생시키는 것.
이것을 개선하기 위해 CGI 확장을 쓴 것이다. JSP, Servlet...)
★ 프레임워크(Framework) : 환경, 틀, 약속
★ CDN : 네트워크를 통해서 라이브러리를 배달받아서 쓰는 방법
○ 부트스트랩 개요
- 트위터(Twiter)에서 오픈소스로 공개한 웹 프론트엔드 개발 도구
→ 트위터 개발팀에서 제작
- 트위터(Twiter) 개발 과정 중 일관성 문제가 발생하여
내부 프로젝트 형태로 시작
- 공식 홈페이지
http://getbootstrap.com/
※ 부트스트랩에 포함되어 있는 플러그인들은 제이쿼리 기반으로 동작한다.
따라서 이 플러그인이 정상적으로 작동하기 위해서는 제이쿼리를 먼저
참조할 수 있도록 코드를 구성해야 한다.
(제이쿼리 라이브러리 참조 구문 구성)
※ 현재 부트스트랩은 MIT 라이센스를 따르고 있다.
MIT 라이센스는 메사추세츠 공과대학교(MIT)를 기원으로 하는
소프트웨어 라이센스 중 가장 대표적인 것이다.
X11 License 또는 X License 로 표기되기도 한다.
매우 제한이 느슨한 라이센스라고 할 수 있다.
○ 부트스트랩의 사용 목적
- 생산성
·브라우저 환경에 따라 복잡한 cross browsing 자업 부담 경감
(ex. 요소의 여백 정책은 브라우저마다 다름)
·반응형 디자인(Responsive Design) 적용 용이
- 디자인 향상
·적은 노력으로 특정 수준의 보기좋은(?) 화면 구성이 가능.
(CSS → 기본 태그 + 클래스 제공)
- 웹 표준을 준수
○ 부트스트랩의 특징
- 스크립트 제어
·jQuery UI 기능이 겹침(단, API가 다름)
·선언적 방식(check~!!!)
→ HTML5 새로 추가된 속성과 유사
(사용자 정의 속성 → 『data-데이터명』)
==> 디자인 라이브러리 + 선언적 스크립트 라이브러리 제공