음 아마 비둘기보단 똑똑할꺼야
준돌 Jundol / 2015.05.13 13:54 / CSS/Framework

Bootstrap Grids System

부트스트랩의 그리드 시스템은 페이지에 열 두개의 컬럼이 존재하는걸로 따르고 있어요.

만약 12개의 컬럼을 전부 사용하지 않고 커스텀으로 사용하려면 그룹으로 묶어서 사용하는 것도 가능해요!



부트스트랩의 그리드 시스템은 스크린의 크기에 따라 자동적으로 재 배치 되며, 반응형으로 움직여요


그리드 클래스

부트스트랩의 그리드 시스템 클래스는 4가지가 있어요 : 

  • xs (스마트폰용)
  • sm(태블릿용)
  • md (데스크탑용)
  • lg (큰 데스크탑용)

부트스트랩 그리드시스템의 기본적인 구조

<div class="row">
  <div class="col-*-*"></div>
</div>
<div class="row">
  <div class="col-*-*"></div>
  <div class="col-*-*"></div>
  <div class="col-*-*"></div>
</div>
<div class="row">
  ...
</div>


첫 번째로 한 개의 열을 만듭니다. (<div class="row">) 그다음, 원하는 만큼 행의 숫자를 넣습니다.(.col-*-*) 여기서 중요한 점은 각 행의 숫자가 항상 12를 넘지 말아야 합니다.

예제를 몇개 보도록 하죠.

동일한 세 개의 행
<div class="row">
  <div class="col-sm-4">.col-sm-4</div>
  <div class="col-sm-4">.col-sm-4</div>
  <div class="col-sm-4">.col-sm-4</div>
</div>
코드를 적용 한 후 페이지의 가로 (폭)의 크기를 최대로 늘렸다가 최소로 줄였다를 해보세요.
그럼 스마트폰에서 적용했을 때 와 일반 모니터로 했을 때 다르게 나오는걸 볼 수 있습니다.

1. 폭이 최대(데스크탑)일 때

2. 폭이 최소(스마트폰)일 때

코드를 해석해 보면 클래스 지정자의 col-sm-4 란 뜻은 하나의 행이 전체 12의 크기 중 4의 크기를 가진다. 즉, 1/3의 크기를 갖도록 하는 것입니다.


서로 크기가 다른 두개의 행

<div class="row">
  <div class="col-sm-4">.col-sm-4</div>
  <div class="col-sm-8">.col-sm-8</div>
</div>


자 여기서는 4,8이 입력되었습니다. 즉, 폭 12의 크기중 하나는 4만큼 하나는 8만큼 의 폭을 가지는 두 개의 행을 입력 한 것입니다.

1. 폭이 최대(데스크탑)일 때

2. 폭이 최소(스마트폰)일 때

출처 :

1. w3schools.com

http://www.w3schools.com/bootstrap/bootstrap_grid_basic.asp



준돌 Jundol / 2015.05.13 11:34 / CSS/Framework


부트스트랩은 트위터에서 만든 오픈소스 웹 디자인 프레임워크이며 무료로 다운로드를 받을 수 있고 무료로 사용이 가능해요.

부트스트랩?

  • 부트스트랩은 웹 개발에 빠르고 편리한 무료 프론트엔드 프레임워크에요
  • 부트스트랩은 HTML 과 CSS 를 기반으로 디자인한 템플릿과 타이포그래피, 양식, 버튼, 표, 네비게이션, 모달, 이미지 carousels 그리고 다른 훌륭한 자바스크립트 플러그인들을 옵션으로 갖추고 있어요.
  • 부트스트랩은 여러분에게 쉽고 강력한 반응형 웹 디자인을 제공할 거에요.

부트스트랩 역사

  • 부트스트랩은 Mark Otto 와 Jacob Thornton 이 트위터에서 개발했어요. 그리고 2011년 8월 깃헙에 오픈소스 제품으로 공개했죠.

왜 부트스트랩을 쓰나요?
부트스트랩을 썼을 때 얻는 (개)이득 :
  • 사용하기 쉬어요! : HTML 과 CSS에 기본적인 지식이 있는 누구든지 부트스트랩을 사용할 수 있어요.
  • 반응형 특징 : 부트스트랩은 반응형 CSS로 스마트폰, 태블릿 그리고 데스크탑에 적용이 가능해요
  • 휴대용기기를 일순위로 둬요 : 부트스트랩3에서는 휴대기기를 일순위로 두는 코어 프레임워크에요
  • 브라우저 호환성 : 부트스트랩은 최신 브라우저들간의 호환성이 높아요. (크롬,파이어폭스,익스플로러, 사파리 그리고 오페라)

어디서 얻을 수 있나요?
부트스트랩을 얻는 방법은 두 가지가 있어요
  • getbootstrap.com 에서 다운로드 받은 후 직접 제공하는 방법
    만약 직접 다운로드해서 부트스트랩을 직접 호스트하여 제공하려면 위 url에 접속해서 다운받으면 되요.
  • CDN 으로 링크를 포함하는 방법
    부트스트랩은 압축된 CSS와 자바스크립트 파일을 제공하고 있어요. 또한 제이쿼리를 기반으로 개발하였기 때문에 사용하기 위해선 제이쿼리를 써야해요











자 그럼 이제 부트스트랩을 적용한 첫 번째 웹 페이지를 만들어 봅시다.

1. HTML5 문서타입을 추가해주세요.

부트스트랩은 HTML 요소와 CSS 속성들이 HTML5 문서타입을 요구해요.

항상 HTML5 문서타입을 웹페이지의 시작부분에 추가해주세요. 

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8"> 
  </head>
</html>


2. 부트스트랩3는 휴대기기를 우선으로 둡니다.

 부트스트랩3 는 모바일기기에 반응형으로 적용되도록 설계되었습니다. 휴대기기를 우선 하는 스타일은 코어 프레임워크의 한 부분입니다. 렌더링과 터치 확대를 제공하기 위해서는 <head> 태그 안에 <meta> 태그를 아래와 같이 입력하여야 해요.

<meta name="viewport" content="width=device-width, initial-scale=1">

width=device-width 는 페이지의 폭을 휴대기기의 스크린 폭에 맞추도록 하는 부분입니다.

initial-scale=1 는 브라우저에서 처음 웹 페이지를 로딩하였을 때 초기 확대 레벨을 지정하는 부분입니다.


3. 컨테이너(Containers)

부트스트랩은 보통 사이트의 내용들을 컨테이너를 이용하여 감싸 놓습니다.

컨테이너에는 보통 두 개의 컨테이너가 있어요.

(1). .container 클래스는 컨테이너의 폭이 고정되어서 반응하는 클래스 지정자에요

(2). .container-fluid 클래스는 컨테이너의 폭이 페이지의 전체 폭에 맞춰서 반응형으로 제공되요.

주의 : 컨테이너는 중복해서 넣을 수 없어요. 컨테이너 안에 컨테이너를 또 넣을 수 없어요.


두 개의 예제를 보고 차이점이 어떤지 느껴보세요.

1. .container 를 사용한 경우

http://www.w3schools.com/bootstrap/tryit.asp?filename=trybs_gs_container&stacked=h

2. .container-fluid 를 사용한 경우

http://www.w3schools.com/bootstrap/tryit.asp?filename=trybs_gs_container-fluid&stacked=h


출처 : 

1. w3schools.com

http://www.w3schools.com/bootstrap/bootstrap_get_started.asp

2. 엔하위키미러 부트스트랩

https://mirror.enha.kr/wiki/Bootstrap

3. 부트스트랩 공식 홈페이지

http://bootstrapk.com/

© 2015 Jundol in 음 아마 비둘기보단 똑똑할꺼야
Designed by DH / Powered by Tistory
141 / 85 / 88,205