부트스드랩 개요
디자인 스타일 및 액션이 미리 정의된 html,css,js 파일로 구성된 프레임 워크(=개발환경)
Bootstrap은 UI 프레임워크로 웹사이트를 쉽게 만들 수 있게 도와주는 HTML, CSS, JavaScript 프레임워크다
다양한 기능을 제공하여 사용자가 쉽게 웹사이트를 제작, 유지 보수할 수 있도록 도와준다.
부트스트랩 장점
- 다양한 스타일이 정의 되어있어 디자인이 간편하다. (=템플레이트)
- CSS클래스명만 바꾸면 쉽게 디자인 적용 및 수정이 가능하다.
- 반응형을 고려한 프레임워크=>모바일 페이지
- 무료 오픈 소스(다운로드 간편)
- 다양한 예시 제공 (초보자도 쉬움)
부트스트랩 template
template를 등록하면 간편해진다.
부트스트랩도 jquery나 jsp 또는 html 처럼 정해진 형식을 템플릿으로 등록해 저장해두면 새로 사용할때마다 간편하다.
부트스트랩 사이트에서 복사해서 가져오되 그 안에 부트스트랩과 스크립트 안에 링크만 살짝 수정해주면 된다.
부트스트랩 템블릿
<!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>부트스트랩 101 템플릿</title>
<!-- 부트스트랩 -->
<link href="../css/bootstrap.min.css" rel="stylesheet">
<!-- 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>Hello, world!</h1>
<!-- 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>
grid
부트스트랩 영역 설정
grid
- 부트스트랩의 핵심 레이아웃
- 총 12열로 구성=>(1열씩 12개, 8,4 4,4,4 6,6)로 레이아웃이 가능
- 그리드의 합은 항상 12가 되어야 한다. 합이 12를 넘거나 부족하면
화면 레이아웃을 구성하는 데 문제가 발생할 수 있다. - 클래스 선택자를 기반으로 화면의 레이아웃을 잡아주는 역할
- 클래스 접두사 분류
모바일폰(<768px)=>.col-xs- =>핸드폰에서 실행하는 클래스 선택자를 의미(접두어)
태블릿(>=768px)=>.col-sm- =>태블릿
데스크탑(>=992px)=>.col-md- =>pc의 기본
데스크탑(>=1200px)=>.col-lg_ =>pc의 고해상도에 해당하는 클래스 선택자 접두어
기존의 부트스트랩의 그리드에 해당하는 스타일클래스 선택자를 변경하는 경우(새로 작성해서 덮는다)
<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-12,.col-sm-12, .col-md-12, .col-lg-12 {
border:1px solid red;
padding:10px; <- 기존 부트스트랩 그리드에 새로 덮은것
.row{/* 그리드 시스템 사이의 거리를 주기위해서 필요*/
margin-bottom:4px;
margin-top:4px;
}
</style>
그리드 예제
-그리드의 합은 12여야한다
<body>
1) 전부 1일때
<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>
------------------------------------------------------------
2) 4:4:4
<div class="row">
<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>
-----------------------------------------------
3) 6:6
<div class="row">
<div class="col-md-6">.col-md-6</div>
<div class="col-md-6">.col-md-6</div>
</div>
-------------------------------------------
4) 2:8:2
<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>
</body>
----------------------------------------------------
그리드 안쪽에 또 다른 그리드를 만들수있다
그리드는 중첩이 가능,내부도 역시 12열이 필요
<div class="row">
<div class="col-md-8">.col-md-8
<div class="row">
<div class="col-md-4 pad10">
내부 4개의 col-md-4
</div>
<div class="col-md-8 pad10">
내부 8개의 col-md-8
</div>
</div>
</div>
<div class="col-md-4">.col-md-4
<div class="row">
<div class="col-md-6 pad10">
내부 6개의 col-md-6
</div>
<div class="col-md-6 pad10">
내부 6개의 col-md-6
</div>
</div>
</div>
</div>
----------------------------------------------------
그리드 사이에 분리가능(오프셋(offset-n))
왼쪽 여백을 만들어주는 클래스로 여백도 숫자에 포함되서 12개를 맞춰줘야한다
col-md-offset-1 => (margin-left:8.333%)
숫자가 커질수록 여백이 커진다
ex)
<div class="row"> <!--8 여백1 3 -->
<div class="col-md-8">.col-md-8</div>
<div class="col-md-3 col-md-offset-1">col-md-3 col-md-offset-1</div>
</div>
<div class="row"> <!--4 여백2 6 -->
<div class="col-md-4">.col-md-4</div>
<div class="col-md-6 col-md-offset-2">col-md-6 col-md-offset-2</div>
</div>
<div class="row"> <!--3 여백3 6 -->
<div class="col-md-3">.col-md-3</div>
<div class="col-md-6 col-md-offset-3">col-md-6 col-md-offset-3</div>
</div>
---------------------------------------------------------
그리드 2단
부트스트랩을 통해 머릿말인 header와 본문 과 footer 이렇게 영역을 나누고자 할때
본문을 그리드 2단설정으로 나누고자한다. 3:9
<!--머리말 -->
<header>
<h2 class="text-success">그리드 시스템을 이용한 레이아웃</h2>
</header>
<div class="row">
<div class="col-md-3"> 본문 1
<!-- .nav는 bootstrip이 가지고있는 스타일 적용 => 그 위에 덮을꺼면 위에 새로 작성-->
<ul class="nav">
<li>회원가입</li>
<li>회원로그인</li>
<li>게시판</li>
<li>설문조사</li>
</ul>
</div>
<div class="col-md-9"> 본문 2
<p>
디지털 경제의 확산으로 우리 주변에는 규모를 가늠할 수 없을 정도로 많은 정보와
데이터가 생산되는 '빅데이터(Big Data)' 환경이 도래하고 있다.
</p>
<p>
PC와 인터넷, 모바일 기기 이용이 생활화되면서 사람들이 도처에 남긴 발자국
(데이터)은 기하급수적으로 증가하고 있다(정용찬, 2012a).
</p>
</div>
</div>
<!-- 꼬리말 -->
<footer>
<h2 class="text-info">홈페이지의 하단부분</h2>
</footer>
</div>
-------------------------------------------
그리드 3단
위에랑 비슷하지만 본문을 3개로 쪼개서 나눈다
<!--머리말 -->
<header>
<h2 class="text-success">그리드 시스템을 이용한 레이아웃2</h2>
</header>
<div class="row"> 본문1
<div class="col-md-2">
<ul class="nav">
<li>회원가입</li>
<li>회원로그인</li>
<li>게시판</li>
<li>설문조사</li>
</ul>
</div>
<div class="col-md-7 col-md-offset-1"> 본문2
<p>
디지털 경제의 확산으로 우리 주변에는 규모를 가늠할 수 없을 정도로 많은 정보와
데이터가 생산되는 '빅데이터(Big Data)' 환경이 도래하고 있다.
</p>
<p>
PC와 인터넷, 모바일 기기 이용이 생활화되면서 사람들이 도처에 남긴 발자국
(데이터)은 기하급수적으로 증가하고 있다(정용찬, 2012a).
</p>
</div>
<!-- 추가 -->
<div class="col-md-2"> 본문3
<div class="banner">기타 부가적인 내용</div>
</div>
</div>
<!-- 꼬리말 -->
<footer>
<h2 class="text-info">홈페이지의 하단부분</h2>
</footer>
</div>
-----------------------------------------------------------------
중첩2단
위의 3단과 비슷해보이지만 본문을 3개로 나누는것과 달리
2개로 나눈 본문중 하나를 중첩으로 1번 또 나누는 방법이다.
<div class="row"> 본문 1
<div class="col-md-3">
<ul class="nav">
<li>회원가입</li>
<li>회원로그인</li>
<li>게시판</li>
<li>설문조사</li>
</ul>
</div>
<div class="col-md-9"> 본문2
<div class="row">
<div class="col-md-5"> 본문 2-1
<p>
디지털 경제의 확산으로 우리 주변에는 규모를 가늠할 수 없을 정도 많은 정보와
데이터가 생산되는 '빅데이터(Big Data)' 환경이 도래하고 있다.
</p>
</div>
<div class="col-md-7"> 본문2-2
<p>
PC와 인터넷, 모바일 기기 이용이 생활화되면서 사람들이 도처에 남긴 발자국
(데이터)은 기하급수적으로 증가하고 있다(정용찬, 2012a).
</p>
</div>
</div><!-- 안쪽의 row -->
</div><!-- col-md-9 -->
</div><!-- 전체(밖의 row) -->
---------------------------------------------------------------
위치변경
그리드시스템의 위치를 바꿀수있으며 이때 사용하는것으로
push(오른쪽에 배치),pull(왼쪽에 배치)며
숫자를 12로 맞춰야한다.
ex)
<div class="col-md-2"> 이것을 오른쪽으로 위치를 변경할꺼면
<div class="col-md-2 col-md-push-10"> 이렇게 해야하며 숫자 12를 맞춰야한다.
