본문 바로가기
language/JavaScript

bootstrap이란?

by 스파이디웹 2020. 6. 8.
728x90

BootStrap이란?

-Bootstrap은 빠르고 간편한 반응형 웹 디자인(responsive web design)을 위한 open-source front-end framework이다.  

 

-HTML, CSS, JavaScript로 만들어진 typography, 입력 양식(forms), 버튼, 테이블, 탭, 내비게이션, 모달, 이미지 캐러셀(image carousel) 등을 제공하며 추가적으로 JavaScript plugin들을 제공한다.

 

-미리 사용될 가능성이 높은 스타일을 미리 작성하여 class화하면 같은 코드를 중복 작성하는 비효율을 줄일 수 있으며 이는 비용 절감과 품질의 향상으로 이어진다.

 

-Bootstrap은 이처럼 미리 선언해 놓은 다양한 class와 자바스크립트 코드로 이루어진 프론트엔드 프레임워크이다.

 

-HTML에 Bootstrap의 class를 지정하는 것으로 빠르고 쉽게 일관된 스타일의 반응형 웹사이트를 작성할 수 있게 한다.

 

장점

1.Easy to useHTML과 CSS에 대한 기본 지식이 있다면 쉽게 사용할 수 있다.

2.Responsive features스마트폰, 테블릿, 데스크탑에 적합한 responsive CSS를 제공한다.

3.Mobile-first approachBootstrap 3부터 mobile-first style을 기본으로 지원한다.

4.Browser compatibility대부분의 브라우저(Chrome, Firefox, Internet Explorer, Safari, Opera)를 지원한다.

 

CDN(Contents Delivery Network)

-CDN이란 html 파일에서 참조하는 css, javascript 파일이나 다른 리소스 파일을 웹사이트 서버가 아닌 다른 공유 공간에 두고 여러 웹사이트가 참조할 수 있게 하는 서비스를 의미한다.

 

-웹사이트 구축 시, 별도 다운로드가 필요없고 페이지 로딩 속도가 빠르다는 장점이 있다. Bootstrap이나 jQuery는 많은 웹사이트에서 사용하기 때문에 CDN 서버에서 이미 다운로드했을 가능성이 크다.

 

-이미 다운로드된 리소스 파일은 캐시에서 로드되어 결국 페이지 로딩 속도가 빨라지게 된다. 하지만 CDN을 제공하는 서버가 다운된다면 손쓸 방법이 없다. 웹페이지는 엉망이 될 것이다.

 

NPM(Node Package Manager)

-npm(node package manager)은 자바스크립트 패키지 매니저이다.

-Node.js에서 사용할 수 있는 모듈들을 패키지화하여 모아둔 저장소 역할과 패키지 설치 및 관리를 위한 CLI(Command line interface)를 제공한다.

-자신이 작성한 패키지를 공개할 수도 있고 필요한 패키지를 검색하여 재사용할 수도 있다.

 

출처

poiemaweb.com/bootstrap-basics

728x90

댓글