부트스트랩은 웹디자인을 쉽게하기 위해 미리 몇가지의 CSS의 클래스 선택자와 정의된 스타일시트, 자바스크립트 플러그인을 모은 강력한 프론트엔드 프레임워크입니다. <부트스트랩 소개와 다운로드 중 참조...>
참고로 이블로그 게시물은 한글부트스트랩3을 참고로 만들어 졌으며 제 블로그 공부용으로 작성한 것입니다.
개요 Overview
웹개발을 더 좋고, 빠르고, 강력하게 접근하는 방법을 가진 부트스트랩의 기반시설의 핵심적인 부분을 설명합니다.
HTML5 문서 유형 HTML5 doctype
부트스트랩 3은 html5를 사용합니다. doctype 선언도 그래서 아주 간단합니다
<!DOCTYPE html>
<html lang="ko">
...
</html>
모바일 우선 Mobile first
부트스트랩3 에서는 시작부터 모바일 부가적인 부분이 아닌 핵심적인 부분으로 만들어졌습니다. 말하자면, 부트스트랩은 모바일 우선입니다. 모바일 우선 스타일은 전 독립된 파일들이 아닌 전 영역을 걸쳐 확인할 수 있습니다.
적절한 렌더링과 확대/축소를 위해, 당신의 <head> 에 viewport 메타태그를 추가하세요
<meta name="viewport" content="width=device-width, initial-scale=1.0">그리고 확대/축소 기능도 사용하지 않게 만들수도 있습니다. 그러면 웹사이트를 어플같이 느껴지도록 할수도 있습니다.
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">즉 기본은
<!DOCTYPE html>
<html lang="ko">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
...
</body>
</html>
타이포그래피와 링크 Typography and links
부트스트랩은 기본적인 전역적인 표시, 타이포그래피, 링크 스타일이 설정되어 있습니다. 구체적으로.
bootstrap-3.1.1/less/폴더 안에 scaffolding.less을 보면,
body {
font-family: @font-family-base;
font-size: @font-size-base;
line-height: @line-height-base;
color: @text-color;
background-color: @body-bg;
}
a {
color: @link-color;
text-decoration: none;
&:hover,
&:focus {
color: @link-hover-color;
text-decoration: underline;
}
&:focus {
.tab-focus();
}
}여기 scaffolding.less파일은 맞춤화(Customize) 에서 설정할수 있습니다. 기본 디폴드값은 아래와 같습니다.
body {
margin: 0;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 14px;
line-height: 1.42857143;
color: #333;
background-color: #fff;
}
a {
color: #428bca;
text-decoration: none;
}
a:hover,
a:focus {
color: #2a6496;
text-decoration: underline;
}
CSS 초기화 Normalize.css
향상된 크로스 브라우징을 위해, Nicolas Gallagher 과 Jonathan Neal 의 프로젝트인 Normalize 를 사용합니다.
제가 사용하는것은 Normalize.css(8KB)를 최소한으로 만들어 사용합니다. 조금이라도 로딩을 줄이기 위해.
Containers
.container로 콘텐츠를 감싸는 것으로 페이지의 콘텐츠를 쉽게 중앙으로 배치할수 있습니다.
.container {
padding-right: 15px;
padding-left: 15px;
margin-right: auto;
margin-left: auto;
}.container 는 그리드 시스템에 맞는 다양한 미디어 쿼리 분기점에서 max-width 가 설정되어 있습니다. 물론 이것 역시 맞춤화(Customize)로 사용자의 웹페이지에 맞게 변경이 가능합니다. 물론 그후 변경에 있어 기억을 해야 하지만.
/* * 768px > Max * */
@media (min-width: 768px) {
.container {
width: 750px;
}
}
/* * 992px > Max * */
@media (min-width: 992px) {
.container {
width: 970px;
}
}
/* * 1200px > Max * */
@media (min-width: 1200px) {
.container {
width: 1170px;
}
}.container는 기본적으로 중첩 될 수없는 것을 유의하십시오.
<div class="container">
...
</div>
Thanks to
'라이브러리 > Bootstrap' 카테고리의 다른 글
| 부트스트랩 : 타이포그래피 (0) | 2014.03.26 |
|---|---|
| 부트스트랩 : 그리드 시스템 (0) | 2014.03.23 |
| 부트스트랩 : 참고사항 (0) | 2014.03.21 |
| 부트스트랩 : 기본 템플릿과 부가 사항 (2) | 2014.03.19 |
| 부트스트랩 : 소개와 다운로드 (0) | 2014.03.16 |