[Bootstrap] #1 부트스트랩이란?

1. 부트스트랩(Bootstrap)의 TMI

 

 과거에 스마트폰이 생겨나고 그에 필요한 화면이 필요했을 때, 많은 사이트들은 데스크탑용, 그리고 모바일용의 사이트를 따로 제작을 했었다.

 그러다가 모바일로 사이트에 접속하는 비율이 압도적으로 늘어나면서 사이트의 방향에 따라 사람들은 데스크탑용 사이트를 포기하는 시점까지 이르렀다.

 포맷에 따라 구현해야하는 환경이 너무나 다른 이 웹 디자인의 한계를 해결하기 위해 등장한 것이 바로 부트스트랩이다. 

 

 부트스트랩은 트위터의 개발자와 UI 디자니어가 개발한 프레임워크이다.

 트위터에서 사용하는 각종 레이아웃, 버튼, 입력창 등의 디자인을 CSS와 Javascript로 만들어 놓은 것이다.

 웹 디자인너나 개발자 사이에서는 웹 디자인의 혁명이라고 불릴 정도로 폭발적인 반응을 얻는 프레임워크이다.

 

 여기서 ‘프레임워크’라고 하는 것은 재사용이 가능한 요소들이 집합되어 있으며, 정해진 구조와 틀 안에서 이것들을 확장이 가능한 기반 코드로 이루어 짐을 뜻한다.

 jQuery는 라이브러리이고 부트스트랩은 프레임워크이다.

 따라서 ‘부트스트랩 프레임워크에서 jQuery 라이브러리를 사용할 수 있다.’ 라고 할 수 있다.

 

 부트스트랩에 열광하는 이유는 글자, 인용문, 목록, 표, 입력폼, 버튼, 이미지, 아이콘 등의 자잘한 것 뿐만 아니라 드롭다운 메뉴, 버튼, 탭, 리스트, 메뉴바, 페이지 이동 바, 알림 메시지, 썸네일, 진행 바 등의 웹 페이지에서 많이 쓰이는 요소를 거의 전부 내장하고 있고 입맛에 따라 재사용할 수 있기 때문이다.

 이 때문에 웬만한 웹 페이지는 부트스트랩의 CSS와 JavaScript, 관련 이미지만 설치하고 미리 지정된 CSS 클래스나 JavaScript 함수만 불러오면 트위터에서 쓰는 것과 비슷한 디자인이 바로 만들어진다. 게다가 PC용 디자인 뿐만 아니라 태블릿 스마트폰 같은 모바일 디자인도 지원한다.

 

 이 때문에 디자인을 할 시간이 크게 줄어들고 여러 웹 브라우저를 지원하기 위한 크로스 브라우징에 골머리를 썩일 필요가 없다. 크로스 브라우징을 위한 각종 핵도 들어 있기 때문이다.

 거기다 웹 브라우저 크기에 따라 자동으로 정렬되는 ‘그리드 시스템’을 채용하고 있기 때문에 웹 페이지를 데스크탑, 태블릿, 스마트폰 모두에서 무리없이 보게 만들 수 있다. 즉 ‘반응형 웹 디자인’을 지원한다.

 추가적으로 부트스트랩은 오픈소스이며, 상업적으로 이용이 가능하다.

 

 

2. 부트스트랩 시작하기

 

 참조 : https://www.w3schools.com/bootstrap/bootstrap_ver.asp

W3Schools Free Online Web Tutorials

 

● [Bootstrap]
- HTML, CSS, JavaScript framework
- Bootstrap 3, 4, 5가 있다
- 웹페이지 개발시 frontend(UI, View)단을 구현하기 위한 무료 오픈소스
- 주로 CSS, 레이아웃, 반응형 웹 구현시 많이 사용한다

 

 부트스트랩을 사용하면 아래와 같이 여러 환경에서 페이지를 최적화하여 출력시킬 수 있다.

 

 

 이렇게 부트스트랩을 사용하려면 반응형 웹에 적용시킬 수 있도록 짜여져있는 파일(.css와 .js)이 필요하다. 

 이 파일들은 1) 다운로드를 받거나 2) CDN(Content Delivery Network) 방식으로 링크를 걸어서 사용한다.

 

1) 다운로드

 다운로드 링크 : https://getbootstrap.com/docs/5.2/getting-started/download/

Download

 사이트에 들어가면 부트스트랩의 버전을 선택할 수도 있다.

 

2) CDN(Content Delivery Network) 방식으로 링크

 아래는 CDN 방식으로 링크를 걸기 위한 코드이다(22.09.29. 기준 최신버전).

 다음의 사이트에 접속하여 최신 버전의 CDN 주소를 알 수 있다 : https://www.w3schools.com/bootstrap/bootstrap_get_started.asp

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">

<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>

<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>

 

 필자는 더 편한 방식인 CDN 방식으로 계속 사용하려한다.

 그리고 Bootstrap3버전을 중점으로 진행하려 한다.

 

 부트스트랩을 왜 쓸까!

 이쁘게 웹사이트를 꾸미려고?

 그렇기도 하겠지만 더 중요한 이유는 반응형 웹을 구현하기 위함이다.

 그러기 위해서 부트스트랩을 쓰기 위해선 메타* 태그를 한 줄 또 추가해야한다.

<meta name="viewport" content="width=device-width, initial-scale=1">

 

* 메타 태그가 뭐야? https://ddcloud.tistory.com/38

[HTML] #5 Meta 태그 알아보기

 

 이제 다음부턴 부트스트랩을 사용하는 방법에 대해 차근차근 알아보려한다.