부트스트랩으로디자인하라 B 싱글웹페이지 & 반응형웹사이트쾌속개발 양용석지음

예제소스다운로드 http://www.roadbook.co.kr/134 질의응답사이트 http://roadbook.zerois.net 부트스트랩으로디자인하라싱글웹페이지 & 반응형웹사이트쾌속개발 지은이양용석 1판 1쇄발행일 2014년 11월 20일펴낸이임성춘펴낸곳로드북편집장미경디자인이호용 ( 표지 ), 박진희 ( 본문 ) 주소서울시관악구신림로 29길 8 101-901호출판등록제 2011-21호 (2011년 3월 22일 ) 전화 02)874-7883 팩스 02)6280-6901 정가 22,000원 ISBN 978-89-97924-13-4 93000 BB c 양용석 & 로드북, 2014 책내용에대한의견이나문의는출판사이메일이나블로그로연락해주십시오. 잘못만들어진책은서점에서교환해드립니다. 이메일 chief@roadbook.co.kr 블로그 www.roadbook.co.kr B B

서문 필자가 2011 년 < 처음부터다시배우는 HTML5 & CSS3>( 로드북 ) 를출간할당시만해 도 HTML5 와 CSS3로디자인을어떻게하는지에대한기초지식이많이필요한시기였습니다. 그뒤로상당한시간이흘렀고이제는웹사이트대부분이 HTML5 와 CSS3 기반으로제작되고있고전문가도많이생겨난상황입니다. 따라서이제는어떻게하면좀더효율적으로웹사이트디자인을할수있을까하는고민을많이하고있습니다. 구체적으로는 HTML5 와 CSS3 기반의웹사이트를개발할때 CSS 속성이름을만드는것조차도상당히어려워하고많은노력을들이고있습니다. 또한요즘웹개발의이슈가되고있는반응형 Responsive 웹사이트까지도함께고려해서개발해야하는데, 반응형웹사이트개발은신경써야하는변수가상당히많기때문에조금은까다로운작업이될수도있습니다. 이외에도단순한하드코딩만으로 HTML5 & CSS3 웹디자인을하려면상당히많은노력을들여야합니다. 필자는이러한상황을부트스트랩을통해효과적으로대처할수있음을직접경험하였습니다. 부트스트랩은미리설정된 CSS와자바스크립트의집합으로프론트엔드프레임워크 Front-end Framework 중가장뛰어난성능을발휘합니다. 웹개발에필요한 CSS 속성이미리설정되어있기때문에해당속성을 HTML 문서에적용해주기만하면바로원하는효과를얻을수있어 CSS 스타일링을정말편하게해줍니다. 또한부트스트랩에서사용되는자바스크립트는현재인터넷에서가장많이사용하는 jquery 기반의자바스크립트로, 가장인기있는효과들을아주쉽게사용할수있게해줍니다. 부트스트랩을접하기전에는일주일이걸리던웹사이트디자인이부트스트랩을적용하고나서는최대 50% 이상시간이단축되어 2~3 일만에끝낼수있을정도로디자인작업효율이월등히높아졌습니다. 제작기간이줄어든만큼좀더창의적인디자인을생각할수있는여유까지갖게된것같습니다. 부트스트랩이필자의웹디자인경력의터닝포인트가되었다고감히말씀드릴수있을것같습니다. 그러나부트스트랩이효율적인도구이기는하지만, HTML5 와 CSS3의기초지식이없으면절대쉽게사용할수없다는것또한명심해야합니다. 개발자도하드코딩을할줄모르고서통합개발툴사용법을잘안다고프로그램을잘개발할수없는것과같은이치입니다. 이책의독자들은반드시 HTML5 와 CSS3에대한기본적인지식과 HTML5 와 CSS3를이용해서최소한한개이상의웹사이트를개발해봤거나개발할수있어야합니다. 그렇지않으면이책에서설명하는내용을이해하기힘들수도있습니다. 이책은총 2부로구성되어있습니다. 1부는부트스트랩의기초에대해서설명을합니다. 특히부트스트랩에서사용되는 CSS 속성과그에따른컴포넌트에대해서많은내용을다룹니다. 또한부트스트랩은현재사이트제작할때가장많이사용되는특수효과들을자바스크립트로구현해놓았는데이러한효과들을어떻게사용하는지쉽게알려드립니다. 1부에서다루는내용은부트스트랩의사용방법에대해서설명을하기때문에자칫지루할수도있지만, 아주중요한내용이담겨있기때문에 1부의내용은반드시숙지해야합니다. 2부에서는실제부트스트랩을이용해서요즘유행하는싱글페이지웹사이트를만들어보면서부트스트랩을여러분의것으로만들어보는시간을마련해보았습니다. 또한부트스트랩의여러기능을이용해서기존에있던사이트들을부트스트랩을이용하여재코딩하여구축해봄으로써, 부트스트랩이얼마나편리하게사용될수있는지에대해서확인해보는시간을갖게될것입니다. 이책은필자의다섯번째책입니다. 대부분 HTML5 와 CSS3를이용한웹표준서적을집필했는데, 이번에쓴부트스트랩을이용한웹표준사이트가가장흥미로운주제로책을쓴것같습니다. 특히필자도실제책을저술하면서부트스트랩의막강한기능을한번익히고나니사이트제작기법이부트스트랩이전과이후로나뉠정도로필자에게아주많은영향을끼친것같습니다. 이책으로공부하여여러분의실력이향상되고부트스트랩의막강한힘을느낄수있다면필자에게는아주큰기쁨일것입니다. 마지막으로이책을쓰는동안에묵묵히저를응원해주던아내와딸유지, 연수그리고막내혁준이에게무한사랑을표현합니다. 또한이책이나올수있도록옆에서많은격려를해준로드북임성춘편집장님, 본문디자인을예쁘게해주신박진희님, 표지디자이너이호용님께도감사의말씀을전합니다. 2014년 11월제주에서양용석 004 005

목차 1 부. 부트스트랩개발환경구축과구조의이해 1장 _ 부트스트랩소개와사용방법 _011 1.1 부트스트랩을설치해보자 _012 1.2 부트스트랩을이용하여 Hello World 출력하기 _015 1.3 기본적인반응형웹페이지예제 _017 1.4 써드파티 (Third party) 지원 _023 4.5 토글되는탭 _123 4.6 툴팁 _125 4.7 팝오버 _128 4.8 경보 _131 4.9 버튼 _132 4.10 컬랩스 _135 4.11 캐러셀 _138 4.12 Affix 효과 _142 2 장 _ 부트스트랩에서사용하는 CSS_025 2.1 부트스트랩레이아웃의핵심그리드시스템 ( 중요 )_026 2.2 타이포그래피 _034 2.3 코드와테이블 _048 2.4 폼 _053 2.5 버튼과이미지그리고헬퍼클래스 _062 3장 _ 예제로배우는컴포넌트 _071 3.1 특수문자전용글꼴처리 : Glyphicons_072 3.2 드롭다운 _073 3.3 버튼그룹 _076 3.4 버튼드롭다운 _078 3.5 입력그룹 _080 3.6 내비게이션 _082 3.7 내비게이션바 ( 중요 )_084 3.8 경로와페이지네이션 _091 3.9 라벨과배지 _093 3.10 점보트론과페이지제목 _094 3.11 썸네일 _096 3.12 경보와진행바 _097 3.13 미디어객체, 목록그룹, 패널, Wells_100 4장 _ 부트스트랩의자바스크립트 _109 2 부. 부트스트랩을이용한사이트제작 5장 _ 싱글페이지웹사이트제작 _147 5.1 디자인레이아웃구성하기 _148 5.2 사이트제작 - 내비게이션바 _153 5.3 사이트제작 - 캐러셀과아이콘 _158 5.4 사이트제작 - About 부분 _167 5.5 사이트제작 - Portfolio 부분 _172 5.6 사이트제작 - Contact와 Footer 부분 _175 5.7 사이트제작 - 특수효과 _178 6장 _ 부트스트랩을이용한반응형웹페이지쾌속개발 _185 6.1 영수증폼만들기 _186 6.2 스크롤에따라변화하는메인메뉴 _188 6.3 실제사이트를부트스트랩으로변경해서만들어보자 _193 6.4 실제사이트를만들어보자 2_197 6.5 기본으로제공되는캐러셀효과변형하기 _205 6.6 부트스트랩을이용한쇼핑몰프론트페이지만들기 _209 찾아보기 _218 4.1 개요 _110 4.2 모달 _112 4.3 드롭다운 _118 4.4 스크롤스파이 _120 006 007

B 부트스트랩으로디자인하라

1 부 부트스트랩개발환경구축과구조의이해 1장 _ 부트스트랩소개와사용방법 2장 _ 부트스트랩에서사용하는 CSS 3장 _ 예제로배우는컴포넌트 4장 _ 부트스트랩의자바스크립트 부트스트랩은웹디자인을어떻게하면편리하게할수있을까라는목적에서나온프레임워크입니다. 1부 1장에서자세히설명하겠지만프레임워크는 작업을할수있는어떤틀 이라고생각하면쉽습니다. 즉웹디자인을쉽고간편하게할수있게끔부트스트랩이라는 틀 을제공합니다. 실제로부트스트랩을활용하면웹디자인에쏟아야하는노력을절반이하로줄여줄수있습니다. CSS 스타일링을줄여주고다양한컴포넌트 ( 바로쓸수있는웹디자인요소들 ) 를제공하며많은효과를줄수있는자바스크립트라이브러리를제공하여적은노력으로큰효과를볼수있는웹디자인을할수있습니다. 특히반응형웹에대한고민을혁신적으로해결해줍니다. 이책의목적또한부트스트랩을활용하여쉽고간편하게웹디자인을할수있게끔하는데있습니다. 그래서내용을 2부로구성하였습니다. 1부는부트스트랩을제대로이해하고활용할수있는기초지식을다루고있습니다. 2부에서는이를활용하여요즘유행하는싱글웹페이지디자인을프로젝트로배워보고다양한일반웹사이트를어떻게부트스트랩으로개발할수있는지를보여줌으로써이책의목적을달성하고자합니다.

1 장 부트스트랩소개와사용방법 Bootstrap은 2010년중반에트위터개발자중트위터아이디 @mdo와 @fat을사용하는개발자가만든오픈소스프레임워크 (framework) 입니다. 프레임워크란 짜여있는작업 이라는뜻으로, 부트스트랩은 HTML, CSS, JavaScript 및다양한 UI 컴포넌트로구성되어있습니다. 즉효율적인웹디자인을하기위해 미리필요한부분을작업해놓은것 이라고생각하면쉽습니다. 부트스트랩만잘활용해도웹사이트를빠르고간편하게개발할수있는장점이있습니다. 1장에서는부트스트랩에대한기초적인내용과사용방법에대해서간단하게살펴보겠습니다. B 부트스트랩으로디자인하라

1.1 부트스트랩을설치해보자 웹을개발하다보면사실정형화된양식이없습니다. 특히 CSS는 CSS 규칙만있지, 선택자에대한정의도개발자가일일이해야합니다. HTML 태그또한정해진규칙은있지만개발자마다다르게사용하다보니웹개발자가바뀌게되면소스코드를전부다시분석해야하는경우도있습니다. 하지만정해진규칙이있다면, 개발자들은정해진규칙을 이용해서빠르고편리하게웹사이트를개발할수있을것입니다. 물론정해진규칙이외에도개발자또는디자이너가필요에의해서코드를추가할수도있다면더할나위없이좋을것입니다. 부트스트랩에는 CSS 스타일과 jquery 를기반으로한자바스크립트그리고컴포넌트들로구성되어있어원하는기능이있으면단순하게 HTML 코드에부트스트랩에서정의된선택자만입력하면편리하고빠르게사이트를개발할수있습니다. 또한부트스트랩은 Responsive 즉반응형웹이기본으로적용되기때문에데스크탑버전의웹사이트에서부터모바일용웹사이트까지한꺼번에개발할수있는장점이있습니다. 이제부트스트랩설치방법에대해서간단하게알아보도록하겠습니다. 부트스트랩설치방법은부트스트랩사이트에서해당파일은직접다운로드받은후 1. 사용자의웹서버에파일을올리는방법 2. CDNContent Delivery Network을이용하는방법 3. 그리고 Bower 라는패키지매니저를이용하는방법이있습니다. 가장많이사용하는방법이직접다운로드받은후사용자의웹서버에해당파일을올려서사용하는방법이며, CDN을이용하여해당파일들을불러서사용하는방법도사용됩니다만속도가느려질수있다는단점이있습니다. 또한서버또는 PC에 Bower 라는프로그램을설치하여부트스트랩을관리할수있습니다. Bower 는 Twitter 에서만든프론트엔드패키지관리도구인데, 프로그래머나서버관리자가아니라면사용할필요가없기때문에이책에서는다루진않습니다. 궁금하신분들은 http://bower.io/ 를참고하기바랍니다. 부트스트랩의다운로드버전은세가지가있습니다 ( 그림 1-1 참조 ). [ 그림 1-1] 부트스트랩다운로드버전세가지 가장일반적인부트스트랩이 [ 그림 1-1] 에서왼쪽에보이는 Bootstrap 이란것입니 다. 이것을다운로드하면 css, js, fonts 란폴더만있으며, 아래와같은구조로되어있습 니다. bootstrap/ css/ bootstrap.css bootstrap.min.css bootstrap-theme.css bootstrap-theme.min.css js/ bootstrap.js bootstrap.min.js fonts/ glyphicons-halflings-regular.eot glyphicons-halflings-regular.svg glyphicons-halflings-regular.ttf glyphicons-halflings-regular.woff 거창하게보이지만사실다운로드받아서보면별로특이한것은없어보입니다. 파일 크기도작고, css 폴더에는 4 개의 css 파일과 js 폴더 ( 자바스크립트파일을모아둔폴더 ) 에는 2 개의파일그리고 fonts 폴더에는 4 개의파일이있습니다. fonts 폴더에있는 4 개 의파일은모두역할은같은데, 다양한브라우저에서사용할수있게여러파일로만들어 진것입니다. 또한파일들중에서.min 이라고되어있는것은기본파일을압축한형태이기때문에 사실 css 파일 2 개, js 파일 1 개, 폰트파일 1 개로구성되어있다고보면됩니다. 이렇게 단순하게구성되어있지만, 이파일만으로도웹에서사용하는거의모든형태의디자인 을할수있습니다. 012 1 장부트스트랩소개와사용방법 013

[ 그림 1-1] 의 Bootstrap 바로옆에있는 Source code 는 Bootstrap 보다는복잡하 게구성되어있지만이것은소스코드이기때문이지내용은 Bootstrap 과동일합니다. 내용을보면다음과같은디렉토리로구성되어있습니다. bootstrap/ less/ js/ fonts/ dist/ css/ js/ fonts/ docs/ examples/ 부트스트랩은다운받지않고 CDN 을이용해서사용하는방법도있다고서두에서언 급을했는데, 사용방법은간단합니다. 아래의코드를 HTML 문서의상단에넣어주기만 하면됩니다.  <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/ bootstrap.min.css">  <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/ bootstrap-theme.min.css">  <script src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"> </script> 여기서 dist라는폴더에있는내용은 Bootstrap 에있는내용과동일하며 less, js, fonts 폴더들은 dist를구성하는소스파일들입니다. 여기서 js 폴더를보면 Boostrap 파일중 bootstrap.js 를구성하는다양한자바스크립트파일이있는것을볼수있습니다. affix.js, alert.js, button.js, carousel.js, collapse.js, dropdown.js, modal.js, popover.js, scrollspy.js, tab.js, tooltip.js, transition.js 란파일들이 bootstrap.js 파일하나로구성된것입니다. 각각의 js 파일들의쓰임새는 4장에서실제사용방법들이소개됩니다. Source code는실제웹개발할때는필요가없고, 이런방식으로부트스트랩을만들었다는정도만알아도무방합니다. 실제프로그래머들이관련내용을알고싶어한다거나소스코드를이용해서프로그램을개발할때필요한내용들이다수포함되어있습니다. [ 그림 1-1] 의마지막 Sass는몰라도사용하는데전혀문제가없지만, 간단하게알아보겠습니다. CSS를마치프로그래밍언어처럼변수를선언해서처리해주는것이라고이해하면됩니다. Sass를사용하기위해서는어플리케이션을설치해야하며, 윈도우와리눅스의경우 Ruby라는웹프레임워크를설치해야합니다. 맥환경에서는루비가미리설치되어있기때문에별도의설치가필요없습니다. 여기서루비는 루비온레일즈 라고불리며, 현재책에서다룰내용과는별도의내용이기때문에생략하도록하겠습니다. 결론은부트스트랩을사용하기위해서는 [ 그림 1-1] 의왼쪽에있는 Bootstrap 만다운받아서사용하면됩니다. 위코드는 example/ch01/cdn.txt 에서다운받으실수있습니다. 이코드를넣어주면부트스트랩을다운받지않고사용할수있기때문에편리하긴하 지만, 간혹 CDN 에문제가생기거나네트워크에문제가있는경우해당 CSS 파일과 JS 파일을불러오지못하게되어웹페이지가이상하게보일수있다는문제점도있습니다. 방식의선택은자유지만, 필자는해당파일을직접다운로드받아서적용하는것을제일 선호합니다. 1.2 부트스트랩을이용하여 Hello World 출력하기 그럼이제본격적으로먼저부트스트랩웹사이트에나온베이직템플릿을살펴보겠습니 다. 템플릿이라고어려운표현을했지만, 그냥예제라고생각하면되겠습니다. 브라우저 화면에 Hello World 라는문자를표시를하기위한템플릿입니다. [ 예제 1-1] 부트스트랩의 Hello World 출력예제 example/ch01/hello.html <!DOCTYPE html> <html lang="en"> ➊ <head> <meta charset="utf-8"> ➋ <meta http-equiv="x-ua-compatible" content="ie=edge"> ➌ <meta name="viewport" content="width=device-width, initial-scale=1"> ➍ <title>bootstrap 101 Template</title> 014 1 장부트스트랩소개와사용방법 015

<link href="css/bootstrap.min.css" rel="stylesheet"> ➎    </head> <body> <h1>hello, world!</h1>  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/ jquery.min.js"></script> ➐  <script src="js/bootstrap.min.js"></script> ➑ </body> </html> ➏ ➏ 이부분은 HTML5 태그가적용되지않는 IE9 버전이하의브라우저에서 HTML5 태그들이적용될수있게만들어주는부분입니다. 이부분은 IE9 이상의브라우저와 IE 이외의브라우저에서는어떠한영향도미치지않는태그입니다. 간단하게설명을하면 if lt (less than) IE 9, 현재사용하는브라우저의버전이 IE9 보다작다면아래의스크립트를적용하라 라는의미입니다. Html5shiv.js는 HTML5의태그를적용해주는스크립트이고, respond.min.js는반응형웹사이트를만들때적용하는스크립트입니다. 설명에서도나왔지만 respond.min.js 파일은웹서버에서만작용하고로컬에서는작동하지않는스크립트입니다. ➐ jquery를호출하는부분입니다. 여기서는구글 CDN을이용해서호출했는데, 로컬또는서버에직접해당 jquery 파일로연결해도동일합니다. ➑ 부트스트랩에서사용하는자바스크립트를적용하는부분입니다. [ 예제 1-1] 이가장기본적인부트스트랩의템플릿이라고보면됩니다. 결과는 [ 그림 1-2] 와같습니다. 결과물이너무허무하게보일수도있습니다만, 가장기본적인뼈대가되는부분이기때문에여러분은이템플릿을기반으로작업하면됩니다. ➊ 이부분을 <html lang="ko-kr"> 로변경하면, 웹페이지에서사용되는글은한글이다 라고브라우저에알려주는역할을합니다. 이부분은단순하게 <html> 로사용해도됩니다. ➋ 캐릭터셋은 utf-8로설정한다는의미인데, utf-8로설정하게되면브라우저에서다양한언어를사용해도해당언어가제대로보이게됩니다. 이전에한글은 euc-kr 이라는캐릭터셋을사용했는데, 영어는제대로보이지만, 일본어나중국어를표기하면화면상에서이상한문자로나왔었습니다. ➌ 여기는현재사용하는 IE 브라우저의버전을최신버전으로처리하는곳입니다. 간혹최신버전의 IE를사용하는도중에 IE7 호환모드로사용자도모르게변경되는경우가있는데, 웹페이지상단에이코드를적용해주면최신버전의 IE 모드로변경됩니다. ➍ 여기는반응형웹페이지를적용해주는부분입니다. 모바일이나데스크탑은해상도가다른데, 각해상도에맞춘웹페이지로처리해주는부분입니다. ➎ 부트스트랩 CSS 파일을적용합니다. 템플릿에선 bootstrap.min.css 파일을적용했는데, bootstrap. css 파일을적용해도동일합니다. 실제사용자가차이를느끼긴힘들지만.min으로되어있는압축된 css 파일이크기가작아웹페이지가좀더빠르고가볍게구동됩니다. bootstrap.css 파일자체에수정을가할것이아니라면 bootstrap.min.css 파일을사용하길권합니다. [ 그림 1-2] [ 예제 1-1] 에의한결과 example/ch01/hello.html 1.3 기본적인반응형웹페이지예제 부트스트랩웹사이트에는다양한예제페이지들이있습니다. 간단하게예제하나를살펴보고 2장에서실제부트스트랩을이용한 CSS 적용예제에대해서살펴보도록하겠습니다. [ 그림 1-3] 은부트스트랩스타터템플릿이라는페이지입니다. 아주평범한웹페이지인데, 이웹페이지의폭을변화시켜보면 [ 그림 1-4] 와같이변화되는것을알수있습니다. 즉웹페이지가가변적으로변화할때, 반응형웹페이지로바뀌는것을알수있습니다. 016 1 장부트스트랩소개와사용방법 017

소스는 2장에서비슷한내용을학습하기때문에별도로설명하진않겠습니다만, 직접소스를확인해보면, 소스파일자체가 [ 예제 1-1] 에기반을하고몇개의 HTML 태그가추가된것을알수있을것입니다. 이것은부트스트랩에서정의된 CSS 선택자를 HTML 태그에간단하게적용하면, 손쉽게웹사이트그것도반응형웹사이트를만들수있다는것을예제로보여준것입니다. 부트스트랩은기본적으로반응형웹페이지를같이만들어주지만, 경우에따라반응형웹페이지가필요없거나, 어드민페이지와같이반응형웹페이지로만들면안되는경우가있습니다. 부트스트랩에서반응형웹페이지를생성하지않게하는방법은아주간단합니다. [ 예제 1-1] 에서기본템플릿소스코드에서아래부분을삭제합니다. 부트스트랩웹사이트에있는예제들을하나씩클릭해서직접확인해보기바랍니다. 그리고브라우저의크기를변화시켜웹페이지가어떻게변화되는지도확인해보기바랍 <meta name="viewport" content="width=device-width, initial-scale=1"> 니다. http://getbootstrap.com/examples/starter-template/ 그리고 bootstrap.css 파일내부에있는.container 라는선택자부분에 max-width: none!important; 를적용해주고 width: 970px!important; 를적용해줍니다. 그리고 내비게이션바부분에있는반응형태그들을전부없애줍니다. 마지막으로그리드레이아웃 ( 뒤에학습합니다 ) 을위해.col-xs-* 라는클래스선택자를.col-md-* 또는.collg-* 와대체하면됩니다. 가장간단한방법은 non-responsive.css 라는 CSS 파일을하나만들어서해당웹페이지에적용해주면간단하게해결할수있습니다. 지금부트스트랩을완전히학습하기전이기때문에무슨말인지이해가어려울수도있는데, 이책을전부다학습한후다시읽어보면쉽게이해가될겁니다. 따라서이부분은한번읽은후다시한번읽어보길권합니다. 이러한비반응형웹페이지는, http://bootstrapk.com/bs3/examples/non-responsive/ [ 그림 1-3] 부트스트랩스타터템플릿 에서확인할수있으며, 소스를보면스타일시트가적용된부분에 non-responsive. css 가추가되어있는것을알수있습니다. 해당사이트에서비반응형 CSS 파일을다운 로드해서사용하면됩니다. 이번에는부트스트랩의호환성에대해서설명하겠습니다. [ 표 1-1] 은부트스트랩이지원하는운영체제별브라우저를표시하고있습니다. IE는버전 8부터 11까지지원하고있습니다. [ 표 1-1] 각운영체제별브라우저에서부트스트랩지원여부 구글크롬파이어폭스 IE 오페라사파리 안드로이드지원지원안함 지원안함 해당사항없음 ios 지원해당사항없음해당사항없음지원안함지원 [ 그림 1-4] 부트스트랩스타터템플릿의폭 (width) 을줄였을때변화된모습 ( 좌측 ) [ 그림 1-4] 좌측에서메인메뉴클릭후모습 ( 우측 ) 맥 OSX 지원지원지원지원 윈도우지원지원지원지원지원안함 018 1 장부트스트랩소개와사용방법 019

부트스트랩은 IE8과 IE9에서도작동하긴합니다만, 몇몇 CSS3 속성은지원하지않 습니다. 특히 IE8에서반응형웹페이지가작동하기위해선 [ 예제 1-1] 에서와같이 responsive.js 가반드시포함되어야합니다. 아래의 [ 표 1-2] 는 IE8, IE9에서사용가능하거나또는사용할수없는 CSS3의속성 들입니다. [ 표 1-2] IE8과 IE9에서사용가능또는불가능한 CSS3 속성들 CSS3 속성 IE8 IE9 border-radius 사용불가 사용가능 box-shadow 사용불가 사용가능 transform 사용불가 -ms라는 prefix 사용시사용가능 transition 사용불가 placeholder 사용불가 최신버전인 IE11은 HTML5 와 CSS3의모든속성을사용할수있으며, IE10도거의 대부분의속성을사용할수있습니다. 윈도우 8과윈도우폰 8에서의 IE10은뷰포트너비 (PC 또는모바일해상도 ) 로기기의 너비를구분하지않습니다. 따라서부트스트랩의 CSS를이용해서적절한미디어쿼리를 지정할수없습니다. 이문제점을해결하는간단한방법은아래의 CSS 코드를삽입하는 것입니다. @-webkit-viewport { width: device-width; } @-moz-viewport { width: device-width; } @-ms-viewport { width: device-width; } @-o-viewport { width: device-width; } @viewport { width: device-width; } 부트스트랩의자바스크립트에는아래의코드를삽입합니다. if (navigator.useragent.match(/iemobile\/10\.0/)) { var msviewportstyle = document.createelement('style') msviewportstyle.appendchild( document.createtextnode( '@-ms-viewport{width:auto!important}' ) ) document.queryselector('head').appendchild(msviewportstyle) } 맥에서사용하는사파리브라우저의퍼센트반올림문제도있습니다. 이책을쓰는 시점에가장최신버전의사파리브라우저는 7.0.3 인데부트스트랩에서언급한버전은 OSX 용은 6.1, 아이폰용사파리는 7.0.1 버전에서도동일한증상이발생한다는것입니 다. 예를들면 [ 그림 1-5] 와같은증상을말합니다. @-ms-viewport{ width: device-width; } 여기서 @ 표시로시작되는부분은반응형웹사이트를위해해상도별별도의 CSS 코 드를입력하는부분입니다. 하지만이코드를삽입하더라도윈도우폰 8 업데이트 3 버전 이전의경우모바일폰에적합한해상도로나오지않고데스크탑에서보는뷰로보이게됩니다. 이문제를해결하는방법은다음에제시하는 CSS와자바스크립트코드를삽입하면해결됩니다. 하지만 MS에서근본적인문제를고치게되면해당코드는더이상필요없을수도있습니다. 부트스트랩의 CSS 소스코드에는다음의코드를삽입합니다. 아래의내용은윈도우폰의버그에의한것으로윈도우폰점유율이미미한한국에서는거의의미가없을수도있기때문에, 이런내용이있다는것만알아두면됩니다. [ 그림 1-5] 사파리브라우저의퍼센트반올림문제 [ 그림 1-5] 에서보면 12개의그리드컬럼의경우다른컬럼과정렬이맞질않습니다. 맥에서사용하는다른브라우저에서는이런문제가없습니다. [ 그림 1-6] 에서맥에서사용하는크롬을보면확인할수있습니다. 020 1 장부트스트랩소개와사용방법 021

2 부 부트스트랩을이용한사이트제작 5장 _ 싱글페이지웹사이트제작 6장 _ 부트스트랩을이용한반응형웹페이지쾌속개발 2부에서는 1부에서학습한부트스트랩을이용하여실제작동하는사이트를만들어보도록하겠습니다. 부트스트랩없이사이트를제작하려면, 아주기초적인 HTML 코드부터 CSS 디자인그리고자바스크립트를처음부터일일이입력해야하지만, 부트스트랩을사용하게되면부트스트랩에서제공되는 CSS와컴포넌트그리고자바스크립트를이용하여빠르고편리하게사이트를개발할수있습니다. 필자또한부트스트랩을사용하기전에는모든 HTML과 CSS 코드를일일이하나씩입력하고속성을지정했지만, 부트스트랩을사용하게되면서이런기초적인작업은건너뛰고바로사이트를제작할수있어사이트개발기간이 50% 이상단축되었습니다. 2부 5장에서는요즘유행하는싱글페이지 (Single Page) 웹사이트를부트스트랩을이용해서제작해보고, 6장에서는다양한형태의반응형웹사이트를만들어봄으로써실제부트스트랩을이용하여사이트를제작하는방법을알려드리도록하겠습니다. B 부트스트랩으로디자인하라

5 장 싱글페이지웹사이트제작 B 부트스트랩으로디자인하라 5장에서는싱글페이지웹사이트를제작하겠습니다. 우선부트스트랩을완벽하게사용하기위해서는 HTML5와 CSS3에대한아주정확한지식이있어야합니다. 만약 HTML5와 CSS3에대한지식이없다면, 2부에서말하는내용의거의대부분은이해할수없을지도모릅니다. 만약기조지식이부족하다고판단한다면, 필자가쓴 < 처음부터다시배우는 HTML5 & CSS3>( 로드북, 2013) 라는책을참고하고학습을진행하면보다쉽게학습할수있을겁니다. 싱글페이지웹사이트는요즘외국에서유행하는웹사이트기법중하나로, 이전에는웹사이트가여러페이지로구성된반면, 싱글페이지는단한페이지로완벽하게웹사이트의기능을하는것을말합니다. 싱글페이지의장점은단하나의페이지만사용하기때문에제작이쉽고효율적으로페이지를구성할수있으며디자인또한편리합니다. 싱글페이지웹사이트라고하지만, 실제동작하는모습을보면마치여러페이지로구성된사이트처럼보이며다양한애니메이션과관련스크립트를적용하게되면아주역동적으로보이게됩니다. 이책에서예제로제공되는싱글페이지는실제사용되는사이트입니다. 참고로이예제는학습을위해개인적인용도로사용하는경우에는무관하지만웹사이트템플릿등으로만들어서재판매하거나상업적인목적의판매는원칙적으로금지합니다. 다만싱글페이지를응용해서다른디자인과다른레이아웃을구성한경우에는상업적인이용도가능합니다.

5.1 디자인레이아웃구성하기 [ 그림 5-1] 을기반으로제작하는웹사이트의각페이지의모습은다음과같습니다. 싱글페이지웹사이트는하나의페이지로구성되기때문에레이아웃은여러페이지로구성된페이지보다구성에서조금은더신경을써줄필요가있습니다. 한페이지에여러페이지로구성된듯한느낌을줘야하기때문에각섹션별로구분을하거나배경을다르게하거나해서구분해줘야하기때문입니다. [ 그림 5-1] 을보면간략한싱글페이지의구성도를볼수있습니다. 사이트로고 Home About Portfolio Contact 상단로고및메뉴 ( 항상고정됨 ) 프론트페이지역할을하는부분 ( 캐러셀을이용한애니메이션효과적용 ) 첫페이지역할을하는부분 [ 그림 5-2] 싱글페이지의프론트페이지역할을하는부분 두번째페이지역할을하는부분 [ 그림 5-2] 는싱글페이지의프론트페이지역할을하는부분입니다. 사이트로고와 함께메뉴가위치해있습니다. 바로밑에는캐러셀효과를적용한슬라이드부분이존재 합니다. 그리고바로아래에는사이트의특징을알려주는홍보문구가자리합니다. 홍보 세번째페이지역할을하는부분 문구부분은웹사이트처음로딩시애니메이션이처리되어있는데, 이부분은부트스트 랩을이용하지않고별도의 CSS 와자바스크립트를이용했으며, 자세한사항은사이트를 [ 그림 5-1] 싱글페이지사이트구성도 [ 그림 5-1] 에서상단로고및메뉴부분은항상고정되어있습니다. 부트스트랩에서내비게이션바즉 navbar 에해당하며, navbar-fixed-top 클래스속성을적용해주면고정된다는것은이미학습했습니다. 이부분은실제사이트를제작하면서확인해보도록하겠습니다. 그림에서사이트로고옆에는메뉴가있는데, 해당메뉴를클릭하면페이지역할을하는부분으로링크가걸려있습니다. 싱글페이지이기때문에해당섹션에대해서링크만걸어주면됩니다. 이때약간의애니메이션효과를첨가한다면, 사이트가역동적으로보이게할수있습니다. 이부분은별도의 jquery 플러그인이필요합니다. 실제사이트작업시어떤플러그인이필요한지배워보겠습니다. 부트스트랩을이용한웹사이 제작하면서알려드리겠습니다. [ 그림 5-3] 에서는 About 에해당하는부분을볼수있습니다. 그림을잘보면상단에있는내비게이션바는고정되어있습니다. [ 그림 5-2] 와비교해보면, 하나의페이지로구성된느낌이아니라새로운페이지와같은느낌을주게됩니다. 이페이지에서보면 Why 9pixelstudio? 라는부분에는자바스크립트중컬랩스가적용되어있습니다. 나머지부분은평범하게구성되어있는데, Books 부분은하나의이미지가아닌개별이미지를 CSS 속성을이용하여겹치게처리했습니다. 로고부분또한프론트페이지역할을하는부분과비슷한애니메이션효과를추가했는데, 해당페이지가보일때만작동하게처리하였습니다. 트라도부트스트랩에서제공되지않는스타일요소 CSS 와 jquery 플러그인들은별도로 추가해줘야합니다. 148 5 장싱글페이지웹사이트제작 149

[그림 5-4] 싱글 페이지의 Portfolio 부분 [그림 5-5]는 사이트의 마지막인 Contact 부분인데, 이곳에는 별도의 PHP 또는 ASP [그림 5-3] 싱글 페이지의 About 부분 와 같은 웹 프로그래밍이 들어갑니다. 하지만 이 책에서는 그 부분에 대해서는 다루지 않 았기 때문에 웹 프로그래밍 부분은 생략하도록 하겠습니다. [그림 5-4]는 포트폴리오 부분입니다. 여기서 Site Development는 캐러셀을 이용해 Contact 부분과 더불어 하단에는 footer 부분이 자리잡고 있습니다. 이 사이트에서는 서 애니메이션 처리했습니다. 이유는 많은 내용을 효과적으로 보여주기 위함입니다. 여 footer 부분을 아주 간단하게 처리했는데, 요즘 유행하는 외국 사이트는 이 footer 부분 기에는 부트스트랩에서 제공되는 모달 윈도우 대신 fancybox라는 별도의 자바스크립 을 Mega footer라고 해서 아주 다양한 메뉴들을 적용하는 경우도 있습니다. 이 부분은 트를 이용했는데, 그 이유는 사이트 제작에서 알려드리겠습니다. 캐러셀 자바스크립트는 여러분들이 직접 사이트를 응용해서 다양한 콘텐츠를 추가해 보기 바랍니다. 예를 들어 이와 같이 이미지뿐만 아니라, 콘텐츠를 애니메이션 시켜 많은 내용을 라인 하나에 담을 SNS 아이콘들을 배치할 수도 있고, 회사 지도를 추가해 줄 수도 있을 것입니다. 수 있는 장점이 있습니다. 150 5장 싱글 페이지 웹사이트 제작 151

번부트스트랩에적응하면부트스트랩없이사이트를제작하는것은상상도할수없을 만큼편리합니다. [ 그림 5-6] 해상도가 1920 900 인경우보여지는모습 [ 그림 5-5] 싱글페이지의 Contact 부분 책에서는웹사이트가일정한사이즈로고정되어있어다양한모습을보여주긴힘들지만, 실제예제사이트를구동해보면해당사이트는브라우저가어떤해상도로설정되어있든지, 화면에꽉찬모습으로보여집니다 ([ 그림 5-6] 참조 ). 또한부트스트랩은기본적으로반응형웹사이트이기때문에해상도를변경하면그에따라사이트의모습도변경됩니다. [ 그림 5-6] 과달리해상도를최소로변경해보면 [ 그림 5-7] 과같이변경되는것을알수있습니다. [ 그림 5-6] 을보면사이트의로고와메뉴가있는부분은화면크기가늘어나도크 기가고정되어있는데, 캐러셀이적용된부분은화면크기가늘어나면그에따라커지는것을알수있습니다. 제작된사이트는특정부분은크기가늘어나면그에따라늘어나게처리되어있고, 나머지부분은크기에고정되어있는데, 이것은부트스트랩의 container-fluid 속성과 container 속성을적절하게배합한결과입니다. 실제코드를설명할때다시한번언급하도록하겠습니다. 부트스트랩을이용해서사이트를제작하게되면, 아주빠른시간에반응형웹사이트를만들수있고, 예전에는별도로추가해야했던여러자바스크립트효과들을비교적간단하게처리할수있는장점이있기때문에, 한 [ 그림 5-7] 해상도가 320 480 인경우보여지는모습 5.2 사이트제작 - 내비게이션바 이제실제사이트를제작해보도록하겠습니다. 우선가장기본적으로부트스트랩을적용하기위해서다음과같이 HTML 문서가되어있어야합니다. 이부분은기본적으로템플릿이라고봐도무방합니다. 가장기본적이며부트스트랩의문서의기본이되기때문입니다. 152 5 장싱글페이지웹사이트제작 153

[ 예제 5-1] 부트스트랩의가장기본코드 example/ch05/step1.html <!doctype html> <html lang="ko-kr"> <head> <meta charset="utf-8"> <meta http-equiv="x-ua-compatible" content="ie=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title> 9PIXELSTUDIO </title>  <link href="./css/nomalize.css" rel="stylesheet"> <link href="./css/bootstrap.min.css" rel="stylesheet">    </head> <body>  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min. js"></script>  <scriptsrc="./js/bootstrap.min.js"></script> </body> </html> [ 예제 5-1] 에서약간특이한것이라고하면 nomalize.css 라는별도의 CSS 파일이 있는데, 이파일은브라우저마다태그에따라약간의차이가있는부분을평준화해주는 작업을하는 CSS 파일입니다. 주의 여기서해당 CSS 파일과 JS의파일경로는사용자의개발환경에따라달라질수있습니다. [ 예제 5-1] 에서가장중요한부분은빨간색부분이며, 파란색부분은 IE9 이하의브라우저에서필수적으로적용되어야해당사이트가제대로보일수있습니다. 가장먼저해야하는일은사이트전체의틀을잡는 container 또는 containerfluid 를이용하는것입니다. container 클래스선택자는최대넓이가 1170 픽셀이고, container-fluid 는전체화면을사용할때사용합니다. 예제에서사용되는사이트는전 체화면을사용하면서메뉴와콘텐츠부분에는한정된넓이를갖는사이트입니다. 따라 서먼저전체화면을사용하기위해서 container-fluid 를이용해서전체화면을잡고, 메 인메뉴가들어가는부분은 container 클래스선택자를적용하면됩니다. 메인메뉴역 할을하는내비게이션바의코드는컴포넌트를학습할때와동일한코드를적용해보도 록하겠습니다. [ 예제 5-2] 내비게이션바부분코드... 상단생략... <div class="container-fluid"> ➊  <div class="container"> ➋ <nav class="navbarnavbar-default navbar-fixed-top" role="navigation" id="navbar-scroll"> ➌ <div class="container"> ➍  <div class="navbar-header"> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-1-collapse"> <span class="sr-only">toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a class="navbar-brand" href="#"><imgsrc="./imgs/logo.png" alt="9pixelstudio"></a> </div>  <div class="collapse navbar-collapse navbar-right navbar-1-collapse"> <ul class="navnavbar-nav"> <li><a href="#">home </a></li> <li><a href="#">about </a></li> <li><a href="#">portfolio </a></li> <li><a href="#">contact </a></li> </ul> </div> </div> 154 5 장싱글페이지웹사이트제작 155

</nav> </div>  </div>... 하단생략... [ 예제 5-2] 를한번보면내비게이션바부분은단지내비게이션바부분 (➌) 에적용 된속성이 navbar-fixed-top 이란클래스선택자가적용된것외에는특별한것이없습니 다. 만들려는사이트는특정부분은 container 라는한정된넓이를가진속성을적용해야 하고, 나머지부분은 container-fluid 속성을적용해서전체화면을적용해야합니다. 따 라서코드에서 ➊ 부분에는전체화면넓이를적용하는속성을적용했고, 현재내비게이 션바부분에는 ➋ 의속성을적용했습니다. 또하나내비게이션바부분에 navbar-fixedtop 을적용할경우 ➍ 의속성을적용하지않게되면, 내비게이션바자체도전체넓이를 사용하게됩니다. [ 예제 5-3] 내비게이션바부분에대한 CSS 속성적용... 상단생략... <style> @import url(http://fonts.googleapis.com/css?family=source+sans+pro:300,400); /* 내브바에서사용되는웹폰트를구글폰트서비스를이용해서설정 */.navbar{ /* 내브바부분에대한설정 */ background-color: #fff; border: none; padding-bottom: 10px; font-family: 'Source Sans Pro', sans-serif; font-weight: 300; font-size: 18px; height: 90px; text-transform: capitalize; border-bottom: 1px solid #AAAAAA } /* 화면이축소될경우내브바부분에생기는이부분에대한위치선정 */.navbar-toggle { position: relative; margin-top: 40px; top: 2px; }.navbar-nav{ /* 메뉴부분에대한위치설정 */ padding-right: 10px; margin-top: 20px; background-color: #fff }.navbar-nav li { /* 메뉴텍스트부분간격설정 */ margin:0 20px; } </style>... 하단생략... [ 그림 5-8] [ 예제 5-2] 에의한결과 example/ch02/step2.html [ 그림 5-8] 을보면 [ 예제 5-2] 에의한결과화면이보이는데, 최종결과화면과는약간의차이가있습니다. 그럴수밖에없는것이현재 [ 예제 5-2] 까지적용된부분은순수하게부트스트랩의 CSS만적용했기때문입니다. 따라서최종결과와동일하게제작하기위해서는별도의 CSS 속성을적용해줘야합니다. 일단 HTML 문서내부에 CSS 속성을적용하고, 최종적으로는외부파일로불러오는방식으로설명하도록하겠습니다. [ 그림 5-9] 자체 CSS 적용후모습 example/ch05/step3.html 156 5 장싱글페이지웹사이트제작 157

[ 그림 5-9] 와 [ 그림 5-8] 을비교해보면차이점을확실하게알수있을것입니다. 이 렇게부트스트랩의기본 CSS 는전체적인레이아웃을잡는역할을하고다시맞춤형 CSS 를추가해줌으로써, 고유의사이트디자인으로다시태어날수있는것입니다. 내비게이션바 ( 내브바 ) 부분은여기까지입니다. 복잡하게보일수도있지만, 사실거 의모든코드는부트스트랩에있는코드를차용한것이며, 필자가추가한부분은 [ 예제 5-3] 에서지정한 CSS 밖에는없습니다. 다음은캐러셀부분과하단아이콘부분을적용 해보도록하겠습니다. 5.3 사이트제작 - 캐러셀과아이콘 캐러셀부분은가장간단한코드로구성되어있기때문에어려움이없을것입니다. 캐러 셀소스는부트스트랩에서사용된소스코드와거의동일합니다. 단지아이디 (id) 선택자 부분만명칭을변경했습니다. [ 예제 5-4] 캐러셀부분소스코드  <div id="carousel-generic" class="carousel slide">  <ol class="carousel-indicators"> <li data-target="#carousel-generic" data-slide-to="0" class="active"></li> <li data-target="#carousel-generic" data-slide-to="1"></li>... 인디케이터가들어가는부분생략... </ol>  <div class="carousel-inner"> <div class="item active"> <img src="./imgs/1.jpg" alt="first slide"> </div>... 이미지가들어가는부분생략... </div>  <a class="left carousel-control" href="#carousel-generic" data-slide="prev"> <span class="icon-prev"></span> </a> <a class="right carousel-control" href="#carousel-generic" data-slide="next"> <span class="icon-next"></span> </a> </div>  캐러셀이들어가는부분에서약간주의할점은인디케이터 indicators 부분으로이미지 의개수와인디케이터의개수는동일해야합니다. 현재예제로사용된사이트는이미지 의개수가 7 개이기때문에인디케이터도동일하게 7 개를생성해줘야합니다. 인디케이 터는이미지중앙하단에위치한동근원을의미합니다. 컨트롤부분은특별한부분이없 는데, 부트스트랩에서제공되는기본컨트롤이미지는너무작습니다. 이부분또한다른 이미지로교체가가능합니다. 여기서가장중요한부분은캐러셀처음시작에서지정한 id="carousel-generic" 으로나머지캐러셀에서도동일하게 data-target="#carouselgeneric" 과 href="#carousel-generic" 으로지정해줘야제대로작동됩니다. 또하나 캐러셀이작동하기위해서는 HTML 문서의마지막부분에다음과같이스크립트를적용 해줘야작동합니다. <script> $('.carousel').carousel() </script> [ 그림 5-10] 캐러셀이적용된모습 example/ch05/step4.html 158 5 장싱글페이지웹사이트제작 159