Index of /2655

(1)

Hanbit eBook

Realtime 56

제이크 스퍼록 지음 / 송지연 옮김

반응형 웹 개발을 위한

Bootstrap

부트스트랩

(2)

이 도서는 O’REILLY의 Bootstrap의 번역서입니다.

(3)

반응형 웹 개발을 위한 부트스트랩 초판발행 2014년 05월 07일 지은이제이크 스퍼록 / 옮긴이 송지연 / 펴낸이 김태헌 펴낸곳 한빛미디어(주) / 주소 서울시 마포구 양화로 7길 83 한빛미디어(주) IT출판부 전화 02-325-5544 / 팩스 02-336-7124 등록 1999년 6월 24일 제10-1779호 ISBN 978-89-6848-655-5 15000 / 정가 11,000원 책임편집 배용석 / 기획·편집 김창수 디자인 표지 여동일, 내지 스튜디오 [밈], 조판 최송실 영업 김형진, 김진불, 조유미 / 마케팅 박상용, 서은옥, 김옥현 이 책에 대한 의견이나 오탈자 및 잘못된 내용에 대한 수정 정보는 한빛미디어(주)의 홈페이지나 아래 이메일로 알려주십시오. 한빛미디어 홈페이지 www.hanbit.co.kr / 이메일 ask@hanbit.co.kr

Authorized Korean translation of the English edition of Bootstrap, ISBN 9781449343910 ⓒ 2013 Jake Spurlock. This translation is published and sold by permission of O’Reilly Media, Inc., which owns or controls all rights to publish and sell the same.

이 책의 저작권은 오라일리 사와 한빛미디어(주)에 있습니다.

책으로 펴내고 싶은 아이디어나 원고를 메일(ebookwriter@hanbit.co.kr)로 보내주세요. 한빛미디어(주)는 여러분의 소중한 경험과 지식을 기다리고 있습니다.

(4)

옮긴이_ 송지연 지엔텔, 노키아, 지멘스 네트웍스에서 근무한 경험이 있는 WCDMA, LTE 분야의 통신 기술 엔지니어. 일하는 중 취미로 대학 동기들과 팀을 이루어 아이폰 애플리 케이션 개발에 한동안 푹 빠져 있기도 했다. 현재는 주전공인 SW 개발 분야로 돌 아와 오라클의 자바 개발팀에서 근무 중이다.

역자 소개

지은이_ 제이크 스퍼록 제이크 스퍼록은 오라일리 미디어의 개발자로, 오라일리에서 발행하는 DIY 잡지인 <MAKE>와 그 관련 행사인 MAKE Faire 업무를 담당하고 있다.

(5)

저는 Mac이 생기기 전부터 소프트웨어 개발자로 일해왔습니다. 그래서 Mac이 등 장했을 당시 이 분야 업계의 반응을 생생히 기억하고 있습니다. 그 당시에만 해도 대 부분 Mac의 출현에 대해 상당히 회의적인 반응이었습니다. 하지만 여기서 흥미로 운 점은 현재 부트스트랩에 대해 업계가 말하는 단점이 1984년 Mac에 대해 사람들 이 말했던 부정적인 반응과 매우 유사하다는 것입니다. 또한, 두 경우 모두 업계에 서 말했던 단점이 오히려 그것들의 가장 주요한 핵심 부분이 되었습니다. 애플은 모든 소프트웨어가 반드시 실행해야만 하는 동일한 몇 가지 사항이 있다는 것을 깨달았으며 이 부분에 대해 모두가 같은 방법으로 실행할 수 없는지에 대해 고려하기 시작했습니다. 만약 이것이 가능하다면, 소프트웨어를 개발하거나 디버 깅하는 것이 쉬워질 것이며 그보다 더 중요한 것은 사용하기에 쉬워진다는 점입니 다. 즉, 메뉴를 생성하는 방법이 단 한 가지밖에 없다면 사용자가 한 애플리케이션 에서 메뉴를 어떻게 사용하는지를 알게 되는 순간 그 외 모든 애플리케이션의 메뉴 를 사용할 줄 안다는 뜻입니다. 스크롤 바나 윈도우, 키보드, 마우스, 출력, 소리를 사용/설정하는 방법도 이와 마찬가지입니다. 개발자들이 이를 그다지 달가워하지 않는 이유는 (저도 그 중 하나입니다) 개발자들이 그동안 작업하여 상품화했던 부분을 이러한 기능이 대신하게 되었기 때문입니다. 게다가 이와 같이 모든 곳에 적용하도록 만든 전략은 한계가 있기 마련입니다. 만 약 UI 표준을 제대로 따르지 않는 애플리케이션이 있다면 어떻게 할까요? 이것이 이제까지 우리가 해왔던 것이기에 아마 이런 것에 익숙할 것입니다. 팩토링이라 불리는 잘 알려진 기술 프로세스가 있습니다. 이는 만약 여러분이 무언 가를 계속해서 반복해야만 하는 경우, 이를 잘 만들어 쉽고 유연성 있는 API로 생 성하면 다시는 이 작업을 반복할 필요가 없게 되는 것을 말합니다. 이것이 소프트

저자 서문

부트스트랩은 반응형 웹 사이트 제작을 위한 프론트-엔드 프레임워크입니다. 부트 스트랩은 사용자가 원하는 대로 조절할 수 있기 때문에(원하는 만큼 평범해질 수 있기 때 문에) 애플리케이션 프레임워크나 블로그 혹은 어떠한 CMS 애플리케이션에도 모 두 적합합니다. 부트스트랩에서 제공하는 HTML, CSS, 자바스크립트의 조합은 많 은 코드를 추가할 필요 없이도 좋은 웹 사이트를 제작하기 쉽게 만듭니다. 이는 기 본 그리드 시스템만으로 레이아웃을 쉽게 합칠 수 있고 버튼이나 내비게이션 바, 테이블의 스타일링은 기본 마크업을 처음부터 보기 좋게 만들 수 있습니다. 또한 12개 이상의 자바스크립트 플러그인은 여러분의 웹 사이트에 상호작용 요소를 추 가하도록 만들어 줄 것입니다. 대상 독자 이 책은 HTML/CSS와 자바스크립트를 잘 다룰 수 있으며, 반응형 웹 사이트 제작 이나 부트스트랩 자바스크립트 플러그인을 추가하는 방법, 혹은 이처럼 유명한 오 픈 소스 프레임워크를 사용하여 웹 사이트를 빠르게 제작하는 것에 대해 궁금한 사 람들을 위한 책입니다. 비대상 독자 이 책은 온라인 부트스트랩 문서에서 원하고자 하는 바를 모두 알아낸 사람을 위 한 책은 아닙니다. 모든 사람이 그렇듯이, 저 또한 온라인 문서를 통해 부트스트랩 을 시작했습니다. 첫 번째 웹 사이트는 부트스트랩 1.3 버전으로 제작하여 부트스 트랩 1.4 버전으로 업그레이드하였습니다. 그 후에 부트스트랩 2.0으로 큰 프로 젝트를 제작하는 등 부트스트랩을 이용하여 많은 작업을 하였습니다. 만약 시멘틱 HTML을 작성하는 데 문제가 없는 사람이라면 부트스트랩을 다루는 것이 매우 쉬 울 것입니다.

(9)

이 책의 역할 HTML/CSS와 자바스크립트 작성을 해본 적이 있는 경우, 이 책은 반응형 웹 사이 트를 위한 유연한 코드 작성을 순조롭게 시작할 수 있도록 도와줄 것입니다. 즉, 이 책은 시멘틱 HTML과 CSS를 작성하는 패턴을 그대로 따르기 때문에 부트스트랩 의 개념과 코드의 문법은 매우 쉽게 다가올 것이라는 뜻입니다. 이 책의 구성 이 책은 프로젝트의 기반과 파일 구조에서 시작해서 그리드 시스템과 레이아웃 유 형을 거쳐 HTML 요소와 폼, 테이블, 버튼과 같은 스타일링을 다루어 부트스트랩 으로 웹 사이트를 제작할 것입니다. 일단 기반이 세워지면 내비게이션 바나 브레 드크럽스breadcrumbs_{, 미디어 오브젝트와 같은 미적인 요소에 대해 알아볼 예정이며} 그 이후에 웹 사이트에 상호작용을 제공하는 자바스크립트 요소인 드롭다운 메뉴, 캐러셀carousel_{, 모달}modals_{을 다룰 것입니다.} 이 책을 쓴 이유 저는 수많은 작업을 완료하기 위해서 더 많은 부트스트랩 전문가를 만들기 원하는 부트스트랩 전문가는 아닙니다. 저는 데이브 위너 블로그의 포스트를 통해서 부트스트랩을 접한 개발자이자 작가 이며, 이를 통해 그 당시 제작하고 있던 웹 사이트에 부트스트랩을 적용하면 좋을 것 같다는 생각이 들었습니다. 그렇기 때문에 이제까지 제가 배운 것들을 공유해야 만 한다고 느끼고 있습니다. 이제까지 제가 따랐던 방법들이 아마도 변형된 형태이 겠지만, 다른 사람들에게도 역시 효과가 있기를 바라며 초보자의 관점에서 쓰고 전 문가가 감수한 책을 통해 많은 사람들이 부트스트랩을 알고 즐길 수 있도록 도와주

(10)

기를 희망하고 있습니다. 그 외 정보 여러분이 배우고 싶은 것이 어떤 것인지, 그리고 그 이유에 따라 부트스트랩을 배 우기 위한 방법으로 이 책이 최선일 수도 아닐 수도 있습니다. 만약 부트스트랩 웹 사이트 제작을 시작하는 것이 주관심사라면 온라인 문서01_를 이용하는 것이 적합할 것입니다. 온라인 문서의 저자인 제이콥 쏜톤과 마크 오토는 코드베이스의 예제나 HTML 코드 샘플, 그 외 프로젝트를 시작하기 위해 필요한 자료를 상세히 제공하고 있습니다. 이는 매우 뛰어난 자료로 저 역시 이 책을 구성 하기 위해 이를 사용한 바 있습니다. 만약 여러분이 오픈 소스 프로젝트 작업에 기여하고 싶다면, GitHub project02_에 서 pull request를 제출하거나 이슈 트래커를 사용하여 업데이트, 다운로드, 문서 작업 등을 하면 됩니다 부트스트랩이 필요한가 여러분이 그저 자바 스크립트 플러그인이나 CSS 초기화 정도를 찾는 것이라면 부 트스트랩은 너무 과할 수도 있습니다. 만약 기본 인터페이스 요소를 좋아하는 않 는 것이라면, 이를 다시 작성하는 것은 쉬우며, 재작성하지 않더라도 관련 태그를 삭제하면 됩니다. 만약 웹 사이트, 반응형 웹 사이트를 빠르게 제작할 수 있는 쉬운 방법을 찾는 경우라면, 부트스트랩을 사용하는 것이 좋습니다. 저는 제 모든 프로 젝트에 부트스트랩을 사용했으며 이에 대해 무척 만족하고 있습니다. 01　http://twitter.github.com/bootstrap/ 02　http://github.com/twitter/bootstrap/

(11)

요즘은 모든 것이 간단화되고 쉬워지는 것 같습니다. 좋은 의미로 말입니다. 오래 전 홈페이지를 만들기 위해 HTML, 자바 스크립트, 나모웹에디터 등을 끙끙대며 배우고 (물론 재미있었습니다) 몇 일이 걸려 홈페이지 하나를 만들어냈는데, 요즘은 설 치형 워드프레스로 원하는 플러그인을 설치하고 원하는 형태의 홈페이지를 뚝딱 만들어내는가 하면 간단한 웹 페이지 디자인을 위해서는 부트스트랩이 나왔습니 다. 게다가 요즘 대세인 반응형 디자인까지 지원한다고 합니다. 이렇게 놀랍고 간 단한 툴이라니. 부트스트랩은 많은 사람들이 알고 있듯이 트위터에서 오픈 소스로 공개한 웹 프런 트-엔드 개발 도구로, 사용하기가 매우 간단하고 직관적이므로 웹을 처음 접하는 사람이라고 하더라도 손쉽게 다가갈 수 있는 장점이 있습니다. 또한, 모바일을 많 이 사용하는 요즘, 반응형 디자인 (모바일 기기의 크기에 따라 웹 페이지의 화면을 보기 좋게 변형해주는 형식) 또한 손쉽게 만들 수 있으니 정말 획기적인 툴이 아닐 수 없습니다. 웹 개발에 대해서는 이것저것 많이 다루어 보았었지만, 부트스트랩을 처음 접하면 서 개발자가 할 일이 많이 줄어든 것 같아 아쉽기도 했습니다. 하지만 그만큼 많은 사람들이 사용할 수 있다는 점에서 부트스트랩에게 많은 점수를 주고 싶습니다. 이 책에서는 부트스트랩의 기본부터 활용법까지 간단 명료하게 설명되어 있으므로 이 책을 한번 읽음으로써 많은 기본 지식을 얻게 될 것이라 믿어 의심치 않습니다. 먼 저 책을 따라가면서 부트스트랩 웹 페이지에 있는 많은 예제와 샘플 또한 참고해보 십시오. 머지 않아 부트스트랩의 전문가가 되실 여러분을 기대합니다. 책이 완성되기까지 많은 분의 도움을 받았습니다. 어비팩토리 송태민 님과 많은 지 원과 이해를 해주신 부모님과 친구들에게 감사드립니다.

역자 서문

(12)

예제 파일

(13)

한빛 eBook 리얼타임

한빛 eBook 리얼타임은 IT 개발자를 위한 eBook입니다. 요즘 IT 업계에는 하루가 멀다 하고 수많은 기술이 나타나고 사라져 갑니다. 인터 넷을 아무리 뒤져도 조금이나마 정리된 정보를 찾는 것도 쉽지 않습니다. 또한 잘 정리되어 책으로 나오기까지는 오랜 시간이 걸립니다. 어떻게 하면 조금이라도 더 유용한 정보를 빠르게 얻을 수 있을까요? 어떻게 하면 남보다 조금 더 빨리 경험하 고 습득한 지식을 공유하고 발전시켜 나갈 수 있을까요? 세상에는 수많은 종이책 이 있습니다. 그리고 그 종이책을 그대로 옮긴 전자책도 많습니다. 전자책에는 전 자책에 적합한 콘텐츠와 전자책의 특성을 살린 형식이 있다고 생각합니다. 한빛이 지금 생각하고 추구하는, 개발자를 위한 리얼타임 전자책은 이렇습니다. 1. eBook Only - 빠르게 변화하는 IT 기술에 대해 핵심적인 정보를 신속하게 제공합니다. 500페이지 가까운 분량의 잘 정리된 도서(종이책)가 아니라, 핵심적인 내용을 빠르게 전달하기 위해 조금은 거칠지만 100페이지 내외의 전자책 전용으로 개발한 서비스입니다. 독자에게는 새로운 정보를 빨리 얻을 수 있는 기회가 되고, 자신이 먼저 경험한 지식과 정보를 책으로 펴내고 싶지만 너무 바빠서 엄두를 못 내는 선배, 전문가, 고수 분에게는 보다 쉽게 집필할 수 있는 기회가 될 수 있으리라 생각합니다. 또한 새로운 정보와 지식을 빠르게 전달하기 위해 O'Reilly의 전자책 번역 서비스도 하고 있습니다. 2. 무료로 업데이트되는, 전자책 전용 서비스입니다. 종이책으로는 기술의 변화 속도를 따라잡기가 쉽지 않습니다. 책이 일정 분량 이상으로 집필되고 정리되어 나오는 동안 기술은 이미 변해 있습니다. 전자책으로 출간된 이후에도 버전 업을 통해 중요한 기술적 변화가 있거나 저자(역자)와 독자가 소통하면서 보완하여 발전된 노하우가 정리되면 구매하신 분께 무료로 업데이트해 드립니다.

(14)

3. 독자의 편의를 위해 DRM-Free로 제공합니다. 구매한 전자책을 다양한 IT 기기에서 자유롭게 활용할 수 있도록 DRM-Free PDF 포맷으로 제공합니다. 이는 독자 여러분과 한빛이 생각하고 추구하는 전자책을 만들어 나가기 위해 독자 여러분이 언제 어디서 어떤 기기를 사용하더라도 편리하게 전자책을 볼 수 있도록 하기 위함입니다. 4. 전자책 환경을 고려한 최적의 형태와 디자인에 담고자 노력했습니다. 종이책을 그대로 옮겨 놓아 가독성이 떨어지고 읽기 힘든 전자책이 아니라, 전자책의 환경에 가능한 한 최적화하여 쾌적한 경험을 드리고자 합니다. 링크 등의 기능을 적극적으로 이용할 수 있음은 물론이고 글자 크기나 행간, 여백 등을 전자책에 가장 최적화된 형태로 새롭게 디자인하였습니다. 앞으로도 독자 여러분의 충고에 귀 기울이며 지속해서 발전시켜 나가도록 하겠습니다. 지금 보시는 전자책에 소유권한을 표시한 문구가 없거나 타인의 소유권한을 표시한 문구가 있다면 위법하게 사용하고 있을 가능성이 높습니다. 이 경우 저작권법에 의해 불이익을 받으실 수 있습니다. 다양한 기기에 사용할 수 있습니다. 또한 한빛미디어 사이트에서 구입하신 후에는 횟수에 관계없이 내려받으실 수 있습니다. 한빛미디어 전자책은 인쇄, 검색, 복사하여 붙이기가 가능합니다. 전자책은 오탈자 교정이나 내용의 수정·보완이 이뤄지면 업데이트 관련 공지를 이메일로 알려드리며, 구매하신 전자책의 수정본은 무료로 내려받으실 수 있습니다. 이런 특별한 권한은 한빛미디어 사이트에서 구입하신 독자에게만 제공되며, 다른 사람에게 양도나 이전은 허락되지 않습니다.

(15)

차례

0 1 부트스트랩 스캐폴딩 1 1.1 부트스트랩이란 무엇인가 1 1.2 부트스트랩 파일 구조 2 1.3 기본 HTML 템플릿 3 1.4 글로벌 스타일 4 1.5 기본 그리드 시스템 5 1.6 가변적 그리드 시스템 7 1.7 컨테이너 레이아웃 9 1.8 반응형 디자인 9 0 2 부트스트랩 CSS 13 2.1 타이포그래피 13 2.2 코드 23 2.3 테이블 24 2.4 폼 28 2.5 버튼 46 2.6 이미지 50 2.7 아이콘 51

(16)

0 3 부트스트랩 레이아웃 구성요소 55 3.1 드롭다운 메뉴 55 3.2 버튼 그룹 57 3.3 드롭다운 메뉴의 버튼 59 3.4 내비게이션 요소 62 3.5 내비게이션 바 73 3.6 브레드크럼 80 3.7 페이지네이션 81 3.8 라벨 85 3.9 뱃지 86 3.10 타이포그래픽 요소 86 3.11 썸네일 88 3.12 알림 메시지 90 3.13 상태 바 91 3.14 미디어 오브젝트 93 3.15 기타 97 0 4 부트스트랩 자바스크립트 플러그인 100 4.1 개요 100 4.2 전환 102

(17)

4.3 모달 102 4.4 드롭다운 108 4.5 스크롤스파이 110 4.6 토글 탭 112 4.7 툴팁 115 4.8 팝오버 118 4.9 알림 121 4.10 버튼 122 4.11 콜랩스 126 4.12 캐러젤 131 4.13 타이프어헤드 135 4.14 어픽스 137 0 5 부트스트랩 활용하기 139 5.1 GitHub 프로젝트 139 5.2 부트스트랩 사용자 정의하기 140

5.3 Built with Bootstrap 145

(18)

1

1장 부트스트랩 스캐폴딩

1 |

부트스트랩 스캐폴딩

1.1 부트스트랩이란 무엇인가?

부트스트랩Bootstrap_{은 마크 오토}Mark Otto_{와 제이콥 쏜톤}Jacob Thornton_{이 트위터 직원}

이었을 당시 제작한 오픈 소스 제품으로, 사내 엔지니어의 프런트-엔드 툴셋을 표 준화하고자 제작되었다. 마크 오토는 부트스트랩을 런칭하면서 트위터 개발자 블 로그에 남긴 글에서 이 프로젝트를 아래와 같이 소개하고 있다. 트위터 초창기에는 프런트-엔드 요구사항에 대응하기 위해서 엔지니어 각각 은 익숙한 라이브러리를 마음대로 쓰곤 했지만, 이처럼 다양한 개별 애플리케 이션 간 불일치는 이들 애플리케이션을 확장하거나 보수하는 것을 어렵게 만 들었다. 트위터의 첫 번째 핵위크Hackweek_{에서 이러한 문제점들에 대한 해답으} 로 부트스트랩이 제시되었고 빠르게 개발이 진행되었다. 핵위크가 끝나갈 때 쯤, 드디어 우리는 전사에서 엔지니어 모두가 사용할 수 있는 안정적인 버전을 만들어냈다. - Mark Otto - 마크 오토 https://dev.twitter.com/ 2011년 8월 출시되자마자 부트스트랩은 큰 인기를 끌었다. CSS 기반으로만 이루 어진 프로젝트에서 폼, 버튼과 관련 있는 자바스크립트 플러그인과 아이콘의 호 스트host_{를 포함할 수 있도록 진화했으며, 반응형 웹 디자인과 12열로 나뉜 940픽} 셀 너비의 그리드를 제공하고 있다. 또한, 각자의 웹 사이트에 포함하고 싶은 CSS 와 자바스크립트 기능을 선택하여 원하는 대로 빌드를 변경할 수 있도록 해주는 부 트스트랩 웹 사이트01_{의 빌드 툴은 주요 기능 중 하나이다. 이러한 기능은} 프런트-01　http://twitter.github.io/bootstrap/

(19)

2 1장 부트스트랩 스캐폴딩 엔드 웹 개발을 한 발짝 더 나아갈 수 있게 하였고 미래지향적인 디자인과 개발의 안정적인 기반에서 프런트-엔드 웹 구축을 가능하게 만들었다. 루트 디렉터리에 CSS나 자바스크립트 몇 개를 집어넣는 것으로 부트스트랩을 간단히 시작할 수 있 다. 부트스트랩은 웹 사이트의 루트 디렉터리에 CSS나 자바스크립트를 몇 개 포함 하는 것처럼 간단하다. 부트스트랩에는 새로운 프로젝트를 시작하는 사람에게 몇 가지 유용한 요소가 있다.

개인적으로는 에릭 마이어Eric Meyer_{의 ‘Reset CSS’ 같은 도구로 프로젝트를 시작하고}

그 이후 진행하는 편이다. 그런데 부트스트랩을 이용하면 CSS 파일 bootstrap.css 와 필요하면 자바스크립트 파일 bootstrap.js를 웹 사이트에 추가하는 것만으로 모 든 준비 작업은 끝난다.

1.2 부트스트랩 파일 구조

bootstrap/ css/ bootstrap.css bootstrap.min.css js/ bootstrap.js bootstrap.min.js img/ glyphicons-halflings.png glyphicons-halflings-white.png README.md 부트스트랩을 내려받으면 위와 같이 css, js, img 폴더를 볼 수 있다. 일단, 이 폴더 를 프로젝트 루트에 추가해보자. 여기에는 CSS와 자바스크립트의 미니파이Minify

(20)

3 1장 부트스트랩 스캐폴딩 버전 또한 폴더에 포함되어 있긴 하지만, 압축하지 않은 버전과 미니파이 버전을 모두 웹 사이트에 추가할 필요는 없다. 간단하게 필자는 개발하는 동안은 압축하지 않은 버전을 사용하고, 제작 시 압축 버전으로 변경하곤 한다.

1.3 기본 HTML 템플릿

일반적 웹 프로젝트는 아래와 같은 형태의 HTML 코드를 가지고 있다. <!DOCTYPE html> <html> <head>

<title>Bootstrap 101 Template</title>

</head> <body> <h1>Hello, world!</h1> </body> </html> 부트스트랩을 사용하려면 CSS 스타일시트와 자바스크립트 파일에 대한 링크를 넣 어줘야 한다. <!DOCTYPE html> <html> <head>

<title>Bootstrap 101 Template</title>

<linkhref="css/bootstrap.min.css" rel="stylesheet">

</head>

<body>

<h1>Hello, world!</h1>

(21)

4 1장 부트스트랩 스캐폴딩 </body> </html> HTML5의 독타입Doctype_{을 잊어서는 안 된다. <!DOCTYPE html>을 추가해야 모든 최신 브라} 우저가 표준 모드로 전환된다.

1.4 글로벌 스타일

부트스트랩에는 이미 구축된 몇 가지 항목이 있다. 부트스트랩 2.0에서는 부트스 트랩 1.0에 속해있던 오래된 ‘리셋 블록reset block_{’ 대신, ‘HTML5 보일러플레이}

트’02_{의 일부인 니콜라스 갈라거}Nicolas Gallagher_{의 ‘Normalize.css’}03_{을 사용하며 이}

는 bootstrap.css 파일에 포함되어 있다.

특별히 아래의 기본 스타일에서는 타이포그래피와 링크에 특별한 처리를 해두었다.

● Body에서 margin 속성을 제거하였다. 콘텐츠는 브라우저 창의 가장자리에

여백 없이 정확히 맞을 것이다.

● Body에 background-color: white; 속성을 적용했다.

● @baseFontFamily, @baseFontSize, @baseLineHeight 폰트 속성을 타이

포그래피의 기본 속성으로 사용한다. 이는 웹 사이트에서 헤더의 크기와 콘텐 츠를 비슷한 줄 간격을 유지하도록 만들어 준다. ● @linkColor을 사용하여 글로벌 링크 색상을 설정하고 :hover를 사용하는 경 우에만 언더라인 링크를 적용한다. 02　http://html5boilerplate.com/ 03　http://necolas.github.io/normalize.css/

(22)

5 1장 부트스트랩 스캐폴딩 지정된 색상이 마음에 들지 않거나 기본 설정을 바꾸고 싶다면 .less 파일의 글로벌 스타일을 변경하면 된다. 이를 위해, scaffolding.less 파일을 업데이트하거나 스타일시트의 색상을 다시 지정하 면 된다.

1.5 기본 그리드 시스템

부트스트랩의 ‘기본 그리드 시스템default grid system_{’(그림 1-1)은 12개의 열}column_을

활용하여 반응형 기능이 활성화되지 않은 940픽셀 너비의 컨테이너를 만든다. 반 응형 CSS 파일이 추가되면, 그리드 시스템은 뷰포트viewport_{에 따라 너비가 724픽} 셀 또는 1170픽셀로 변경된다. 태블릿이나 작은 기기와 같이 767픽셀 이하의 뷰 포트인 경우, 열의 너비는 가변적으로 적용되고 세로 나열stack vertically_{이 된다. 기} 본 그리드의 경우 각 열의 너비는 60픽셀이며 오프셋은 왼쪽으로 20픽셀이 적용된 다. 그림 1-1은 12개의 열로 가능한 그리드를 보여주는 예제다. 그림 1-1 기본 그리드 시스템 1.5.1 기본 그리드 HTML 간단한 레이아웃을 생성하려면 .row 클래스를 생성하고 적절한 수의 .span* 열을 추가한 <div>요소를 가진 컨테이너를 만들면 된다. 앞에서 이야기했듯이 부트스트 랩은 12열의 그리드(레이아웃)를 가지므로, .span* 열의 합을 12로 맞춰주기만 하 면 된다. 3-6-3 레이아웃이나 4-8, 3-5-4, 2-8-2... 등(계속 나열할 수도 있지만 무슨

(23)

6

말을 하려는지 요지를 파악했으리라 믿는다)의 레이아웃이 가능하다. 아래 코드는 .span8과 .span4, 즉 합하면 12열이 되는 것을 보여준다.

1.5.2 오프셋 열

.offset* 클래스를 사용하면 열을 오른쪽으로 원하는 만큼 이동할 수 있다. 각 클 래스는 span을 .offset*에 지정된 너비만큼 옮기므로 아래 코드의 .offset2은 .span7을 두 열 이동시키는 것이다(그림 1-2를 보자).

그림 1-2 오프셋 그리드

1.5.3 중첩 열

(24)

7

span 수와 동일한 .span* 클래스를 새로운 .row 클래스와 함께 추가하기만 하면 된다(그림 1-3).

Level 1 of column

<div class="span6">Level 2</div> <div class="span3">Level 2</div> </div>

</div> </div>

그림 1-3 그리드 중첩

1.6 가변적 그리드 시스템

‘가변적 그리드 시스템fluid grid system_{’은 열의 너비를 지정할 때 픽셀이 아니라 퍼센}

트를 사용한다. 이는 퍼센트를 사용함으로써 주요 화면 해상도와 기기들에 대해서 적절한 비율을 보장하므로, 반응형 웹에 대응할 수 있는 능력은 고정 그리드 시스 템과 같다. 기본 그리드 HTML에서 .row 클래스를 .row-fluid 클래스로 변경하기 만 하면 원하는 열을 가변적으로 만들 수 있다. 열의 클래스를 변경할 필요가 없으 므로 고정 그리드와 가변적 그리드 간의 변환은 매우 쉽다. 오프셋을 주고 싶다면 고정 그리드 시스템에서 했던 것과 똑같이 하면 된다. 즉 .offset* 클래스를 열에 추가하여 원하는 수의 열만큼 이동시키면 된다.

(25)

8

<div class="row-fluid"> <div class="span4">...</div> <div class="span4 offset2">...</div> </div> 하지만 가변적 그리드를 중첩하는 것은 조금 다르다. 너비 단위에 퍼센트를 사용해 야 하므로 각 .row 클래스는 열의 수를 12로 다시 초기화한다. 예를 들어 .span8 클래스 내부에서 중첩하여 콘텐츠를 반으로 나누려면 .span4 클래스를 두 개 사용 하는 것이 아니라 .span6 클래스 두 개를 사용해야만 한다(그림 1-4). 이 경우 콘텐 츠가 컨테이너를 100% 채우기 때문에 반응형 콘텐츠를 위해 사용할 수 있다.

</div>

</div> </div>

(26)

9 1장 부트스트랩 스캐폴딩

1.7 컨테이너 레이아웃

고정 너비의 레이아웃을 웹 페이지 중앙에 추가하려면 간단하게 콘텐츠를 <div class="container">...</div> 내에 넣어주면 된다. 만약 가변적 레이아웃을 사용 하면서 모든 걸 컨테이너 안에 넣고 싶다면 <div class="container-fluid">...</ div>를 사용하자. 애플리케이션을 제작하거나 관리자 페이지 등과 관련된 프로젝 트에서는 가변적 레이아웃을 사용하는 것이 좋다.

1.8 반응형 디자인

부트스트랩에서 반응형 기능을 사용하려면 <meta> 태그를 웹 페이지의 <head> 범위 내에 추가해야 한다. 만약 컴파일한 소스를 미리 내려받지 않았다면 반응형 CSS 파일(bootstrap-responsive.css) 또한 추가해줘야만 한다. 이를 보여주는 예제는 아래와 같다. <!DOCTYPE html> <html> <head>

<title>My amazing Bootstrap site!</title>

<metaname="viewport" content="width=device-width, initial-scale=1.0">

<linkhref="/css/bootstrap.css"rel="stylesheet">

<linkhref="/css/bootstrap-responsive.css"rel="stylesheet">

</head>

부트스트랩을 사용하려고 하는데 반응형 기능이 동작하지 않는다면 위와 같은 태그가 있는지 확인해야 한다. 모든 웹 페이지 프로젝트가 반응형을 지원할 필요는 없으므로 해당 기능은 현재 기본으로 추가되어있지 않다. 그래서 부트스트랩의 창시자는 개발자로 하여금 매번 이 기능을 삭제하도록 하기보 다는 필요할 때만 사용하게끔 해놓았다.

(27)

10 1장 부트스트랩 스캐폴딩 1.8.1 반응형 디자인이란? 반응형 디자인은 콘텐츠를 보는 기기에 맞추어 웹 페이지의 콘텐츠를 최적화하는 방법을 말한다. 예를 들어, 데스크탑에서는 일반적 웹 사이트뿐만 아니라 많은 사 람들이 사용하는 대화면 디스플레이에 최적화된 와이드스크린 레이아웃의 웹 사 이트를 볼 수도 있다는 것이다. 태블릿은 세로 또는 가로 레이아웃을 활용하여 그 에 최적화된 레이아웃을 가져야 하며, 휴대전화는 태블릿보다 너비가 훨씬 좁게 디 자인해야 한다. 이처럼 너비가 다른 경우를 위해 부트스트랩은 CSS 미디어 쿼리를 사용하여 브라우저 뷰포트의 너비를 측정한 뒤 조건문을 사용하여 스타일 시트의 어떤 부분을 로드해야 할지 변경해준다. 이처럼 부트스트랩은 브라우저 뷰포트의 너비를 사용해 비율이나 너비를 조합해서 해당 브라우저의 콘텐츠를 최적화할 수 도 있지만, 대부분은 min-width와 max-width 프로퍼티에 의존하는 편이다. 부트스트랩은 CSS 미디어 쿼리에 따라 다섯 가지의 레이아웃을 지원한다. 가장 큰 레이아웃은 너비가 70픽셀인 열을 가지고 있고, 평범한 레이아웃은 너비가 60픽 셀인 열을 가지고 있다. 태블릿 레이아웃의 경우 42픽셀의 열이며, 이보다 작은 경 우에는 각 열이 세로로 나열되고 기기의 총 너비가 각 열의 크기로 되도록 가변적 으로 적용된다(표 1-1). 표 1-1 반응형 미디어 쿼리 종류 레이아웃 너비 열 너비 간격 큰 스크린 1200px 이상 70px 30px 기본 980px 이상 60px 20px 세로 태블릿 768px 이상 42px 20px 폰이나 태블릿 767px 이하 가변형 열, 고정 너비 없음 가변형 열, 고정 너비 없음 폰 480px 이하 가변형 열, 고정 너비 없음 가변형 열, 고정 너비 없음

(28)

11 1장 부트스트랩 스캐폴딩 미디어 쿼리에 근거하여 사용자 정의의 CSS를 추가하려면, 아래와 같은 미디어 쿼 리로 모든 규칙을 하나의 CSS 파일에 포함하여 사용하거나 혹은 아예 다른 CSS 파 일을 만들면 된다. /* Large desktop */ /* 큰 데스크탑 */ @media (min-width: 1200px) { ... }

/* Portrait tablet to landscape and desktop */ /* 세로 태블릿부터 가로 태블릿과 데스크탑 */

@media (min-width: 768px) and (max-width: 979px) { ... } /* Landscape phone to portrait tablet */

/* 가로 폰부터 세로 태블릿 */

@media (max-width: 767px) { ... } /* Landscape phones and down */ /* 가로 폰, 그 이하 */ @media (max-width: 480px) { ... } 규모가 큰 웹 사이트에서 각 미디어 쿼리를 개별의 CSS파일로 분리하고 싶다면 HTML 파일에서 <head> 안에 <link> 태그로 해당 스타일시트를 호출하면 된다. 이러한 방법은 파일 사이즈를 작게 만드는 데 효과적이나, 해당 사이트가 반응형 웹 사이트인 경우 HTTP 접속 요청이 늘어날 가능성이 있다. 이를 피하려면 CSS를 컴파일할 때 LESS를 사용한다면 이 모두를 한 파일로 처리할 수 있다.

<linkrel="stylesheet" href="base.css" />

<linkrel="stylesheet" media="(min-width: 1200px)"href="large.css"/> <linkrel="stylesheet" media="(min-width: 768px) and (max-width: 979px)"

(29)

12

href="tablet.css"/>

<linkrel="stylesheet" media="(max-width: 767px)"href="tablet.css"/> <linkrel="stylesheet" media="(max-width: 480px)"href="phone.css"/>

헬퍼 클래스 부트스트랩은 반응형 개발을 하기 위해 헬퍼helper_{클래스를 몇 개 포함하고 있다} (표 1-2). 하지만 제한적으로 사용하기 바란다. 필자가 본 헬퍼 클래스 사용의 예에 는 특정 레이아웃에 근거하여(맞는) 사용자 정의 요소를 로딩하는 정도가 있었다. 잘 만들어진 메인 레이아웃의 헤더가 있지만, 모바일에서는 이를 줄여 몇몇 요소 만 남기고 싶다면 .hidden-phone 클래스를 사용하여 헤더에서 전체 혹은 일부 DOMDocument Object Model_{요소를 숨기면 된다.}

표 1-2 미디어 쿼리 헬퍼 클래스

클래스 폰 태블릿 데스크탑

.visible-phone Visible Hidden Hidden

.visible-tablet Hidden Visible Hidden

.visible-desktop Hidden Hidden Visible

.hidden-phone Hidden Visible Visible

.hidden-tablet Visible Hidden Visible

.hidden-desktop Visible Visible Hidden

개발을 할 때 참고할 두 가지 주요 방법이 있다. 한 가지는 많은 사람들이 말하는 ‘모바일 환경부터 시작하여 플랫폼을 구축하고 데스크탑이 이를 따르도록 만들어 라’이며, 다른 하나는 부트스트랩은 이와 반대로 ‘어디서나 동작하는 완전한 기능 을 갖춘 데스크탑 웹 사이트를 생성하라’이다.

(30)

13 2장 부트스트랩 CSS

2 |

부트스트랩 CSS

부트스트랩의 핵심은 클래스와 사용자 스타일을 통해 쉽게 수정/개선할 수 있도록 스타일링한 기본 HTML 요소의 집합이라는 점이다.

2.1 타이포그래피

타이포그래피부터 시작해보자. 부트스트랩은 기본 폰트 스택으로 Helvetica Neue, Helvetica, Arial, sansserif체를 사용하고 있다. 이는 모두 표준 폰트로 대부분의 컴퓨터가 기본으로 내장하고 있으며, 만약 이러한 폰트가 내장되지 않은 경우라면 sanserif 계통의 폰트로 변경하여 브라우저가 이러한 기본 폰트를 사용할 수 있도 록 한다. Body의 font-size는 14픽셀, line-height는 20픽셀로 기본 지정되어 있으며 <p> 태그(paragraphs)의 margin-bottom은 10픽셀이나 line-height의 반으로 지정한다. 2.1.1 헤딩 부트스트랩은 여섯 단계의 표준 헤딩를 지원하며(그림 2-1), <h1> 은 36픽셀, <h6> 은 12픽셀까지 작아진다. 참고로, 기본 Body 폰트 크기는 14픽셀이다. 또한, 이러 한 헤딩에 인라인 서브 헤딩을 추가하고자 하면, <small> 태그를 원하는 곳에 추가 하면 원래의 헤딩보다 밝은 색상에 조금 더 작은 글자가 출력될 것이다. 예를 들어 <h1>의 경우, 이 태그를 추가하면 24픽셀 크기에 보통 굵기(볼드체가 아닌)를 가지며 회색 글자가 나온다. h1small { font-size:24px; font-weight:normal;

(31)

14 2장 부트스트랩 CSS line-height:1; color:#999; } 그림 2-1 헤딩

2.1.2 Lead Body (Body 강조)

특정 단락paragraph_{을 강조하고 싶다면, 해당 단락에 class="lead"구절을 추가(즉,}

.lead 클래스를 추가)하도록 하자(그림 2-2). 이를 적용하면 폰트 크기가 커지고, 굵기 는 얇아지며 줄 간격은 더 높아진다. 보통 한 섹션의 첫 단락 몇 개에 적용하는 경 우가 많긴 하지만, 사실 어느 부분에 사용해도 상관없다.

<pclass="lead">Bacon ipsum dolor sit amet tri-tip pork loin ball tip frankfurter

swine boudin meatloaf shoulder short ribs cow drumstick beef jowl. Meatball chicken sausage tail, kielbasa strip steak turducken venison prosciutto.

Chuck filet mignon tri-tip ribeye, flank brisket leberkas. Swine turducken turkey shank, hamburger beef ribs bresaola pastrami venison

(32)

15 2장 부트스트랩 CSS rump.</p> 그림 2-2 Lead Body 클래스 2.1.3 강조 위에서 설명한 것처럼 <small> 태그를 헤딩에 적용하는 것 외에도 이를 Body 에 사용할 수도 있다. <small> 태그를 Body의 텍스트에 적용하면 원래 사이즈의 85%로 줄어든다. 2.1.4 볼드 텍스트를 강조하고 싶다면 이를 <strong> 태그 범위에 넣어주자. 이 태그는 선택 한 텍스트에 fontweight:bold라는 속성을 추가해주는 역할을 한다. 2.1.5 이탤릭 이탤릭체로 변경하고 싶다면 원하는 콘텐츠를 <em> 태그 안에 넣어주자. “em”은 강조emphasis_{라는 단어에서 나온 말로 텍스트에 강한 강조 효과를 준다.}

<em>이나 <strong> 태그 대신에 왜 <b>나 <i> 태그를 쓰지 않는지 궁금하지 않은가? HTML5 에서 <b> 태그는 추가적인 중요함을 나타내지 않고 단어나 구절을 강조할 때 - 예를 들어 주요 용어나 이 름 - 쓰인다. 반면, <i>태그는 대부분 음성이나 기술 용어, 내부 대화 등에 쓰고 있다. 이처럼 <b>와 <i> 태 그의 의미 변화에 대해 더 알고 싶다면 W3.org의 기사를 확인해보자.

(33)

16

2장 부트스트랩 CSS

2.1.6 강조 클래스

<strong>과 <em> 태그와 함께 부트스트랩은 텍스트를 강조할 수 있는 다른 클래 스 또한 제공한다(그림 2-3). 이는 단락이나 span 열에 적용할 수 있다.

<pclass="muted">This content is muted</p>

<pclass="text-warning">This content carries a warning class</p> <pclass="text-error">This content carries an error class</p> <pclass="text-info">This content carries an info class</p> <pclass="text-success">This content carries a success class</p>

<p>This content has <em>emphasis</em>, and can be <strong>bold</strong></p>

그림 2-3 강조 클래스

약어

HTML의 <abbr> 요소는 WWW나 HTTP와 같은(그림 2-4) 약어나 약자의 마크업 을 제공한다. 약어를 마크업하면 브라우저나 철자법 검사 프로그램, 번역 시스템, 검색 엔진에 유용한 정보를 보낼 수 있다. 부트스트랩은 <abbr> 요소의 밝은 점선

(34)

17

을 글자 아래쪽에 나타나도록 스타일링 했으며 마우스를 가져다 댔을 때 전체 글자 가 보이도록 했다. (해당 값을 <abbr> 요소의 title 속성에 추가해주었을 때만 가능하다.)

<abbrtitle="Real Simple Syndication">RSS</abbr>

그림 2-4 약어 예제

이보다 살짝 작은 글자 크기를 원한다면 .initialism 클래스를 <abbr> 요소에 추가 해주자(그림 2-5).

<abbrtitle="rolling on the floor, laughing out loud">That joke had me ROTFLOL </abbr> 그림 2-5 다른 약어 예제 주소 <address> 요소를 웹 페이지에 추가하면 스크린 리더(시각 장애인이 컴퓨터 화면에 출 력되는 내용을 알 수 있도록 음성으로 읽어 주는 프로그램)나 검색 엔진이 글에 있는 실제 주 소와 전화번호를 찾는 것을 도와줄 수 있다(그림 2-6). 또한 이메일 주소를 마크업할

(35)

18 2장 부트스트랩 CSS 때 사용할 수도 있다. <address> 요소는 기본으로 display:block; 속성을 지정하 여 글의 줄이 나누어져 있지 않으므로 주소 텍스트에 <br> 태그를 사용해서 줄을 바꿔주어야 한다. (예: 상세 주소와 도시를 다른 줄로 나눔) <address>

<strong>O’Reilly Media, Inc.</strong><br>

1005 Gravenstein HWY North<br>

Sebastopol, CA 95472<br>

<abbrtitle="Phone">P:</abbr><a href="tel:+17078277000">(707) 827-7000</ a>

</address>

<strong>Jake Spurlock</strong><br>

<a href="mailto:#">flast@oreilly.com</a> </address>

그림 2-6 Address 태그

인용

(36)

19 2장 부트스트랩 CSS 싶다면 해당 텍스트에 <blockquote> 태그를 추가하자. 보기 좋게 줄을 적절히 바 꿔주려면 각 서브섹션을 <p> 태그로 한 번 더 감싸주는 것이 좋다. 부트스트랩에서 이 태그에 제공하는 기본 스타일링으로 텍스트에 들여쓰기 효과가 추가되며, 왼쪽 에 굵은 회색 테두리를 추가해준다. 인용문의 출처를 밝히려면 <small> 태그를 추 가하고 출처의 이름을 <cite> 태그 사이에 입력해준 후 </small> 태그로 닫는다. <blockquote>

<p>That this is needed, desperately needed, is indicated by the incredible uptake of Bootstrap. I use it in all the server software I’m working on. And it shows through in the templating language I’m developing, so everyone who uses it will find it’s “just there" and works, any time you want to do a Bootstrap technique. Nothing to do, no libraries to include. It’s as if it were part of the hardware. Same approach that Apple took with the Mac OS in 1984.</p>

<small>Developer of RSS, <citetitle="Source Title">Dave Winer</cite>

</small> </blockquote>

이 모두를 적용하면 그림 2-7과 같은 결과를 얻을 수 있다. 그림 2-7 기본 인용문

(37)

20 2장 부트스트랩 CSS 만약 <blckquote> 태그를 사용하여 오른쪽으로 콘텐츠를 정렬하고 싶다면 해당 태그에 .pull-right 클래스를 추가하자. 글이 오른쪽으로 정렬될 뿐만 아니라 전체 인용구가 오른쪽 부분에 뜨게 된다. 이는 그림 2-8처럼 보기 좋은 풀 인용pull-quote_{을 생성해준다.} 그림 2-8 오른쪽 정렬 blockquote 2.1.7 목록 부트스트랩은 HTML이 제공하는 세 가지 주요 목록 타입인 순서 목록ordered list_{, 일}

반 목록unordered list_{, 용어 목록}definition list_{을 지원하며 이의 스타일링을 제공하고 있} 다. 일반 목록(UL)은 특별한 순서가 없는 목록으로 앞에 기호(보통 점)으로 시작하도 록 스타일링되어 있다.

일반 목록

일반 목록 생성할 때 목록에서 점을 지우고 싶다면 <ul> 태그로 목록을 열 때 class="unstyled" 를 삽입해주면 된다(그림 2-9).

<h3>Favorite Outdoor Activities</h3> <ul>

<li>Backpacking in Yosemite</li>

<li>Hiking in Arches <ul>

<li>Delicate Arch</li>

<li>Park Avenue</li>

(38)

21

</li>

<li>Biking the Flintstones Trail</li> </ul> 그림 2-9 일반 목록 필자는 개인적으로 <br> 태그를 사용하는 것을 매우 싫어하기 때문에 한 줄 간격으로 행을 바꾸 고 싶으면 UL에 .unstyle 클래스를 써서 정렬하곤 한다. 예를 들어, 그림 2-6 같이 간단한 주소를 쓰고 싶다면 각 줄에 <li>태그를 사용하는 것이다. 이것이 텍스트를 마크업하는 데 있어 더 의미 있는 방법이라 고 생각한다. 순서 목록 순서 목록은 순차적으로 정렬하는 목록으로, 기호가 아니라 번호가 각 줄의 앞에 표시된다(그림 2-10). 이 목록은 작업 목록이나 가이드 항목, 블로그 포스트의 코멘 트 목록처럼 번호를 매겨야하는 항목을 만들어야 할 때 사용하면 편리하다.

<h3>Self-Referential Task List</h3> <ol>

<li>Turn off the internet.</li>

<li>Write the book.</li>

<li>... Profit?</li> </ol>

(39)

22

그림 2-10 순서 목록

용어 목록

부트스트랩에서 제공하는 목록 중 세 번째는 용어 목록이다. 용어 목록(DL)은 OL

이나 UL과 다르게 블록 레벨 요소block-level_{인 <li> 대신, 목록의 각 항목이 <dt>}

와 <dl> 요소를 모두 가지게 된다. <dt>란 definition term, 즉 용어란 뜻으로, 마치 사전처럼 정의되어 있는 용어 혹은 구절을 말한다. 두 번째 요소인 <dd>는 definition desctiption으로 <dt>의 설명이란 뜻이다. 오랜 시간 마크업을 하다보면 사람들이 헤딩을 순서 목록 내에 사용하는 것을 볼 수 있다. 이는 어느 정도 동작을 하기는 하지만 텍스트를 마크업하기 위한 방법 중 가장 의미 있는 것은 아니다. 더 나은 방법은 <dl>을 생성하고 원하는 대로 헤딩과 텍스트를 사용하여 <dt>와 <dd>을 스타일링하는 것이다(그림 2-11). 그렇긴 해도 부트스트랩은 깔끔한 기본 스타일과 각 용어의 side-by-side 레이아웃 옵션도 제 공하고 있으므로 이를 사용하는 것도 좋다.

<h3>Common Electronics Parts</h3> <dl>

<dd>A light-emitting diode (LED) is a semiconductor light source.</ dd>

<dt>Servo</dt>

<dd>Servos are small, cheap, mass-produced actuators used for radio control and small robotics.</dd>

(40)

23 2장 부트스트랩 CSS </dl> 그림 2-11 용어 목록 <dt>를 왼쪽 면에, <dd>는 오른쪽에 두는 레이아웃으로 변경하고 싶으면 <dl> 태 그 시작 시 class="dl-horizontal"을 추가한다. (그림 2-12를 보자.) 그림 2-12 가로 용어 목록 가로 용어 목록은 왼쪽 열에 있는 <dt>가 너무 길면 text-overflow 속성을 이용해서 글자를 자 른다. 또한 뷰포트가 dl보다 좁으면 자동으로 기본 레이아웃로 변경될 것이다.

2.2 코드

부트스트랩을 사용해서 코드를 출력하는 방법은 크게 두 가지가 있다. 첫 번째는 <code> 태그이며 두 번째는 <pre> 태그다. 코드를 인라인으로 출력하려는 경우 반드시 <code> 태그를 사용해야 하며, 독립 블록 요소로 출력해야 하거나 코드가 여러 줄일 때는 반드시 <pre> 태그를 사용해야만 한다.

<p>Instead of always using divs, in HTML5, you can use new elements like

(41)

24

<code><footer></code>. The html should look something like this:</p> <pre>

<h1>Article Heading</h1>

</article>

</pre>

<pre>와 <code> 태그를 사용 시 해당 태그를 열고 닫을 때 유니코드 변수인 <와 >을 사 용해야 함을 잊지 말자.

2.3 테이블

표 2-1 부트스트랩이 지원하는 테이블 요소 Tag Description <table> 테이블 형태로 데이터를 표시하는 래핑Wrapping_요소 <thead> 테이블의 열에 라벨을 지정하기 위한 테이블 헤더 행(<tr>)에 대한 컨테이너 요소. <tbody> 테이블 body의 테이블 행(<tr>) 에 대한 컨테이너 요소 <tr> 한 행에 표시되는 테이블 셀들에 대한 컨테이너 요소 (<td> 나 <th>) <td> 기본 테이블 셀 <th> 열(이나 행, 범위나 위치에 따라 다르다)을 위한 특별한 테이블 셀로 <thead>내에 써야 한다 <caption> 테이블이 가지고 있는 것에 대한 설명이나 요약. 특히 스크린 리더에 유용하게 쓰인다. 만약 적당한 padding 값과 가로선 정도만 가지고 있는 기본 테이블을 원한다면 .table 의 기본 클래스만 사용하면 된다(그림 2-13). 기본 레이아웃으로 모든 <td> 요소의 위쪽 테두리만 표시된다.

(42)

25

<tableclass="table">

<caption>...</caption> <thead> <tr> <th>...</th> <th>...</th> </tr> </thead> <tbody> <tr> <td>...</td> <td>...</td> </tr> </tbody> </table> 그림 2-13 기본 테이블 클래스 2.3.1 추가 테이블 클래스 기본 테이블 마크업과 .table 클래스와 더불어 마크업을 스타일링할 때 사용할 수 있는 네 개의 추가 클래스로 table-striped, .table-bordered, .table-hover,. table-condensed가 있다.

Striped table

(43)

26 2장 부트스트랩 CSS 01_{(그림 2-14). 이 기능은 CSS 셀렉터인 CSS :nth를 이용해 구현하므로 인터넷 익스} 플로러 7과 8에서는 지원하지 않는다. 그림 2-14 .table-striped 클래스 Bordered table .table-bordered을 사용하면 그림 2-15와 같이 각 요소(셀)에 바깥쪽 테두리를 추 가하며 전체 테이블에 둥근 모서리를 생성한다. 그림 2-15 .table-bordered 클래스 Hover table 그림 2-16은 .table-hover 클래스를 보여주고 있다. 마우스 커서가 해당 요소(셀) 위로 올라가는 경우 연한 회색 배경을 추가한다. 그림 2-16 .table-hover 클래스 01　홀수 행에 밝은 회색 배경을 추가함으로써 줄무늬가 생성된다

(44)

27 2장 부트스트랩 CSS Condensed table .table-condensed 클래스를 추가하면 그림 2-17처럼 행의 padding 값을 반으 로 줄여 테이블의 폭을 좁게 만든다. 이 클래스는 많은 자료를 입력해야 할 때 유용 하다. 그림 2-17 .table-condensed 클래스 2.3.2 테이블 행 클래스 표 2-2의 클래스는 테이블 행의 배경색을 바꿀 때 사용한다(그림 2-18). 표 2-2 테이블 행 클래스

Class Description Background color

.success 성공하거나 긍정적인 사항을 표시 녹색 .error 위험하거나 잠재적으로 부정적인 사항을 표시 적색 .warning 주의해야할 경고를 표시 황색 .info 기본 스타일의 대안으로 사용 청색 폰 480px 이하 가변형 열, 고정 너비 없음 그림 2-18 테이블 행 클래스

(45)

28 2장 부트스트랩 CSS

2.4 폼

부트스트랩의 장점 중 하나는 폼을 생성하는 것이 매우 쉽다는 것이다. 웹 개발자 로써 폼을 스타일링하는 것은 가장 좋아하지 않는 작업 중 하나지만, 부트스트랩은 간단한 HTML 마크업과 폼을 다른 스타일로 확장한 클래스를 사용하여 이를 매우 쉽게 만들었다. 기본적인 폼의 구조는 부트스트랩과 함께 제공되기 때문에 별도의 헬퍼 클래스를 추가할 필요가 없다(그림 2-19). placeholder 속성을 사용한다면 이 기능이 최신 브 라우저에서만 지원한다는 점을 꼭 기억하자. 오래된 브라우저에서는 placeholder 속성을 가진 텍스트를 출력할 수 없다. <form> <fieldset>

<legend>Legend</legend>

<labelfor="name">Label name</label>

<inputtype="text" id="name"

placeholder="Type something…">

<spanclass="help-block">Example block-level help text here.</span>

<labelclass="checkbox" for="checkbox">

Check me out </label>

<buttontype="submit" class="btn">Submit</button>

</fieldset> </form>

(46)

29 2장 부트스트랩 CSS 그림 2-19 기본 폼 2.4.1 추가 폼 레이아웃 몇 개의 추가 헬퍼 클래스만 있으면 폼의 레이아웃을 동적으로 업데이트할 수 있 다. 부트스트랩은 미리 설정해놓은 몇 개의 스타일을 선택할 수 있도록 제공한다. 검색 폼

.form-search 클래스를 <form> 태그에 추가하고 .search-query 클래스를 <input> 태그에 추가하면 둥그런 모서리의 입력 박스와 인라인 버튼이 생성된다.

<formclass="form-search">

<inputtype="text" class="input-medium search-query">

<button type="submit" class="btn">Search</button> </form>

(47)

30 2장 부트스트랩 CSS 인라인 폼 모든 요소를 라벨과 함께 인라인으로 배치하려면 .form-inline 클래스를 <form> 태그에 추가하면 된다(그림 2-21). Label 과 Input 을 같은 라인에 두고 싶다면 다음 과 같은 인라인 폼 코드를 사용해보자.

<formclass="form-inline">

<inputtype="text"class="input-small" placeholder="Email">

<inputtype="password" class="input-small"placeholder="Password">

<labelclass="checkbox">

<inputtype="checkbox"> Remember me </label>

<buttontype="submit" class="btn">Sign in</button> </form> 그림 2-21 인라인 폼 가로형 폼 부트스트랩은 가로 형태의 폼 또한 미리 제작해놓았다. 이 폼은 마크업의 양 뿐만 아니라 폼을 보여주는 방식에 있어서도 다른 폼과 차이가 있다. 보통 그림 2-22와 같은 레이아웃의 폼을 만들려면 테이블을 사용해야 하지만, 부트스트랩에서는 테 이블을 사용하지 않고도 가능하다. 그뿐만 아니라 반응형 CSS를 사용하게 되면, 가로형 폼은 폼 컨트롤을 세로 나열하여 작은 레이아웃에 알아서 맞춘다. 가로형 레이아웃을 사용하는 폼을 생성하려면 다음과 같은 절차를 따르면 된다. ● 부모 <form> 요소에 .form-horizontal 클래스를 추가하자.

(48)

31 2장 부트스트랩 CSS ● 라벨과 폼 컨트롤은 .control-group을 추가한 <div> 태그 범위 내에 작성한다. ● .control-label 클래스를 원하는 라벨의 <label> 태그에 추가한다. ● .controls 클래스를 추가한 <div> 범위 내에 관련있는 폼 컨트롤을 넣어 적절 하게 위치를 정렬한다. 그림 2-22 가로형 폼

<formclass="form-horizontal">

<labelclass="control-label" for="inputEmail">Email</label>

</div>

<labelclass="control-label" for="inputPassword">Password</label>

</div>

(49)

32

</label>

</div> </div> </form> 2.4.2 지원하는 폼 컨트롤 Input 가장 일반적인 텍스트 필드는 사용자가 중요한 폼 데이터의 대부분을 입력하게 될 Input이다(그림 2-23). 부트스트랩은 일반적인 HTML5의 입력 양식인 text, password, datetime, datetime-local, date, month, time, week, number, email, URL, search, tel, color를 지원한다.

<inputtype="text"placeholder="Text input">

그림 2-23 텍스트 입력

기본적으로 <input>과 <textarea>은 :active 상태일 때 파란색으로 반짝거린다.

텍스트 영역

텍스트 영역은 여러 줄을 입력해야 할 때 쓰인다(그림 2-24). 이 컨트롤에는 주로 행 의 속성을 변경하거나 지원해야할 행의 숫자를 변경하는 작업을 많이 하게 된다.

(50)

33

(작은 수의 행 = 작은 박스, 많은 수의 행 = 큰 박스)

<textarearows="3"></textarea>

그림 2-24 기본 상태의 텍스트 영역과 :active 상태의 텍스트 영역 체크박스와 라디오 버튼 체크박스와 라디오 버튼은 미리 지정한 목록 중에서 사용자가 항목을 선택하게 만 들고자 할 때 유용하게 쓸 수 있다. 폼을 제작할 때 사용자가 다수의 항목을 선택하 도록 하려면 체크박스를 사용하며, 오직 한 가지 항목만 선택하도록 하려면 라디오 버튼을 사용한다.

<labelclass="checkbox">

<inputtype="checkbox" value="">

Option one is this and that—be sure to include why it’s great.

</label>

<labelclass="radio">

<inputtype="radio" name="optionsRadios" id="optionsRadios1"

value="option1"

checked>

Option one is this and that—be sure to include why it’s great.

</label>

(51)

34

<inputtype="radio" name="optionsRadios" id="optionsRadios2"

value="option2">

Option two can be something else, and selecting it will deselect option one

</label>

그림 2-25 체크박스와 라디오 버튼

여러 체크박스를 같은 줄에 나열하고 싶다면 .inline 클래스를 체크박스나 라디오 버튼에 추가하자.

<labelfor="option1" class="checkbox inline">

<inputid="option1"type="checkbox" id="inlineCheckbox1"value="option1"> 1

</label>

<inputid="option2"type="checkbox" id="inlineCheckbox2"value="option2"> 2

</label>

<inputid="option3" type="checkbox" id="inlineCheckbox3"value="option3"> 3

</label>

그림 2-26 인라인 체크박스

Select 박스

(52)

35 2장 부트스트랩 CSS (그림 2-27). 해당 요소는 도시나 숫자와 같은 사용자가 이미 익숙한 목록에 사용하 는 것이 가장 좋다. 만약 사용자가 하나 이상의 항목을 선택할 수 있도록 하고 싶다 면 multiple="multiple"을 <select> 태그에 추가하면 된다. 사용자가 단 한가지 항목만을 선택하도록 하고 싶다면 <input type="radio">를 이용하자. <select> <option>1</option> <option>2</option> <option>3</option> <option>4</option> <option>5</option> </select>

<selectmultiple="multiple">

<option>1</option> <option>2</option> <option>3</option> <option>4</option> <option>5</option> </select> 그림 2-27 Select 박스

(53)

36 2장 부트스트랩 CSS 2.4.3 폼 컨트롤의 확장 기능 이전에 설명했던 기본적인 폼 컨트롤 이외에도 부트스트랩은 표준 HTML 폼 요소 를 보완하기 위해 몇 가지 다른 폼 구성 요소를 제공한다. input-prepend 클래스와 input-append 클래스 <input> 요소의 앞, 뒤에 콘텐츠를 추가하면 사용자의 입력 창에 공통 요소를 추 가할 수 있다(그림 2-28). 예를 들어, 달러 표시를 추가하거나 트위터 아이디에 @ 를 붙여야 한다든지 또는 애플리케이션 인터페이스에 공통적으로 필요한 것이 있 다면 어떤 것이라도 추가할 수 있다. 사용자 입력 창의 앞 부분에 추가 콘텐츠를 붙 이려면 <div> 요소에 .input-prepend 클래스를 추가한 후 해당 태그의 범위 내 에 <input> 요소를 삽입한다. 마찬가지로, 사용자 입력 창 뒤에 추가 콘텐츠를 붙 이려면 .input-append 클래스를 사용하면 된다. 그러고 나서 같은 <div> 요소의 범위 내에 .add-on 클래스를 추가한 <span> 요소로 추가 콘텐츠를 감싸주고, 이 <span> 요소를 <input> 요소의 앞이나 뒤에 위치해주면 된다. (즉, 추가 콘텐츠를 포 함하고 있는 <span> 요소가 <input> 요소의 앞으로 가면 앞에 콘텐츠가 표시되며, 뒤로 가면 입력 창 뒤에 표시된다.)

<spanclass="add-on">@</span>

<inputclass="span2" id="prependedInput" type="text"

placeholder="Username"> </div>

<inputclass="span2" id="appendedInput" type="text">

<spanclass="add-on">.00</span> </div>

Index of /2655

Hanbit eBook

Realtime 56

반응형 웹 개발을 위한

Bootstrap

부트스트랩

역자 소개

추천사

저자 서문

역자 서문

예제 파일

한빛 eBook 리얼타임

차례

1

|

부트스트랩 스캐폴딩

1.1 부트스트랩이란 무엇인가?

1.2 부트스트랩 파일 구조

1.3 기본 HTML 템플릿

1.4 글로벌 스타일

1.5 기본 그리드 시스템

1.6 가변적 그리드 시스템

1.7 컨테이너 레이아웃

1.8 반응형 디자인

2

|

부트스트랩 CSS

2.1 타이포그래피

2.2 코드

2.3 테이블

2.4 폼