Bootstrap
강력하고 확장 가능하며 기능이 풍부한 프론트엔드 툴킷. Sass로 빌드 및 커스터마이징하고, 사전 빌드된 그리드 시스템 및 구성 요소를 활용하고, 강력한 JavaScript 플러그인으로 프로젝트에 생기를 불어넣습니다.
부트스트랩(Bootstrap)은 웹사이트를 쉽게 만들 수 있게 도와주는 CSS, JS 프레임워크이다. 하나의 코드로 휴대폰, 태블릿, 데스크탑까지 다양한 기기에서 작동하게 만들 수 있으며, 다양한 기능을 제공하여 사용자가 쉽게 웹사이트를 제작, 유지, 보수할 수 있도록 도와준다.
트위터에서 시작된 오픈 소스 프론트엔드 프레임워크. 시작은 디자이너 한명과 트위터의 한 개발자였지만 지금은 트위터에서 주도적으로 개발하고 있지는 않다. 트위터에서 사용하는 각종 레이아웃, 버튼, 입력창 등의 디자인과 기능을 CSS와 JavaScript로 만들어 놓은 것이며, 초창기에는 웹 디자이너나 개발자 사이에서 웹 디자인의 혁명이라고 불릴 정도로 폭발적인 반응을 얻었던 프레임워크이다.
장점
부트스트랩 프레임워크는 글자, 인용문, 목록, 표, 입력폼, 버튼, 이미지, 아이콘 등의 자잘한 것뿐만 아니라, 드롭다운 메뉴, 내비게이션 바, 버튼, 탭, 리스트, 페이지 이동 바, 알림 메시지, 썸네일, 진행 바 등의 웹 페이지에서 많이 쓰이는 요소를 거의 전부 내장하고 있다. 이 때문에 웬만한 웹 페이지는 부트스트랩의 CSS와 JavaScript 관련 사항만 설치하고 미리 지정된 CSS 클래스나 JavaScript 함수만 불러오면 트위터에서 쓰는 것과 비슷한 디자인을 순식간에 만들 수 있다.
PC용 디자인뿐 아니라 태블릿이나 스마트폰 같은 모바일용 디자인을 반응형으로 한번에 지원한다. 이 때문에 디자인 소요 시간이 크게 줄어들었고, 여러 웹 브라우저를 지원하기 위한 크로스 브라우징에 골머리를 썩일 필요가 없어졌다.
오픈소스.
단점
사전 정의된 디자인이 있다보니 비슷한 디자인의 페이지가 양산될 수 있다.
시작하기
- 프로젝트 최상위 폴더에 index.html file파일을 생성해주세요. 그리고 모바일에서의 적절한 반응형 동작을 위해 <meta name="viewport">를 넣어주세요.
- Bootstrap의 CSS와 JS를 포함시켜주세요. CSS를 위해서 <head>에 <link> 태그를 추가시켜주고, JavaScript 번들 (드롭다운, 팝오버 및 툴팁 위치 지정을 위한 Popper 포함)을 위해서 </body> 전에 <script> 태그를 삽입해주세요.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap demo</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
</head>
<body>
<h1>Hello, world!</h1>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL+jjXkk+Q2h455rYXK/7HAuoJl+0I4" crossorigin="anonymous"></script>
</body>
</html>주의할 점
- HTML5 doctype: Bootstrap은 HTML5 doctype의 사용을 필요로 한다. 이것이 없다면 약간 맛이 간 불완전한 스타일을 볼 수 있다.
- 반응형 meta 태그: Bootstrap은 모바일 우선으로 개발되기 때문에 모바일 기기에 먼저 코드를 최적화한 다음 CSS 미디어 쿼리를 사용해서 필요에 따라 컴포넌트를 확장하고 있다. 모든 장치에서 올바를 렌더링 및 터치 확대 조절을 보장하려면 에 반응형 뷰포트 메타 태그를 추가하자.
- Box-sizing: CSS에서 보다 간단한 크기 조절을 위해서 우리는 content-box에서 border-box까지 전역 box-sizing 값을 사용하고 있다. 이렇게 하면 padding이 요소의 최종 계산된 너비에 영향을 미치지는 않지만 Google Maps나 Google Custom Search Engine같은 서드 파티 소프트웨어에서 문제가 발생할 수 있다.
