부트스트랩 간단소개

Bootstrap 2013. 7. 16. 09:00

1. HTML5 문서 타입

- 부트스트랩은 HTML5, CSS3, jQuery를 기반으로 작성되었습니다.

- HTML5는 HTML문서의 가장 상단에 (<html>과 별도로) <!DOCTYPE html> 이 선언됩니다.

2. 그리드 시스템 (Grid system)

- 부트스트랩의 기본 격자 시스템은 940px 고정 너비에 12열 격자로 어루어져 있습니다.

- 행은 row, 열은 span + 숫자로 이루어진 클래스로 표현합니다.

- 열사이 간격은 20px 이며 span1 클래스의 너비는 60px 입니다. span 클래스의 숫자가 1씩 증가할 때마다 너비가 80px 씩 늘어납니다. span12 클래스의 너비는 940px 입니다.

3. 유동형 그리스 시스템

- 행의 크래스를 row-fluid로 바꾸면 픽셀이 아닌 퍼센트를 사용할 수 있습니다.

4. 고정형 레이아웃

- 고정형 레이아웃은 최대 940px의 사이즈를 가질 수 있습니다.

- 브라우저가 940px 보다 작을 경우 레이아웃이 자동으로 줄어듭니다.

- 항상 가운데 정렬되는 속성을 가지고 있습니다.

5. 유동형 레이아웃

- 브라우저가 940px 보다 넓어져도 계속 넓어지는 속성을 가지고 있습니다.

- 유동형 레이아웃을 사용하기 위해서는 div 클래스의 속성을 container-fluid 로 지정합니다.

- container-fluid 내에 row-fluid를 넣어 여러 레이아웃을 나누어 사용합니다.

6. 반응형 디자인

- CSS3의 미디어 쿼리(media query)를 이용해 PC, 태블릿PC, 스마트폰 등 다양한 기기의 해상도나 화면 크기에 최적화된 레이아웃으로 자동으로 변환되도록 설계되었습니다.

Posted by Doonee

쩜넷