BootStrap

1. BootStrap이란?

Bootstrap은 반응형 웹페이지 제작을 위한 무료 소프트웨어이며 HTML, CSS, JS 템플릿을 모아둔 프레임워크다.

다른사람이 만들어둔 템플릿을 활용해 쉽게 디자인 및 반응형 페이지를 제작 할 수 있다.

 

 

2.부트스트랩 적용하는 방법

 

1. CDN에서 웹에서 지정된 url 가져오는 방법

<!-- 합쳐지고 최소화된 최신 CSS --> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
<!-- 부가적인 테마 -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap-theme.min.css">
<!-- 합쳐지고 최소화된 최신 자바스크립트 -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>

2. 다운로드 받은 후에 bootstrap.min.css를 적용하기

 

부트스트랩의 장점과 단점

장점

• 내부 클래스를 알고 있으면 쉽고 빠르게 여러가지 형태의 반응형 웹 페이지를 제작할 수 있다.
• 고로 생산성이 높고 반응형이기 때문에 모바일 환경에서도 대응 가능하다.

단점

• 정형화된 디자인과 기능으로 구성되어 창의적인 디자인과 기능을 구현하기 어렵다.
• 페이지 로딩 속도가 느리다 (필요없는 리소스까지 같이 로딩 (10%정도만 사용하고 90%는 안쓰임) 하기 때문)
• 부트스트랩에 익숙해 져야 한다. ( Class나 사용방법등을 배워야 함)

그래도 백엔드 개발자가 프론트를 쉽게 구성하기엔 적합하다.

 

---

용어정리

 

CDN이란?

컨텐츠 전송 네트워크(content delivery network)의 약자로 지리적으로 분산된 여러개의 서버이다.

예를들어 한국에서 어떤 파일을 받아야 하는데 미국에만 서버가 있으면 바다건너서 데이터가 오기 때문에 매우 느리다.

다른 예로는 ATM으로 돈을 뽑는 상황 등이 있겠다.

이를 해결하고자 지리적으로 여러군데 서버를 두어 해당 파일을 요청시 보다 빠르게 전송하기 위한 장치이다. 

 

 

---

References By

https://aimho.tistory.com/94

Bootstrap 소개 장단점 및 설치방법

https://velog.io/@5o_hyun/%EB%B6%80%ED%8A%B8%EC%8A%A4%ED%8A%B8%EB%9E%A9-bootstrap-%EC%9D%B4%EB%9E%80

부트스트랩 ( bootstrap ) 이란?

https://www.akamai.com/ko/our-thinking/cdn/what-is-a-cdn

콘텐츠 전송 네트워크(CDN)란? - CDN 솔루션 | Akamai