부트스트랩(Bootstrap)
부트스트랩은 트위터의 개발을 했었던 Mark Otto와 Jacob Thornton이 함께 개발한 것으로 2011년 8월 깃허브에 오픈 소스로 공개되면서 등장한 HTML, CSS, JS 프레임워크입니다. 즉, 웹 페이지를 쉽게 만들 수 있게 해주는 도구들의 모임입니다.
각종 버튼, 배너, 아이콘 등 웹 디자인 기능 요소들을 JavaScript와 CSS로 만들어 놓아 많은 웹 개발자 및 디자이너들에게서 큰 반응을 얻었습니다.
과거에는 웹 개발 시 여러 개발자들이 개발하면서 병합하는 과정에서 많은 어려움을 겪었는데요. 공동의 작업을 하더라도 개개인의 작업물이 다른 결과물로 나타났기 때문입니다. 부트스트랩이 이러한 어려움을 상당 부분 해결해주고 있습니다.
부트스트랩은 SASS 스타일 시트를 기반으로 하며, 재사용이 가능한 컴포넌트(버튼, 드롭다운, 탭, 라벨 등)이 있습니다. 이러한 컴포넌트들은 CSS가 사전에 지정되어 있어 코드가 단순해지고 개발기간을 줄여줍니다.
부트스트랩 이용 방법
공식홈페이지(https://getbootstrap.com/)에서 부트스트랩을 다운로드하여 CSS 및 JavaScript 코드를 얻어 이용하거나,
CDN(Content Delivery Network) 방식으로 코드에 링크를 달아주는 방법이 있습니다.
CDN 방식을 사용하는 경우 인터넷이 연결되어 있는 환경에서만 이용이 가능하지만 다운로드를 할 경우 인터넷이 연결할 수 없는 환경에서도 이용할 수 있으니 알아두시기 바랍니다.
CSS CDN 링크의 경우 작성하는 html 파일 내 <head> </head> 사이에 입력하고,
JS CDN 링크의 경우 작성하는 html 파일 내 <body> </body>에서 </body> 바로 위에 입력해 주시면 됩니다.
<!-- CSS CDN 링크 -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.0/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-KyZXEAg3QhqLMpG8r+8fhAXLRk2vvoC2f3B09zVXn8CA5QIVfZOJ3BCsw2P0p/We"
crossorigin="anonymous">
<!-- JavaScript CDN 링크 -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.0/dist/js/bootstrap.bundle.min.js"
integrity="sha384-U1DAWAznBHeqEIlVSCgzq+c9gqGAJn5c/t99JyeKa9xxaYpSvHU5awsuZVVFIhvj"
crossorigin="anonymous"></script>또한, 부트스트랩은 모바일 우선으로 개발되어 먼저 모바일 장치용 코드를 최적화한 뒤 미디어 쿼리를 사용하여 필요에 따라 구성요소를 확장하는 전략을 이용하고 있습니다. 따라서 반응형 뷰포트 메타 태그를 <head></head> 사이에 포함해 주어야 합니다.
<meta name="viewport" content="width=device-width, initial-scale=1">
부트스트랩 start template 예시는 다음과 같습니다.
<!doctype html>
<html lang="ko">
<head>
<!-- 메타 태그 -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Bootstrap CSS CDN -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.0/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-KyZXEAg3QhqLMpG8r+8fhAXLRk2vvoC2f3B09zVXn8CA5QIVfZOJ3BCsw2P0p/We"
crossorigin="anonymous">
<title>Hello, world!</title>
</head>
<body>
<h1>Hello, world!</h1>
<!-- Bootstrap JS CDN -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.0/dist/js/bootstrap.bundle.min.js"'
integrity="sha384-U1DAWAznBHeqEIlVSCgzq+c9gqGAJn5c/t99JyeKa9xxaYpSvHU5awsuZVVFIhvj"
crossorigin="anonymous"></script>
</body>
</html>부트스트랩도 여러 버전이 존재하는데 게시글 작성 기준 최신버전은 부트스트랩 5.1.0입니다.
각 버전마다 사소한 기능들과 구조가 달라져 충돌할 수 있으니 하나의 버전만을 사용하는 것을 추천합니다.
ex) 부트스트랩 3.x, 부트스트랩 4.x, 부트스트랩 5.x
추가적으로 부트스트랩은 상업적으로 이용이 가능하여 많은 개발과 템플릿들이 배포되고 있습니다. 따라서 필요에 따라 무료 템플릿 또는 유료 템플릿을 구하셔서 개발하면 많은 도움이 되기도 합니다.
'웹 프로그래밍(Web Programming) > Bootstrap' 카테고리의 다른 글
| [Bootstrap] 부트스트랩 버튼 색상 변경하기 (0) | 2021.09.05 |
|---|---|
| [Bootstrap] 부트스트랩 버튼 사용하기 (2) | 2021.08.29 |