[WebStudy] Concept

20 [부트스트랩(Bootstrap)]

Jelly-fish 2024. 1. 4. 15:59

■■■ 부트스트랩(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-데이터명』)

   ==> 디자인 라이브러리 + 선언적 스크립트 라이브러리 제공