-
[WebPage] 2-3. Bootstrap, 쉽고 빠른 웹 프레임워크 - 웹 페이지 제작 강좌Web/WebPage 2015. 6. 17. 15:57
1. 부트스트랩 구조와 이해
- 부트스트랩을 직접 사용하는 방법도 중요하지만, 부트스트랩을 잘 사용하기 위해서는 구조에 대해서 알아 두는 것도 중요합니다.
2. 글로벌 스타일 (Global Styles)
처음으로 알아볼 것은 부트스트랩 전체를 관통하는 글로벌 스타일 입니다. 글로벌 스타일에 해당하는 Doctype, CSS Reset, Typography에 대해서 알아보는 것으로 시작하겠습니다.
2-1. HTML5 문서 타입
- 부트스트랩은 html5, css3, jQuery를 기반으로 작성되었습니다.
- 따라서 html5 doctype을 요구합니다. ( * Doctype이란, 해당 문서에 대한 형식을 의미합니다)
- HTML5 로 들어서서 아래와 같은 형식으로 간편하게 정의할 수 있게 되었습니다.
12<!Doctype html>cs - 기존의 HTML 문서와의 호환성을 유지하면서 HTML5 문서를 정의하기 위한 간단한 방법이라 할 수 있습니다.
2-2. Typography & links
- 부트스트랩의 전체적인 타이포그래피, <body> 스타일, 링크 스타일은 'scaffolding.LESS'에 기술되어 있습니다.
- scaffolding.LESS는 크게 body 스타일 부분과 link 스타일 부분으로 나뉘어져있습니다.
1234567body {font-family: @font-family-base;font-size: @font-size-base;line-height: @line-height-base;color: @text-color;background-color: @body-bg;}cs - 각각 속성의 값은 'variable.LESS'에 정의 되어 있습니다.
- 부트스트랩 기본 스타일이 맘에 들지 않을 경우, 아래 부분을 찾아서 수정하면 됩니다.
1234567891011121314//== Typography////## Font, line-height, and color for body text, headings, and more.@font-family-sans-serif: "Helvetica Neue", Helvetica, Arial, sans-serif;@font-family-serif: Georgia, "Times New Roman", Times, serif;//** Default monospace fonts for `<code>`, `<kbd>`, and `<pre>`.@font-family-monospace: Menlo, Monaco, Consolas, "Courier New", monospace;@font-family-base: @font-family-sans-serif;@font-size-base: 14px;@font-size-large: ceil((@font-size-base * 1.25)); // ~18px@font-size-small: ceil((@font-size-base * 0.85)); // ~12px...cs - 링크 스타일은 텍스트에 링크를 부여했을 때, 스타일에 대해 정의되어 있습니다.
12345678910111213141516// Linksa {color: @link-color;text-decoration: none;&;;:hover,&;;:focus {color: @link-hover-color;text-decoration: @link-hover-decoration;}&:focus {.tab-focus();}}cs 2-3. normalize.css를 이용한 css 리셋 (reset via normalize)
- 크로스 브라우징을 고려하여 웹 개발을 할 때, reset css라 불리는 CSS를 정의합니다.
- 각 브라우저의 CSS default 값이 다르기 때문입니다. 이러한 다른 요소를 통일화시키는 것이 reset css 입니다.- 부트스트랩은 normalize.css를 사용하고 있습니다.3. 그리드 시스템 (Grid System)
- 부트스트랩은 기본적으로 그리드 형식의 시스템으로 이루어져 있습니다.
- 그리드 시스템은 쉽게 풀면, 공간을 디자인하기 위한 가이드 선을 긋는 것이라고 생각하면 됩니다.
[출처: https://gda2012.wordpress.com/justin-marsh/]
- 위 그림에서처럼 전체 공간을 격자(그리드)로 나누어, 화면에 배치 할 요소 등을 균형감 있게 격자에 맞추어 나열합니다.
- 그리드 시스템을 활용하여 공간을 배치하면 손 쉽게 전체적인 화면의 균형감, 통일감을 느낄 수 있는 것이 장점입니다.
3-1. 베이직 그리드 시스템 (Basic Grid System)
- 부트스트랩에서 그리드를 표현하기 위해 기본적으로 행은 "row", 열은 "span" + column 숫자로 이루어진 클래스로 표현합니다.
- 최대 12열로 이루어진 그리드 시스템으로 설계되어 있스으모, "span*" 클래스는 span1~12 안에서 사용가능 합니다.
- 열 사이의 간격은 20px이며 "span1" 클래스의 너비는 60px 입니다.
- "span*" 클래스의 숫자가 하나씩 증가할 때마다 너비가 80px씩 늘어나 "span12" 클래스의 너비는 전체 너비인 940px이 됩니다.
3-2. 유동형 그리드 시스템 (Fluid Grid System)
- 부트스트랩에서 기본 격자 시스템과 더불어 유동형 격자 시스템을 제공하고 있습니다.
- 이 방식은 격자 크기를 규졍하는 요소가 픽셀이 아닌 퍼센트라는 것이 다른 점 입니다.
- 즉, 절대 길이인 픽셀 단위가 아닌 상대 길이인 퍼센트를 사용함으로써 그리드 간에 비율 사이즈로만 화면을 구성하게 됩니다.
- 사용법은 행의 클래스를 "row-fluid"로 기입하시면 됩니다.
3-3. 레이아웃 (Layouts)
- 레이아웃은 모든 컴포넌트를 감싸는 가장 상위 개념의 컨테이너입니다.
- 레이아웃은 고정형과 유동형 레이아웃 2 가지로 구성되어 있습니다.
3-4. 고정형 레이아웃(Fixed Layouts)
- 고정형은 최대 940px의 사이즈를 가질 수 있습니다. (* 브라우저 사이즈가 940px 보다 커도 940px를 유지합니다)
- 레이아웃 마크업 작성법은 아래처럼 구성하시면 됩니다. ( * div 클래스 속성을 "container"로 지정해주시면 됩니다)123456<body><div class="container">...</div></body>cs 3-5. 유동형 레이아웃(Fluid Layouts)
- 유동형은 최대 사이즈가 고정되어 있지 않습니다.
- 레이아웃 마크업 작성법은 div 클래스 속성을 "container-fluid"로 지정해주시면 됩니다.
- 유동형 레이아웃은 크키가 비율로 적용되는 'row-fluid'를 넣어 여러 레이아웃으로 나누어 사용합니다.
예제를 통해서 직접적으로 어떻게 구성되는 지 살펴봅니다.12345678910111213<div class="container-fluid"><div class="row-fluid"><div class="span2"><!--Sidebar content--><p style="background-color: #ff00ff;">Span2 Sidebar</p></div><div class="span10"><!--Body content--><p style="background-color: #00ffff;"> Span10 Body </p></div></div></div>cs 4. 반응형 디자인 (Responsive Design)
반응형 다지인이란 CSS3의 미디어 쿼리(media query)를 이용해 PC, 태블릿 PC, 스마트폰 등 다양한 기기의 해상도나 화면 크기에 최적화된 레이아웃으로 자동으로 변환되도록 설계(Design)하는 것을 말합니다.
- 일반적으로 미디어 쿼리를 이용하기 위해 <head>에 메타 태그를 작성해야 합니다.
- 아래 메타 태그는 디바이스의 크기에 따라 작동한다는 것을 의미합니다.
1<meta name="viewport" content="width=device-width, initial-scale=1.0">cs - 부트스트랩은 유연하고 간단한 화면 구성을 위해 격자 시스템과 함께 반응형 디자인을 적용해 제공합니다.
구분
화면너비
격자 열 너비
격자 열 간격 너비
스마트폰
480px 이하
고정되지 않는 가변 폭
세로 모드 태블릿 PC
767px 이하
고정되지 않는 가변 폭
가로 모드 태블릿 PC
768px 이상
42px
20px
기본
980px 이상
60px
20px
와이드 모니터
1200px 이상
70px
30px
기기에 따른 그리드 크기 변화
- 반응형 디자인을 구현하기 위한 CSS 예제 코드입니다.
123456789101112// Landscape phones and down@media (max-width: 480px) {...}// Landscape phone to portrait tablet@media (max-width: 767px) {...}// Portrait tablet to landscape and desktop@media (min-width: 768px) and (max-width: 979px) {...}// Large desktop@media (min-width: 1200px) {...}cs * 본 포스팅은 이재근 등 4명 저 "Fast Web Service Build up: 웹 서비스를 쉽고 빠르게 구축하는 기술" 저서를 참고하여 작성하였습니다'Web > WebPage' 카테고리의 다른 글
[WebPage] 3. 서버 프로그래밍을 위한 Python과 Django - 웹 페이지 제작 강좌 (0) 2015.06.21 [WebPage] 2. 실전 예제 - 개인용 포트폴리오 페이지 만들기 - 웹 페이지 제작 강좌 (0) 2015.06.20 [WebPage] 2-3. Bootstrap, 쉽고 빠른 웹 프레임워크 - 웹 페이지 제작 강좌 (0) 2015.06.20 [WebPage] 2. CSS 요소(Elements) - 웹 페이지 제작 강좌 (0) 2015.06.17 [WebPage] 2. CSS 선택자(Selector) - 웹 페이지 제작 강좌 (0) 2015.06.16 [WebPage] 2. CSS & Bootstrap - 웹 페이지 제작 강좌 (3) 2015.06.16
