Bootstrap
디자인 스타일 및 액션이 미리 정의된 HTML, CSS, JavaScript 파일로 구성된 프레임워크
-
Bootstrap의 장점
- 다양한 스타일 제공: 여러 템플릿이 정의되어 있어 디자인이 간편
- 쉬운 디자인 적용 및 수정: CSS 클래스명만 바꾸면 쉽게 디자인을 적용하고 수정 가능
- 반응형 디자인: 모바일 페이지를 고려한 반응형 프레임워크
- 무료 오픈 소스: 무료로 다운로드할 수 있으며, 오픈 소스이다.
- 다양한 예시 제공: 초보자도 쉽게 접근할 수 있도록 다양한 예시를 제공
-
Bootstrap의 단점
- 정형화된 디자인: 디자인 패턴이 정해져 있어 유사한 디자인이 많아질 수 있다.
- 국내 정서와의 부조화: 심플한 디자인이 국내 멀티페이지 사이트와 맞지 않을 수 있다.
- 구조 파악의 어려움: 구조 변경을 위한 프레임워크 수정 시 구조 파악이 어려울 수 있다.
- 구 브라우저 지원 미흡: 최소 IE8 이상을 지원
Bootstrap 그리드 시스템
그리드 시스템 개요
-
핵심 레이아웃 시스템: Bootstrap의 핵심 레이아웃 시스템
-
12열 구성: 총 12열로 구성. 예: 1열씩 12개, 8+4, 4+4+4, 6+6.
-
합은 12: 그리드의 합은 항상 12가 되어야 하며, 그렇지 않으면 레이아웃에 문제가 발생할 수 있다.
-
클래스 선택자 기반: 클래스 선택자를 기반으로 화면의 레이아웃을 잡아준다.
-
클래스 접두사:
- 모바일폰 (<768px): .col-xs-
- 태블릿 (>=768px): .col-sm-
- 데스크탑 (>=992px): .col-md-
- 고해상도 데스크탑 (>=1200px): .col-lg-
예제 ✍️
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- 위 3개의 메타 태그는 *반드시* head 태그의 처음에 와야합니다; 어떤 다른 콘텐츠들은 반드시 이 태그들 *다음에* 와야 합니다 -->
<title>부트스트랩</title>
<!-- 부트스트랩 -->
<link href="../css/bootstrap.min.css" rel="stylesheet">
<style>
.col-xs-1, .col-sm-1, .col-md-1, .col-lg-1,
.col-xs-2, .col-sm-2, .col-md-2, .col-lg-2,
.col-xs-3, .col-sm-3, .col-md-3, .col-lg-3,
.col-xs-4, .col-sm-4, .col-md-4, .col-lg-4,
.col-xs-5, .col-sm-5, .col-md-5, .col-lg-5,
.col-xs-6, .col-sm-6, .col-md-6, .col-lg-6,
.col-xs-7, .col-sm-7, .col-md-7, .col-lg-7,
.col-xs-8, .col-sm-8, .col-md-8, .col-lg-8,
.col-xs-9, .col-sm-9, .col-md-9, .col-lg-9,
.col-xs-10,.col-sm-10, .col-md-10, .col-lg-10,
.col-xs-11,.col-sm-11, .col-md-11, .col-lg-11,
.col-xs-12,.col-sm-12, .col-md-12, .col-lg-12 {
border:1px solid red;
padding:10px; /*기존의 부트스트랩그리드 선택자의 내용을 변경 */
}
.row{
margin-bottom:4px; /*밑의 여백 거리줄려고 */
margin-top:4px; /* 상단여백 설정 */
}
</style>
<!-- IE8 에서 HTML5 요소와 미디어 쿼리를 위한 HTML5 shim 와 Respond.js -->
<!-- WARNING: Respond.js 는 당신이 file:// 을 통해 페이지를 볼 때는 동작하지 않습니다. -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<h1>bootstrap 예제</h1>
<div class="container">
<div class="row">
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
</div>
<div class="row"><!-- 3단 layout -->
<div class="col-md-4">.col-md-4</div>
<div class="col-md-4">.col-md-4</div>
<div class="col-md-4">.col-md-4</div>
</div>
<div class="row">
<div class="col-md-2">.col-md-2</div>
<div class="col-md-8">.col-md-8</div>
<div class="col-md-2">.col-md-2</div>
</div>
</div>
<!-- jQuery (부트스트랩의 자바스크립트 플러그인을 위해 필요합니다) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<!-- 모든 컴파일된 플러그인을 포함합니다 (아래), 원하지 않는다면 필요한 각각의 파일을 포함하세요 -->
<script src="../js/bootstrap.min.js"></script>
</body>
</html>결과 화면 💻
개발 꿈나무