04 부트스트랩 3.0 4장에서다루는내용 01 _ 시작페이지 02 _ CSS 03 _ 구성요소 04 _ 자바스크립트 05 _ 부트스트랩 3.0으로디자인수정하기

Size: px

Start display at page:

Download "04 부트스트랩 3.0 4장에서다루는내용 01 _ 시작페이지 02 _ CSS 03 _ 구성요소 04 _ 자바스크립트 05 _ 부트스트랩 3.0으로디자인수정하기"

용준 최
5 years ago
Views:

1 04 부트스트랩 3.0 4장에서다루는내용 01 _ 시작페이지 02 _ CSS 03 _ 구성요소 04 _ 자바스크립트 05 _ 부트스트랩 3.0으로디자인수정하기

2 현재부트스트랩 3.0은개발중이며, 80% 정도완성돼있어서조만간출시될예정입니다. 이책이나올즈음에는정식버전이나 오겠죠. 그래서이번장에서부트스트랩 3.0에관한내용을다루려고합니다. 이전장에서여러번언급했듯이부트스트랩 3.0은모바일을우선으로지원합니다. 부트스트랩은 1.0 버전에서데스트탑전용으로나왔고 2.0에서는모바일겸용, 3.0에서는모바일우선지원, 데스크탑겸용으로진화하고있습니다. 부트스트랩 3.0은아직개발중이지만레이아웃이나대부분요소는개발이완료됐으며, 모바일을우선으로지원한다는조건에맞게어떤부분을추가할지또는제거할지조정하고있습니다. 이전버전과비교해서 3.0 버전에서변경된부분을알아보겠습니다.

3 시작페이지 01 그림 4-1 부트스트랩 3.0 초기화면 부트스트랩 3.0 의초기화면입니다. 상단메뉴는아직완료되지않은상태이므로제가임 의로만들었습니다. 얼마전까지 Gallery 페이지가있어서부트스트랩으로만들어진웹 01. 시작페이지 429

4 사이트의갤러리를볼수있었지만, 이부분을따로떼어서별도의사이트 ( getbootstrap.com/) 로이동해서볼수있게했습니다. 이전버전의메뉴에서 Scaffolding과 Base CSS를통합해서 CSS로변경됐습니다. 내려받기버튼을보면흰색으로기존의그래디언트효과가없는상태인데아직작업중이라서그렇습니다. 그림 4-2 파일구조 파일의기본구조를보면기본스타일시트와모바일용스타일시트가통합돼한종류의스타일시트만있습니다. 아이콘은기존의 png 이미지를폰트아이콘으로교체했으므로 img 폴더가사라지고 fonts 폴더가생겼으며이폴더에는 5종류의폰트가있습니다. 다양한종류의폰트확장자가있는것은웹브라우저별로다른확장자를사용하기때문입니다.  외부자바스크립트플러그인인 respond.js 를사용해서인터넷익스플로러 8 이하의버전에서도미디어쿼리가작동되게했습니다. 하지만부트스트랩 3.0은 IE7 이하버전을전혀지원하지않으므로실제로는 IE8에서만미디어쿼리가작동합니다. 이플러그인이작동되려면웹서버환경에서 html 파일을열어야합니다 장 _ 부트스트랩 3.0

5 그림 4-3 예제페이지 템플릿파일을 12 개로늘려서다양한웹페이지를만들때바로사용할수있게했습니다. 01. 시작페이지 431

6 02 CSS 01 헤딩 <h> 태그의 font-weight 를 bold 에서 semibold 로변경했습니다. 그림 4-4 h 태그 장 _ 부트스트랩 3.0

7 02 p 태그 글자색선택자중 class= text-info 를제거했습니다. 그림 4-5 p 태그 01 목록 (List) 목록의불릿을제거하기위한선택자로기존에는.unstyled 선택자를사용했지만, 3.0에서는.list-unstyled 선택자로변경됐습니다. <ul class="list-unstyled"> <li>...</li> </ul> 목록의수평배열은기존의.inline 선택자에서.list-inline 선택자로변경됐습니다. <ul class="list-inline"> <li>...</li> </ul> 02. CSS 433

8 04 그리드시스템 부트스트랩 3.0에서가장혁신적으로바뀐부분이그리드시스템입니다. 이전버전과동일하게 12컬럼레이아웃을사용하며, 기존의고정폭과유동폭두가지레이아웃에서유동폭한가지레이아웃으로전환됐습니다. 아래의표에서볼수있듯이 767픽셀이하의화면폭에서는 2.0 버전과같지만, 768픽셀이상의화면폭에서는하나의컬럼폭이모두동일하게 8.33% 로일정합니다. 유동폭레이아웃에서폭의단위를퍼센트로사용하면.container 폭의변화에따라서.span 폭이유동적으로변합니다. 즉, 부모요소의폭이 1,000픽셀이라면한컬럼의폭은 83픽셀이됩니다. 소수점이하는픽셀이없습니다. 컬럼거터크기 화면폭 767px 이하 768px 이상 1 컬럼폭 100% % 거터 ( 좌우패딩 ) 폭없음좌우측패딩 15 픽셀 표 1-1 부트스트랩에서그리드시스템을사용하려면다음과같이가장외곽에.container 선택자를 사용하고그다음에.row 선택자,.span+ 숫자선택자순서대로사용합니다. <div class="container"> <div class="row"> <div class="span4"> 콘텐츠 그러므로컬럼의폭은.row 선택자나.container 선택자에폭이정해지면이폭에따라서 퍼센트에의해컬럼의폭이정해질것입니다. 부트스트랩 3.0 에서.container 선택자의폭 은다음과같습니다 장 _ 부트스트랩 3.0

컬럼거터크기 화면폭 767px 이하 768px 이상 991px 이하 992px 이상 1,199px 이하 1,200px 이상.container 폭 100% 728px 940px 1170px 거터 ( 좌우패딩 ) 폭없음좌우패딩 15px 좌우패딩 15px 좌우패딩 15px 표 1-2 화면폭이 1,200픽셀이상인경우.

9 컬럼거터크기 화면폭 767px 이하 768px 이상 991px 이하 992px 이상 1,199px 이하 1,200px 이상.container 폭 100% 728px 940px 1170px 거터 ( 좌우패딩 ) 폭없음좌우패딩 15px 좌우패딩 15px 좌우패딩 15px 표 1-2 화면폭이 1,200픽셀이상인경우.container의폭은 1,170픽셀이므로컬럼하나의폭은 1170*8.33%=97.461픽셀이됩니다. 그러면실제웹페이지를이용해서그리드시스템에대해알아보겠습니다. 첨부파일에서 docs/examples 폴더의 grid.html 파일을웹브라우저에열면아래처럼나타납니다. 각컬럼이붙어있어서컬럼사이의간격인거터가없습니다. 부트스트랩 3.0에서의거터는 [ 표 1-1] 에서볼수있듯이각컬럼의좌우패딩을만들어주므로컬럼사이에간격을추가하려면.span 선택자의내부에 <div> 태그를사용해야합니다. 그림 4-6 그리드시스템 docs 폴더를 wamp 서버의 www 폴더에복사해붙여넣고앱타나스튜디오에서프로젝트 로등록합니다. 02. CSS 435

10 그림 4-7 grid2.html 파일만들기 examples 폴더에서 grid.html 파일을복사해서 grid2.html 파일을만든다음, 이파일을 편집기열고.container 부분을다음과같이수정합니다. <div class="container"> <div class="row show-grid"> <div class="span4">4 <div class="span4">4 <div class="span4">4  저장한후웹브라우저에서열면다음과같이나타납니다. 그림 4-8 그리드시스템의거터 장 _ 부트스트랩 3.0

11 다음과같이.span4 선택자가있는 <div> 태그안에.well 선택자를추가한 <div> 태그를 만들어줍니다..well 선택자는패딩이있는박스를만들어주는부트스트랩고유의선택자입 니다. <div class="container"> <div class="row show-grid"> <div class="span4"> <div class="well">4 <div class="span4"> <div class="well">4 <div class="span4"> <div class="well">4  이파일의스타일시트는 <head> 태그에서제어하고있으니다음의스타일시트를수정합니 다. 그리드의배경색상을바디의배경색상으로하고테두리를 none 으로설정합니다.  <style>.show-grid { margin-bottom: 15px;.show-grid [class^="span"] { padding-top: 10px; padding-bottom: 10px; background-color: #fff; border: none;.show-grid [class*="span"]:hover { background-color: #ddd; </style> 저장하고웹브라우저에서확인한결과는다음과같습니다. 그림 4-9 패딩을이용한거터의표시 02. CSS 437

각파일아래에는다음과같이 IE8 이하버전에서미디어쿼리가작동할수있도록자바스크립트플러그인을조건주석을사용해삽입했으므로 IE8 이하버전에서도반응형디자인이적용된모습을볼수있습니다. IE 상위버전을사용하고있다면, 개발자도구에서브라우저모드를 IE8으로설정해테스팅할수있습니다. <!--[if lt IE 9]> <script src=".

12 각파일아래에는다음과같이 IE8 이하버전에서미디어쿼리가작동할수있도록자바스크립트플러그인을조건주석을사용해삽입했으므로 IE8 이하버전에서도반응형디자인이적용된모습을볼수있습니다. IE 상위버전을사용하고있다면, 개발자도구에서브라우저모드를 IE8으로설정해테스팅할수있습니다.  그림 4-10 IE8 에서확인 부트스트랩 3.0 에서의컬럼크기에따른.span 의폭은다음과같습니다. span 크기 화면폭 767px 이하 768px 이상 span12 100% span % span % span9 75% span % span % 화면폭의 100% span6 50% span % span % span3 25% span % span % 표 장 _ 부트스트랩 3.0

13 05 네스팅컬럼 부트스트랩 3.0을이용해서레이아웃을구성할때가장주의해야할부분이네스팅컬럼입니다. 네스팅컬럼을사용해서.span 선택자가있는 <div> 태그내부에다른.span 선택자가있는 <div> 태그를사용할때가많은데이내부에있는.span 선택자의폭은부모요소의폭을기준으로백분율을적용하기때문입니다. 이전의.container 부분의코드를복사해서바로아래에다음과같이만들어줍니다. 주목할것은.span8 선택자의내부에.span 선택자가두개있는데이들숫자의합이 12가돼야한다는것입니다. 부모요소의폭이어떤수치라하더라도이수치를 100으로보고.span5가 %,.span7이 % 를사용하게됩니다. 고정폭레이아웃에서는.span8에해당하는.span3+.span5를적용해야했고만일패딩을사용했다면미디어쿼리를사용해서각.span에적용한패딩의수치만큼빼야했지만, 유동폭레이아웃에서는그럴필요가없습니다. <div class="container"> <div class="row show-grid"> <div class="span8"> <div class="well"> <div class="row"> <div class="span5"> 상품이미지 <div class="span7"> 상품옵션 <div class="span4"> <div class="well"> 사이드바  저장하고웹브라우저에서확인하면다음과같이나타납니다. 이레이아웃은 3 장에서만든 상품페이지에적용하면됩니다. 02. CSS 439

14 그림 4-11 네스팅컬럼 06 폼 (Form) 입력박스부트스트랩 3.0은퍼센트기반이므로폼요소의폭은부모요소의 100% 를사용합니다. 입력박스 (input) 와 textarea 박스, 선택박스 (selectbox) 는폭을설정하지않으면이전에는 220 픽셀이었지만, 3.0에서는다음과같이기본폭이부모요소의 100% 로설정됩니다. 그림 % 폭의폼요소 따라서이번버전에서는폼요소를수평으로배치할때,.form-inline 선택자를사용하면 폭을지정하는선택자를사용하지않아도됐지만 3.0 에서는반드시사용해야합니다. <form class="form-inline"> <h3> 인라인폼 </h3> <input type="text" class="span3" placeholder=" "> <input type="password" class="span3" placeholder="password"> <div class="checkbox"> <label> <input type="checkbox"> Remember me </label> <button type="submit" class="btn">sign in</button> </form> 장 _ 부트스트랩 3.0

15 그림 4-13 인라인폼 입력박스의폭은이전에는컬럼사이즈인.span+ 숫자를사용하거나다음과같이별도의선 택자를사용했지만, 이들별도의선택자는다른용도로변경됐습니다. 그림 4-14 제거된입력박스크기선택자 즉버튼과같이사용하면입력박스의상하높이를조절하는데사용되며,.input-small 과.input-large 만살아남았고, 다른선택자는제거됐습니다. <form> <input class="input-large" type="text" placeholder=".input-large"> <input type="text" placeholder="default input"> <input class="input-small" type="text" placeholder=".input-small"> </form> 그림 4-15 변경된입력박스크기선택자 02. CSS 441

16 체크박스와라디오버튼 이전에는 <label> 태그에각.checkbox,.radio 선택자를사용했지만, 3.0 에서는 <div> 태 그에선택자를사용해야합니다. <form> <label class="checkbox"> <input type="checkbox" value=""> Option one is this and that be sure to include why it's great </label> <label class="radio"> <input type="radio" name="optionsradios" id="optionsradios1" value="option1" checked> Option one is this and that be sure to include why it's great </label> </form> 다음과같이 <div> 태그에선택자를사용하고 label 태그에는선택자를지정하지않습니다. <form> <div class="checkbox"> <label> <input type="checkbox" value=""> Option one is this and that be sure to include why it's great </label> <div class="radio"> <label> <input type="radio" name="optionsradios" id="optionsradios1" value="option1" checked> Option one is this and that be sure to include why it's great </label> </form> 체크박스와라디오버튼을수평으로배치하려면이전에는.checkbox,.inline 또는.radio,.inline 두개의선택자를사용했는데 3.0 에서는.checkbox-inline 또는.radio-inline 선 택자하나만사용합니다. <form> <label class="checkbox-inline"> 장 _ 부트스트랩 3.0

<input type="checkbox" id="inlinecheckbox1" value="option1"> 1 </label> <label class="checkbox-inline"> <input type="checkbox" id="inlinecheckbox2" value="option2"> 2 </label> <label

17 <input type="checkbox" id="inlinecheckbox1" value="option1"> 1 </label> <label class="checkbox-inline"> <input type="checkbox" id="inlinecheckbox2" value="option2"> 2 </label> <label class="checkbox-inline"> <input type="checkbox" id="inlinecheckbox3" value="option3"> 3 </label> </form> 비활성화폼요소이전버전에서는입력박스에만비활성화기능이있었지만 3.0에서는모든요소에대해비활성화기능을추가할수있습니다. 다음과같이 <fieldset> 태그에도 disabled 속성을추가할수있습니다. <form class="form-inline"> <fieldset disabled> <div> <input type="text" class="span4" placeholder="disabled input"> <div> <select class="span4"> <option>disabled select</option> </select> <div class="checkbox"> <label> <input type="checkbox"> Can't check this </label> <button type="submit" class="btn btn-primary">submit</button> </fieldset> </form> 그림 4-16 비활성화폼요소 02. CSS 443

18 폼유효성검사이전에는폼유효성검사에.warning,.error,.info,.success 선택자를사용했으나.info 가제거되고.has-warning,.has-error,.has-success로교체됐습니다. 또한, 각요소에는.input-with-feedback 선택자를추가합니다. <form> <div class="control-group has-warning"> <label class="control-label" for="inputwarning">input with warning</label> <div class="controls"> <input type="text" class="input-with-feedback" id="inputwarning"> <div class="control-group has-error"> <label class="control-label" for="inputerror">input with error</label> <div class="controls"> <input type="text" class="input-with-feedback" id="inputerror"> <div class="control-group has-success"> <label class="control-label" for="inputsuccess">input with success</label> <div class="controls"> <input type="text" class="input-with-feedback" id="inputsuccess"> <button type="submit" class="btn btn-primary">submit</button> </form> 그림 4-17 폼유효성검사 장 _ 부트스트랩 3.0

19 폼확장기능입력박스에다른요소를추가할때, 이전에는.input-prepend 선택자나.input-append 선택자를사용했지만하나로통일해서.input-group을사용합니다. 또한같이사용하던.add-on 선택자는.input-group-addon으로변경됐습니다. <form> <div class="input-group span9"> <span <input type="text" placeholder="username"> <div class="input-group span6"> <input type="text"> <span class="input-group-addon">.00</span> <div class="input-group span3"> <span class="input-group-addon">$</span> <input type="text"> <span class="input-group-addon">.00</span> </form> 그림 4-18 입력박스의추가요소 크기를변경할때각요소에크기변경을위한선택자인.input-large,.input-small 을추 가합니다. <form> <div class="input-group span9"> <span class="input-group-addon <input type="text" class="input-large" placeholder="username"> 02. CSS 445

20 <div class="input-group span9"> <span <input type="text" placeholder="username"> <div class="input-group span9"> <span class="input-group-addon <input type="text" class="input-small" placeholder="username"> </form> 그림 4-19 입력박스추가요소의크기변경 버튼을사용할경우.input-group-addon 선택자대신.input-group-btn 선택자를사 용합니다. <form> <div class="input-group span7"> <span class="input-group-btn"> <button class="btn" type="button">go!</button> </span> <input type="text"> <div class="input-group span7"> <input type="text"> <span class="input-group-btn"> <button class="btn" type="button">go!</button> </span> </form> 그림 4-20 버튼추가요소 장 _ 부트스트랩 3.0

21 이전과같이드롭다운메뉴를추가할수도있습니다. <div class="input-group span7"> <div class="input-group-btn"> <button class="btn dropdown-toggle" data-toggle="dropdown">action <span class="caret"></span></button> <ul class="dropdown-menu"> <li><a href="#">action</a></li> <li><a href="#">another action</a></li> <li><a href="#">something else here</a></li> <li class="divider"></li> <li><a href="#">separated link</a></li> </ul>  <input type="text">  그림 4-21 드롭다운추가요소.row 와.span+ 숫자선택자로만든레이아웃을이용해서폼요소를배치할수도있습니다. <form> <div class="row"> <div class="span4"> <input type="text" placeholder=".span4"> <div class="span4"> <input type="text" placeholder=".span4"> <div class="span4"> <input type="text" placeholder=".span4"> </form> 그림 4-22 입력박스의폭제어 02. CSS 447

22 .uneditable-input 선택자는처음에는추가됐었지만, disabled 속성과중복되는지개발도 중제거됐습니다. <span class="uneditable-input">some value here</span> 검색박스를둥글게만들기위해.form-search 와.search-query 선택자를사용했는데 3.0 버전에서이선택자는제거돼서지원하지않습니다. <form class="form-search"> <input type="text" class="input-medium search-query"> <button type="submit" class="btn">search</button> </form> 그림 버전에서제거된선택자 07 버튼 기존의버튼에서 btn-inverse 가제거됐습니다. <button type="button" class="btn btn-default">default</button> <button type="button" class="btn btn-primary">primary</button> <button type="button" class="btn btn-success">success</button> <button type="button" class="btn btn-info">info</button> <button type="button" class="btn btn-warning">warning</button> <button type="button" class="btn btn-danger">danger</button> <button type="button" class="btn btn-link">link</button> 그림 4-24 버튼 장 _ 부트스트랩 3.0

23 08 이미지 기존의.img-polaroid 선택자가제거되고.img-thumbnail 선택자로교체됐지만, 기능은 그대로입니다. <div class="bs-docs-example bs-docs-example-images"> <img data-src="holder.js/140x140" class="img-rounded" > <img data-src="holder.js/140x140" class="img-circle" > <img data-src="holder.js/140x140" class="img-thumbnail" > 그림 4-25 이미지 09 아이콘기존의이미지아이콘에서폰트아이콘으로교체됐지만, 숫자는 140개에서 160개로늘어난것에그쳤습니다. 그러니아직은폰트어썸폰트아이콘을사용해야더많은아이콘을사용할수있습니다. 그런데이미지아이콘에서폰트아이콘으로교체되면서.glyphicon 선택자가추가돼서폰트어썸아이콘을사용할경우제대로표시되지않을수있습니다. 부트스트랩 3.0 정식버전이나오게되면폰트어썸에서도개정판을내놓을것이므로그이후에제대로표현할수있을것입니다. <span class="glyphicon glyphicon-search"></span> 그림 4-26 폰트아이콘 02. CSS 449

구성요소 03 01 드롭다운메뉴 기존의드롭다운메뉴와큰차이가나는것은드롭다운메뉴에화살표가제거됐습니다.

24 구성요소 드롭다운메뉴 기존의드롭다운메뉴와큰차이가나는것은드롭다운메뉴에화살표가제거됐습니다. 또한, 3단의드롭다운서브메뉴가제거될예정이었지만수많은사용자의요청으로계속해서사용할수있게됐습니다. 그림 4-27 드롭다운메뉴 장 _ 부트스트랩 3.0

25 02 전체폭버튼그룹 3.0 버전에서추가된버튼기능입니다..btn-group-justified 선택자를추가하면부모요소의전체폭을사용하는버튼그룹이만들어집니다. <div class="btn-group btn-group-justified"> <a href="#" class="btn">left</a> <a href="#" class="btn">right</a> <a href="#" class="btn">middle</a> 그림 4-28 전체폭버튼그룹 03 탭, 필, 리스트 탭과필에도.nav-justified 선택자를사용하면전체폭탭과필이만들어집니다. <ul class="nav nav-tabs nav-justified"> <li class="active"><a href="#">home</a></li> <li><a href="#">profile</a></li> <li><a href="#">messages</a></li> </ul> <br> <ul class="nav nav-pills nav-justified"> <li class="active"><a href="#">home</a></li> <li><a href="#">profile</a></li> <li><a href="#">messages</a></li> </ul> 그림 4-29 탭과필 03. 구성요소 451

26 리스트는다음그림과같이테두리가만들어지며각리스트사이에가로선이기본적으로추 가되므로이전에사용하던.divider 선택자는더이상필요없게됐습니다. <ul class="nav nav-list"> <li class="active"><a href="#">home</a></li> <li><a href="#">profile</a></li> <li><a href="#">messages</a></li> </ul> 그림 4-30 리스트 왼쪽탭, 오른쪽탭, 아래쪽탭기능은 3.0 에서제거됐습니다. 그림 4-31 제거된탭기능 04 내비게이션바내비게이션바의스타일을담당하던.navbar-inner 선택자는제거됐으며이에대한스타일은.navbar 선택자로이동됐습니다. 내비게이션바의타이틀은기존의.brand에서.navbar-brand로변경됐습니다. 세로분리자는.divider-vertical에서.divider로변경됐으며메뉴바의높이가높아지면서.divider의높이를줄이고중간에위치하게했습니다. 또한, 모바일디자인에맞춰서터치할수있는범위를넓히기위해높이가 40px에서 50px로늘어났으며모바일기기에서는더욱늘어나서 54px로됩니다. <div class="navbar"> <a class="navbar-brand" href="#">title</a> <ul class="nav"> <li class="active"><a href="#">home</a></li> <li class="divider"></li> <li><a href="#">link</a></li> <li><a href="#">link</a></li> </ul> 장 _ 부트스트랩 3.0

27 세로분리자는다음과같이세로형으로나타나지만, 폭이좁 은모바일화면에서메뉴바가함몰되면가로분리자로전환 됩니다. 그림 4-32 내비게이션바의상하폭과세로분리자 05 반응형내비게이션바 함몰버튼의선택자가.btn btn-navbar 선택자에서.navbar-toggle 선택자로변경됐으며 data 속성도.navbar-responsive-collapse로변경됐습니다. <div class="navbar"> <div class="container"> <a class="navbar-toggle" data-toggle="collapse" data-target=".navbar-responsivecollapse"> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </a> <a class="navbar-brand" href="#">title</a> <div class="nav-collapse collapse navbar-responsive-collapse">...    06 페이지네이션 페이지네이션은기존에 <div> 태그에있던.pagination 선택자를 <ul> 태그로이동했습 니다. <ul class="pagination"> <li><a href="#">«</a></li> <li><a href="#">1</a></li> <li><a href="#">2</a></li> <li><a href="#">3</a></li> <li><a href="#">4</a></li> <li><a href="#">5</a></li> <li><a href="#">»</a></li> </ul> 03. 구성요소 453

페이지네이션의위치를설정하는다음선택자는 3.0 에서는지원하지않습니다. <ul class="pagination pagination-centered">...</ul> <ul class="pagination pagination-right">...</ul> 07 라벨 기존에는 <h> 태그에라벨을사용할경우일정한크기로나타났으나 3.

28 페이지네이션의위치를설정하는다음선택자는 3.0 에서는지원하지않습니다. <ul class="pagination pagination-centered">...</ul> <ul class="pagination pagination-right">...</ul> 07 라벨 기존에는 <h> 태그에라벨을사용할경우일정한크기로나타났으나 3.0 에서는 <h> 태그의 크기에따라서변동됩니다. <h3>example heading <span class="label">new</span></h3> 그림 4-33 라벨의크기변경 라벨에서짙은회색의.label-inverse 선택자는 3.0 에서지원하지않습니다. <span class="label">default</span> <span class="label label-success">success</span> <span class="label label-warning">warning</span> <span class="label label-danger">danger</span> <span class="label label-info">info</span> 그림 4-34 라벨 08 뱃지숫자에사용하는뱃지는기존에라벨과같은색상을지원했으나 3.0에서는모두사라지고회색뱃지만지원합니다. active 상태에서는배경색이흰색으로나타납니다. 그림 4-35 뱃지 장 _ 부트스트랩 3.0

29 09 글자구성요소 (Typographic components) 기존의.hero-unit 선택자는.Jumbotron 선택자로변경됐습니다. <div class="jumbotron"> <h1>hello, world!</h1> <p>...</p> <p><a class="btn btn-primary btn-large">learn more</a></p> 그림 4-36 점보트론 10 썸네일기존에는썸네일을만들기위해 <ul> 태그와 <li> 태그를사용했으나 3.0에서는.row 선택자가있는 <div> 태그를사용합니다. 따라서 <ul> 태그에사용하던.thumbnails 선택자는사라지고.thumbnail 선택자만남았습니다. <div class="row"> <div class="span3"> <a href="#" class="thumbnail"> <img data-src="holder.js/260x180" alt=""> </a> 구성요소 455

30 그림 4-37 썸네일 11 프로그레스바.bar 선택자는.progress-bar 선택자로변경됐습니다. <div class="progress"> <div class="progress-bar" style="width: 60%;"> 그림 4-38 프로그레스바 장 _ 부트스트랩 3.0

31 자바스크립트 모달자바스크립트중가장많이변경된것이모달입니다. 기존에팝업창에해당하는모달에사용하던.hide 선택자는 3.0에서는필요하지않습니다. 가장주목할부분은긴내용의콘텐츠지원을위해.modal-dialog 선택자와.modal-content 선택자를사용한 <div> 태그가추가됐으며내용이길어서스크롤할경우모달창이스크롤되게했습니다. 이전에는배경콘텐츠가스크롤됐었습니다. 제목에해당하는 <h4> 태그에는.modal-title 선택자를추가하면밑줄이만들어집니다. <a data-toggle="modal" href="#mymodal" class="btn btn-primary btn-large">launch demo modal</a> <div id="mymodal" class="modal hide fade" tabindex="-1" role="dialog" arialabelledby="mymodallabel" aria-hidden="true" > <div class="modal-dialog"> <div class="modal-content"> 04. 자바스크립트 457

<div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-hidden="true"> </ button> <h4 class="modal-title" id="mymodallabel">modal Heading</h4> <div

32 <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-hidden="true"> </ button> <h4 class="modal-title" id="mymodallabel">modal Heading</h4> <div class="modal-body"> <h4>text in a modal</h4> <p>duis mollis, est non commodo luctus, nisi erat porttitor ligula.</p> <h4>popover in a modal</h4> <p>this <a href="#" role="button" class="btn popover-test" title="" datacontent="and here's some amazing content. It's very engaging. right?" data-originaltitle="a Title">button</a> should trigger a popover on click.</p> <h4>tooltips in a modal</h4> <p><a href="#" class="tooltip-test" title="" data-original-title="tooltip">this link</a> and <a href="#" class="tooltip-test" title="" data-original-title="tooltip">that link</a> should have tooltips on hover.</p> <hr> <h4>overflowing text to show optional scrollbar</h4> <p>cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p>... <div class="modal-footer"> <button class="btn" data-dismiss="modal">close</button> <button class="btn btn-primary">save changes</button>   그림 4-39 모달 장 _ 부트스트랩 3.0

33 02 캐러젤이미지슬라이더인캐러젤은캡션이없는것이기본형태이고캡션을옵션으로추가할수있게변경했습니다. 인디케이터는이전버전에서오른쪽위에있었는데 3.0에서는가운데아래에배치됐습니다. 이전에는내비게이션글자를사용했지만폰트아이콘으로바뀌면서.glyphicon-chevron-left와 right 선택자, 그리고스타일을위한.glyphicon 선택자를사용합니다. 설치방법은부트스트랩 3.0으로디자인수정하기편에서알아보겠습니다. <div id="mycarousel" class="carousel slide"> <ol class="carousel-indicators"> <li data-target="#mycarousel" data-slide-to="0" class="active"></li> <li data-target="#mycarousel" data-slide-to="1"></li> <li data-target="#mycarousel" data-slide-to="2"></li> </ol> <div class="carousel-inner"> <div class="item active"> <img data-src="holder.js/1170x500/auto" alt=""> <div class="carousel-caption"> <h3>first slide label</h3> <p>nulla vitae elit libero, a pharetra augue. </p> <div class="item"> <img data-src="holder.js/1170x500/auto" alt=""> <div class="carousel-caption"> <h3>second slide label</h3> <p>lorem ipsum dolor sit amet, consectetur adipiscing elit. </p> <div class="item"> <img data-src="holder.js/1170x500/auto" alt=""> <div class="carousel-caption"> <h3>third slide label</h3> <p>praesent commodo cursus magna, vel</p> <a class="left carousel-control" href="#mycarousel" data-slide="prev"> <span class="glyphicon glyphicon-chevron-left"></span> </a> <a class="right carousel-control" href="#mycarousel" data-slide="next"> <span class="glyphicon glyphicon-chevron-right"></span> </a> 04. 자바스크립트 459

34 05 부트스트랩 3.0으로디자인수정하기 01 프로젝트폴더만들고파일수정하기 부트스트랩 3.0 버전을내려받아 3장에서작업한부트스트랩스타일시트와자바스크립트파일을교체해보니많은부분이제대로나오지않았습니다. 여러가지선택자가변경됐고레이아웃도바뀌었으니당연한일입니다. 해당선택자를교체하고이전에작업한사용자정의스타일시트를직접수정할수도있겠지만, 선택자를적용했을때모든요소가어떻게나타나는지알아보기위해서는복습도할겸 3.0 기준으로처음부터다시디자인하는것이좋습니다. 여기서는부트스트랩스타일시트와자바스크립트를 3.0 버전으로변경한후에나타나는이상증상을선택자와스타일시트를변경해서적용해보겠습니다. 그러므로이전의사용자스타일시트에있는내용을다른곳에복사해두고처음부터원래의스타일시트에차례대로복사해넣고확인하는작업으로진행하겠습니다. 과정은다음과같습니다. wamp 서버의프로젝트폴더를복사해서새로운폴더를만든다음폴더이름을변경 (bootstrap2) 합니다. 이 폴더안에프로젝트정보가있는.project 파일을제거합니다. 앱타나스튜디오에서해당폴더를대상으로프 로젝트폴더를만듭니다 장 _ 부트스트랩 3.0

35 프로젝트폴더의 css 폴더에서 bootstrap.css 파일을 bootstrap2.css로변경합니다. js 폴더에서 bootstrap.js 파일을 bootstrap2.js로변경합니다. 첨부파일의 assets/css 폴더에서 bootstrap.css 파일을복사해서프로젝트폴더의 css 폴더에복사합니다. assets/js 폴더에서 bootstrap.js 파일을복사해서프로젝트폴더의 js 폴더에복사합니다. 첨부파일의 assets/js/respond폴더에서 respond.min.js 파일을복사해서프로젝트의 js 폴더에붙여넣습니다. header.php 파일을열고 <head> 태그에다음의코드를삽입합니다. IE 8에서미디어쿼리가작동하게하는자바스크립트입니다.  프로젝트의 css 폴더로들어가서 style.css 파일을복사해서 style2.css 로변경합니다. 앱타나에서 style.css 파 일을열고모두제거한다음위에서부터 style2.css 파일의내용을차례대로복사해확인합니다. 02 header.php 파일수정하기 스타일시트에서헤더부분에해당하는스타일시트를복사해붙여넣고웹브라우저에서확인하면다음과같이나타납니다. 내비게이션바부분에서바뀐선택자를변경해주면모두복구되는부분입니다. 그림 버전을적용한헤더.navbar-inner 선택자가있는 <div> 태그와닫는태그를제거하고 3.0 에서변경된사항에 맞게선택자를교체합니다. <div class="navbar navbar-inverse"> <div class="navbar-inner"> <div class="container"> <a class="navbar-toggle" data-toggle="collapse" data-target=".navbar-responsive- 05. 부트스트랩 3.0 으로디자인수정하기 461

36 collapse"> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </a> <a class="navbar-brand" href="#">title</a> <div class="nav-collapse collapse navbar-responsive-collapse"> 스타일시트에서.navbar-inner 도제거합니다. 여기까지설정하면내비게이션바가제대로 나타납니다. header.navbar-inverse.navbar-inner { 생략 검색박스는다음과같이변경된선택자로수정하고폭을지정하기위해.span2 선택자를추 가합니다. <form class="navbar-form pull-left span2"> <div class="input-group"> <input type="text" placeholder="search"> <span class="input-group-btn"> <button type="submit" class="btn btn-primary"><i class="icon-search"></i></button> </span> </form> 로그인메뉴와설정메뉴사이에있는.divider-vertical 선택자는.divider 선택자로수정 합니다. <li class="divider-vertical"></li> 로그인폼은모든방향에패딩을 15픽셀을적용합니다..login-form { padding: 15px; 회원가입모달은.hide 선택자를제거하고.modal-dialog,.modal-content 선택자가있 는 <div> 태그를추가합니다 장 _ 부트스트랩 3.0

37 <a href="#sign-up" role="button" class="btn btn-primary pull-right sign-up" datatoggle="modal"> 회원가입 </a>  <div id="sign-up" class="modal fade hide" tabindex="-1" role="dialog" arialabelledby="mymodallabel" aria-hidden="true" data-remote="include/register.html"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-hidden="true"> </ button> <h3 class="modal-title" id="mymodallabel"> 회원가입 </h3> <div class="modal-body"> <p>one fine body </p> 스타일시트에서모달바디의높이를조절하기위한다음의설정은제거합니다. 3.0 버전은높 이를자동조절하며콘텐츠가많아서화면범위를벗어나면스크롤할수도있습니다. #sign-up.modal-body { min-height: 500px; 03 index.php 파일수정하기 캐러젤슬라이더의캡션이모바일에서나타나지않게추가했던.hidden-phone 선택자는제거합니다. 3.0 버전에서는캡션이보이지않게설정됐습니다. 내비게이션부분은폰트어썸아이콘을사용하므로 <span> 태그에.icon-chevron-left 선택자와.icon-chevronright 선택자를사용하고,.glyphicon 선택자를추가합니다. 부트스트랩은이선택자에대해서폰트아이콘을스타일하고있습니다. <section class="container"> <div id="mycarousel" class="carousel slide"> 05. 부트스트랩 3.0 으로디자인수정하기 463

38 <ol class="carousel-indicators"> <li data-target="#mycarousel" data-slide-to="0" class="active"></li> <li data-target="#mycarousel" data-slide-to="1" class=""></li> <li data-target="#mycarousel" data-slide-to="2"></li> </ol> <div class="carousel-inner"> <div class="item active"> <img src="img/slide1.jpg" alt=""> <div class="carousel-caption hidden-phone"> <h4>first Thumbnail label</h4> <p>cras justo odio.</p> <div class="item"> <img src="img/slide2.jpg" alt=""> <div class="carousel-caption hidden-phone"> <h4>first Thumbnail label</h4> <p>cras justo odio.</p> <div class="item"> <img src="img/slide3.jpg" alt=""> <div class="carousel-caption hidden-phone"> <h4>first Thumbnail label</h4> <p>cras justo odio.</p> <a class="left carousel-control" href="#mycarousel" data-slide="prev"> <span class="glyphicon icon-chevron-left"></span> </a> <a class="right carousel-control" href="#mycarousel" data-slide="next"> <span class="glyphicon icon-chevron-right"></span> </a> 스타일시트에서폰트아이콘에대해서폰트패밀리를폰트어썸으로수정합니다. 내비게이션을위해추가했던폰트부분은제거하고캡션의위치를변경하고싶다면원래의스타일시트를그대로사용합니다. 캡션의배경색은기본으로설정이안돼있는데배경색을추가하고싶다면 background: rgba(0, 0, 0, 0.75); 를추가합니다 장 _ 부트스트랩 3.0

39 .glyphicon:before { font-family: 'FontAwesome';.carousel-control { font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; border-radius: 0; border: 0px solid white; left: 0;.carousel-control.right { right: 0;.carousel-caption { width: 50%; bottom: 60px; left: 50%; padding: 20px; text-align: left; background: rgba(0, 0, 0, 0.75); 6 개의배너가있는부분은 <ul> 태그과 <li> 태그를모두 <div> 태그로변경하고.thumbnails 선택자를.row 선택자로변경합니다. <div class="row banner"> <div class="span6"> <div class="thumbnail"> <i class="icon-bar-chart pull-left"></i> <h2>cras justo odio</h2> <p>cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus.</p> 생략.. 배너관련스타일시트는기존의스타일을모두추가하고상하요소와의간격을위해다음의 마진을추가합니다..banner { margin: 15px auto; 05. 부트스트랩 3.0 으로디자인수정하기 465

40 세로형캐러젤슬라이더는하단에있는내비게이션부분을폰트아이콘으로교체하고스타 일시트는기존의스타일을그대로적용합니다. <div id="testimonials" class="carousel slide vertical hidden-phone"> <div class="carousel-inner"> <div class="item active"> <p>cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</ p> <img src="img/animals-q-c jpg" class="pull-left" alt=""><h3 class="pullleft">- Sundoli -</h3> <div class="item"> <p>cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</ p> <i class="icon-user pull-left"></i><h3 class="pull-left">- Venusian -</h3> <div class="item"> <p>cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</ p> <i class="icon-user pull-left"></i><h3 class="pull-left">- Professional -</h3> <a class="left carousel-control" href="#testimonials" data-slide="prev"> <span class="glyphicon icon-chevron-left"></span> </a> <a class="right carousel-control" href="#testimonials" data-slide="next"> <span class="glyphicon icon-chevron-right"></span> </a> 04 footer.php 파일수정하기.span9 선택자가있는 <div> 태그안의.span3 선택자는모두.span4 선택자로수정하고각 <ul> 태그에있는.unstyled 선택자와.inline 선택자는.list-unstyled 선택자와.listinline 선택자로수정합니다. <div class="span9"> 장 _ 부트스트랩 3.0

41 <h4 class= hidden-phone >BooKstrap 은다양한분야의창의적인사람들과의네트워킹 과비즈니스가이루어지는공간이자커뮤니케이션그자체입니다.</h4> <div class="row"> <nav class="span4"> <ul class="list-unstyled footer-nav"> 생략 </ul> </nav> <div class="span4"> <ul class="stat list-unstyled"> 생략 </ul> <div class="span4"> <ul class="share list-unstyled"> 생략 </ul> 푸터아래의오른쪽 <nav> 태그는클래스를제거합니다. 푸터관련스타일시트는이전의스 타일을모두그대로사용합니다. <div class="span6"> <nav class="span6> <ul class="list-inline pull-right"> 05 gallery.php 파일수정하기 오른쪽의검색박스는메뉴바의검색박스와같이수정해줍니다. <form class="navbar-form pull-right span2"> <div class="input-group"> <input type="text" placeholder="search"> <span class="input-group-btn"> <button type="submit" class="btn btn-primary"><i class="icon-search"></i></button> 05. 부트스트랩 3.0 으로디자인수정하기 467

42 </span> </form> 갤러리의 <ul>, <li> 태그를모두 <div> 태그로수정하고.thumbnails 선택자는.row 선택 자로수정합니다. <div class="row" id="gallery" data-toggle="modal-gallery" data-target="#modal-gallery"> <div class="span3"> <div class="thumbnail"> <a data-gallery="gallery" href="img/nature-q-c jpg" > <img src="img/nature-q-c jpg"> </a> <div class="caption"> 생략 스크립트부분은빨간색부분을모두제거합니다. true 오른쪽에있는콤마도제거합니다. 이부분은갤러리 2 에서사용한미디어쿼리를적용하겠습니다. <script> $(function(){ var $container = $('#gallery'); $container.imagesloaded( function(){ $container.masonry({ itemselector: '.span3', isanimated: true, columnwidth: function( containerwidth ) { if($(".container").width() == 940) { return 240; var width = $(window).width(); var col = 300; if(width < 1200 && width >= 980) { col = 240; else if(width < 980 && width >= 768) { col = 186; 장 _ 부트스트랩 3.0

); ); return col; 현재까지작업한것을저장하고화면에서확인하면썸네일이미지가 3개만나타납니다. 썸네일폭이맞지않아서가장오른쪽의 4번째썸네일은아래로내려가있습니다. 요소검사를하면.row의폭이 1190픽셀인데이것은.container의폭인 1170px에부트스트랩에서기본적으로설정된좌우마진이마이너스값으로적용돼서그렇습니다.

43 ); ); return col; 현재까지작업한것을저장하고화면에서확인하면썸네일이미지가 3개만나타납니다. 썸네일폭이맞지않아서가장오른쪽의 4번째썸네일은아래로내려가있습니다. 요소검사를하면.row의폭이 1190픽셀인데이것은.container의폭인 1170px에부트스트랩에서기본적으로설정된좌우마진이마이너스값으로적용돼서그렇습니다..row 선택자의오른쪽에오른쪽마진이 -10px 적용되면오른쪽으로넓어지며, 왼쪽마진을적용하면왼쪽으로넓어집니다..row { margin-right: -10px; margin-left: -10px; 그림 4-41 썸네일 1190픽셀에대해서 4개의썸네일을사용하게되는데 1190을 4로나누면 297.5가나오는데딱떨어지는정수가나오지않아서 298픽셀이적용됩니다. 298*4=1192픽셀이되므로폭이모자라서마지막썸네일이아래로내려오는것입니다. 그래서썸네일의폭을강제로 297픽셀로조정합니다. 다음과같이.container의폭에대해서미디어쿼리로썸네일의크기를설정합니다. /* Large desktop (min-width: 1200px) { 05. 부트스트랩 3.0 으로디자인수정하기 469

.gallery.span3 { width:297px; @media (min-width: 980px) and (max-width: 1199px) {.gallery.span3 { width:320px; /* Portrait tablet to landscape and desktop */ @media (min-width: 768px) and (max-width: 979px) {.

44 .gallery.span3 { (min-width: 980px) and (max-width: 1199px) {.gallery.span3 { width:320px; /* Portrait tablet to landscape and desktop (min-width: 768px) and (max-width: 979px) {.gallery.span3 { width:374px; /* Landscape phone to portrait tablet (max-width: 767px) { /* Landscape phones and down (max-width: 480px) {.select-option { margin-bottom: 40px; 위와같이설정하고저장한다음화면에서웹브라우저의 폭을줄이면검색박스는모바일폭에서 100% 가적용되 므로별도의스타일시트를설정하지않아도됩니다. 그림 4-42 모바일에서의검색박스 무한스크롤을적용하려면추가페이지가있는 pages 폴더의내용을변경해줍니다. gallery. php 파일의썸네일이있는.row 부분을복사해서 2.php, 3.php, 4.php 파일에붙여넣기만하면됩니다. 썸네일의배경색을흰색으로하고아래쪽마진에 20픽셀을적용합니다. 메이슨리와아이소톱트랜지션스타일시트를기존의스타일시트에서복사해서붙여넣습니다..gallery.thumbnail { 장 _ 부트스트랩 3.0

background:#fff; margin-bottom:20px;.gallery.navbar { margin-bottom:20px; /**** 메이슨리 Transitions ****/.masonry,.masonry.masonry-brick { 생략 갤러리페이지는현재모달을이용한이미지갤러리플러그인을적용했는데파일의하단에서부트스트랩 3.

45 background:#fff; margin-bottom:20px;.gallery.navbar { margin-bottom:20px; /**** 메이슨리 Transitions ****/.masonry,.masonry.masonry-brick { 생략 갤러리페이지는현재모달을이용한이미지갤러리플러그인을적용했는데파일의하단에서부트스트랩 3.0의모달을위한두개의 <div> 태그를추가하면이미지썸네일을클릭했을때이미지갤러리가나타나기는하지만아직이플러그인이 3.0의레이아웃에적용되도록변경되지않았으므로왼쪽위에나타납니다. 부트스트랩 3.0이정식버전이나오면플러그인도수정될것입니다.  <div id="modal-gallery" class="modal modal-gallery fade" tabindex="-1"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> 생략 그림 4-43 이미지갤러리플러그인의오작동 06 gallery2.php, event.php, event2.php 파일수정하기 썸네일이있는부분의 <ul>, <li> 태그를 <div> 태그로변경하고.thumbnails 선택자를.row 선택자로변경합니다. 하단에서모달을이용한이미지갤러리부분도수정합니다. 스크립트의폭을조절하기위한부분도제거합니다. 이벤트페이지를위한스타일시트는기존스타일시트를그대로적용하면됩니다. 다른부분은이미 gallery.php에서작업했으므로추가로수정할것은없습니다. 05. 부트스트랩 3.0 으로디자인수정하기 471

46 <div class="row" id="gallery" data-toggle="modal-gallery" data-target="#modal-gallery"> <div class="span3 ux fur" data-category="ux"> <div class="thumbnail"> <a data-gallery="gallery" href="img/nature-q-c jpg" > <img src="img/nature-q-c jpg"> </a> <div class="caption"> 생략 07 blog.php 파일수정하기 블로그페이지는스니핏을그대로복사해서사용하다보니불필요한 <div> 태그가여러개있습니다. 고정폭레이아웃에서는.span 선택자안에같은숫자의.span 선택자가여러번반복돼도상관없지만유동폭에서는부모요소의폭에백분율이적용되므로이를제거해야합니다. 또한,.well 선택자를사용하려면폭이정해지는.span 선택자와같이사용하지않도록합니다. 블로그페이지는.span 선택자를나눠서사용하는곳이없으므로.row 선택자는하나만있어야합니다. 우선하나의 article 부분만남기고모두제거한다음.span8 선택자와같이있는.well 선택자를제거하고, 바로아래에.well 선택자가있는 <div> 태그를만들어줍니다. 그다음아래코드에서빨간색부분을제거합니다. 썸네일이미지는.span3 선택자로변경하고.pull-left 선택자를추가합니다. 페이지네이션의 <div> 태그도제거하고선택자는 <ul> 태그로이동합니다. <div class="container blog"> <div class="row"> <section class="span8 well"> <div class="well"> <article class="row"> <div class="span8"> <div class="row"> <header class="span8"> <h4><strong><a href="blog-post.php">title of the post</a></strong></h4> 장 _ 부트스트랩 3.0

47 </header> <div class="row"> <section class="span8"> <a href="#" class="thumbnail span3 pull-left"> <img src=" alt=""> </a> <p> Lorem ipsum dolor sit amet, id nec conceptam conclusionemque. Et eam tation option. Utinam salutatus ex eum. Ne mea dicit tibique facilisi, ea mei omittam explicari conclusionemque, ad nobis propriae quaerendum sea. </p> <p> Lorem ipsum dolor sit amet, id nec conceptam conclusionemque. Et eam tation option. Utinam salutatus ex eum. Ne mea dicit tibique facilisi, ea mei omittam explicari conclusionemque, ad nobis propriae quaerendum sea. </p> <p><a class="btn" href="#">read more</a></p> </section> <div class="row"> <footer class="span8"> <p></p> <p> <i class="icon-user"></i> by <a href="#">john</a> <i class="icon-calendar"></i> Sept 16th, 2012 <i class="icon-comment"></i> <a href="#">3 Comments</a> <i class="icon-share"></i> <a href="#">39 Shares</a> <i class="icon-tags"></i> Tags : <a href="#"><span class="label labelinfo">snipp</span></a> <a href="#"><span class="label label-info">bootstrap</span></a> <a href="#"><span class="label label-info">ui</span></a> <a href="#"><span class="label label-info">growth</span></a> </p> </footer> </article> <hr> <ul class="pagination pagination-large"> <li class="disabled"><a href="#">«</a></li> 05. 부트스트랩 3.0 으로디자인수정하기 473

48 <li class="active"><a href="#">1</a></li> <li><a href="#">2</a></li> <li><a href="#">3</a></li> <li><a href="#">4</a></li> <li><a href="#">5</a></li> <li><a href="#">»</a></li> </ul>  </section> sidebar.php 는다음과같이수정합니다. 이때 span4 선택자는다른선택자와같이사용할 경우앞으로배치합니다. <aside class="span4 sidebar"> <div class="well"> <?php include 'sidebar-content.php';?> </aside> 저장하고브라우저에서확인하면다음과같은화면이나타납니다. 그림 4-44 블로그페이지 스타일시트에서썸네일마진을설정한부분과 well 에대해서설정한부분을복사해서붙여 장 _ 부트스트랩 3.0

49 넣고선택자를바꿔줍니다. 아래와같이 box-sizing:border-box; 를추가한다음화면을 확인해서제대로나타나면글목록 article 부분을복사해서아래에여러개붙여넣습니다..blog.thumbnail { margin: 0 20px 20px 0;.blog.span8.well,.blog.span4.well,.blog.well { min-height: 20px; box-sizing:border-box; padding: 29px; margin-bottom: 20px; background-color: #fff; border: 1px solid #ccc; -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; -webkit-box-shadow: inset 0 0px 0px rgba(0, 0, 0, 0.05); -moz-box-shadow: inset 0 0px 0px rgba(0, 0, 0, 0.05); box-shadow: inset 0 0px 0px rgba(0, 0, 0, 0.05); sidebar-content.php 파일을열고태그클라우드부분의 <ul> 태그의선택자를.listinline 으로변경합니다. <ul class="list-inline tag-cloud"> 사이드바관련스타일시트는이전스타일을그대로복사해서붙여넣습니다. 08 blog2.php 파일수정하기 blog2.php 파일은.well 선택자가.container 선택자와같이있습니다. blog.php 파일에서 article 부분과페이지네이션을복사해서해당부분에붙여넣습니다. <div class="container blog well"> <div class="row"> <section class="span8"> <article> 05. 부트스트랩 3.0 으로디자인수정하기 475

50 <header> <h4><strong><a href="blog-post.php">title of the post</a></strong></h4> </header> <section> <a href="#" class="thumbnail span3 pull-left"> <img src=" alt=""> </a> 생략 </section> <footer> 생략 </footer> </article> <hr> <ul class="pagination pagination-large"> 생략 </ul> </section> sidebar2.php 파일을열고.span4 선택자를앞으로배치합니다. 저장한다음화면에서확 인하고제대로나타나면 article 부분을여러개복사합니다. <aside class="span4 sidebar"> 09 blog3.php 파일수정하기 blog3.php 파일을열고 blog.php에서 article과페이지네이션부분을복사해해당부분에붙여넣습니다. <div class="container blog blog3"> <div class="row"> <section class="span8 content"> <article> <header> <h4><strong><a href="blog-post.php">title of the post</a></strong></h4> </header> <section> 생략 </section> 장 _ 부트스트랩 3.0

51 <footer> 생략 </footer> </article> <hr> <ul class="pagination pagination-large"> 생략 </ul> </section> 스타일시트의 blog3 관련부분을복사해붙여넣고.blog3.content 의왼쪽패딩을 40 픽셀 로수정합니다..blog3 { margin-bottom: 20px; background-color: #ddd; border: 1px solid #ccc; -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; -webkit-box-shadow: inset 0 0px 0px rgba(0, 0, 0, 0.05); -moz-box-shadow: inset 0 0px 0px rgba(0, 0, 0, 0.05); box-shadow: inset 0 0px 0px rgba(0, 0, 0, 0.05); overflow: hidden;.blog3.content { padding: 30px 30px 30px 40px; background-color: #fff; margin-bottom: px; padding-bottom: 99999px; box-shadow: 5px 0 10px 5px #bbb; border-top-left-radius:4px; border-bottom-left-radius:4px; 사이드바에는다음과같이패딩을설정합니다..sidebar.span4 { padding:15px 20px; 05. 부트스트랩 3.0 으로디자인수정하기 477

52 10 blog4.php 파일수정하기 왼쪽사이드바가있는블로그페이지입니다. 이페이지는이전에코드를작성할때불필요한태그를정리했으므로간편하게수정할수있습니다..span9 선택자를.span7 선택자와.span2 선택자로분할해서사용했으나유동폭레이아웃에서는두개.span 선택자의합이.span12가돼야하므로.span7 선택자만.span10 선택자로수정합니다. 썸네일부분은다른블로그페이지와같이.span3.pull-left선택자를추가합니다. <ul> 태그의선택자는.listunstyled로수정합니다. <div class="container blog blog4"> <div class="row"> <section class="span9"> <article class="row"> <div class="span10"> <h4><strong><a href="blog-post4.php">title of the post</a></strong></h4> <a href="#" class="thumbnail span3 pull-left"> <img src=" alt=""> </a> 생략 <p><a class="btn" href="#">read more</a></p> <div class="span2 footer"> <p></p> <ul class="list-unstyled"> 생략 </ul> </article> <hr> <ul class="pagination pagination-large"> 생략 </ul> </section> html 파일에서.span7 선택자를.span10 선택자로변경했으므로, 스타일시트에서도.span7 선택자를.span10 선택자로수정합니다 장 _ 부트스트랩 3.0

53 .blog4.span9.span2.footer { float:left;.blog4.span9.span10 { float:right;.footer ul li img { width:60px; border-radius:3px; border:3px solid #ccc; margin:3px 0;.blog4 hr { margin: 20px 0; border: 0; border-top: 1px solid #ddd; border-bottom: 1px solid white; 미디어쿼리에서는다음과같이추가합니다. /* Large desktop (min-width: 1200px) {.footer ul li { text-align: (min-width: 980px) and (max-width: 1199px) {.footer ul li { text-align: right; /* Portrait tablet to landscape and desktop (min-width: 768px) and (max-width: 979px) {.blog4.span9.span2.footer { float:right; width: 100%;.blog4.span9.span10 { float:left; width: 100%; 05. 부트스트랩 3.0 으로디자인수정하기 479

54 .footer ul li { display: inline; /* Landscape phone to portrait tablet (max-width: 767px) {.blog4.thumbnail.span3 { width:100%;.footer ul li { display: inline; 11 blog5.php 파일수정하기 blog.php 파일에서 <article> 부분만전체를복사해서 blog5.php 파일의해당부분에붙여넣고 <hr> 태그를모두제거합니다. 이곳의 <article> 부분전체를복사해서 blog-pages 폴더의여러개의파일에붙여넣습니다. 스타일시트는다음과같이수정합니다. #content article { border-bottom:1px solid #ddd; padding-bottom: 20px; margin-bottom:20px; 12 blog-post.php 파일수정하기 blog-post.php 파일은긴내용이지만이전에작업한것처럼.row 선택자와.span 선택자를제거합니다. 다음코드에서빨간색부분을제거합니다. <div class="container blog blog3 blog-post"> <div class="row"> <section class="span8 content"> <article class="row"> 장 _ 부트스트랩 3.0

55 <div class="span8"> <div class="row"> <header class="span8"> <h3><strong>title of the post</strong></h3> </header> <div class="sub-title-box span8"> <p class="sub-title">by <span id="title-author">venusian</span> /<span> 2013년 4월 1일 </ span></p> <div class="btn-group post-edit"> <a class="btn btn-small" href="#"> 편집 </a> <a class="btn btn-small" href="#"> 삭제 </a> <a class="btn btn-small" href="#"> 비공개 </a> <div class="row"> <section class="span8"> 생략 </section> <div class="row"> <footer class="span8"> 생략 </footer> <hr> <ul class="media-list"><h4> 댓글 </h4> <li class="media"> 생략 </li> </ul> <hr> <form method="post" action=""> 생략 </form> <hr> <ul class="pager"> <li class="previous"> <a href="#"> 이전 </a> </li> <li class="next"> 05. 부트스트랩 3.0 으로디자인수정하기 481

56 <a href="#"> 다음 </a> </li> </ul>  </article> </section> 댓글달기부분은다음과같이수정합니다. <form method="post" action=""> <div class="comment"><h4> 댓글달기 </h4> <div class="input-group span4"> <span class="input-group-addon"> <label for="name"></label><i class="icon-user"></i> </span> <input type="text" name="name" value="" id="name" placeholder=" 이름 " class=" "> <div class="input-group span4"> <span class="input-group-addon"> <label for="homepage"></label><i class="icon-home"></i> </span> <input type="text" name="homepage" value=" id="homepage" class=" "> <p class="comment-add"> <textarea class="textarea" placeholder=" 댓글을입력하세요..." ></textarea> </p> <p class="button"> <input type="submit" value=" 댓글달기 " class="btn btn-inverse"> </p> </form> 스타일시트는이전의스타일을그대로붙여넣고다음스타일을추가합니다..blog-post.input-group { margin-bottom: 10px; 장 _ 부트스트랩 3.0

57 13 blog-post4.php 파일수정하기 다음과같이.span7 선택자를.span10 선택자로수정합니다. <ul class= media-list > 위에있던 <hr> 태그는 </footer> 아래로이동하고.span10 선택자를추가합니다. form 부분은 blog-post.php 파일에서같은부분을복사해붙여넣습니다. Footer에있는 <ul> 태그의.unstyled 선택자를.list-unstyled 선택자로수정합니다. <div class="container blog blog4 blog-post"> <div class="row"> <section class="span9"> <article class="row"> <div class="span10"> 생략 <footer class="span2 footer"> <ul class="list-unstyled"> 생략 </ul> </footer> <hr class="span10"> <div class="span10"> <ul class="media-list"><h4> 댓글 </h4> <li class="media"> 생략 </li> </ul> <hr> <form method="post" action=""> 생략 </form> <hr> <ul class="pager"> <li class="previous"> <a href="#"> 이전 </a> </li> <li class="next"> <a href="#"> 다음 </a> </li> </ul> </article> </section> 05. 부트스트랩 3.0 으로디자인수정하기 483

58 14 blog-post5.php 파일수정하기 blog-post5.php 파일의 <article> 부분을복사해서 blog-post5.php의같은부분에붙여넣고 post-pages 폴더의파일에도붙여넣습니다. 15 setup.php 파일수정하기 전문분야.span9 선택자를제거하고이부분을감싸는 <div> 태그에.span10 선택자를추가합니다. <div class="row"> <div class="span2"> <h4> 전문분야 </h4> <div class="span10"> <div class="control-group span9"> 생략  검색태그 전문분야와마찬가지방법으로.span10 선택자가있는 <div> 태그를만듭니다. <div class="row"> <div class="span2"> <h4> 검색태그 </h4> <div class="span10"> <div class="control-group span9"> 생략  장 _ 부트스트랩 3.0

59 설명.span9 선택자를.span10 선택자로수정합니다. <div class="row"> <div class="span2"> <h4> 설명 </h4> <div class="span10"> <label> 태그의.checkbox,.inline 선택자는.checkbox-inline 하나로만듭니다. <label class="checkbox-inline"> 옵션.span9 선택자를.span10 선택자로수정합니다. <div class="row"> <div class="span2"> <h4> 옵션 </h4> <div class="span10"> 저작권.span9 선택자를.span10 선택자로수정합니다. <div class="row"> <div class="span2"> <h4> 저작권 </h4> <div class="span10"> <label> 태그에있던.checkbox 선택자를제거하고 <label> 태그를감싸는 <div> 태그에.checkbox 선택자를추가합니다. <div class="checkbox"> <label> 05. 부트스트랩 3.0 으로디자인수정하기 485

60 <input type="checkbox" value=" 상업적사용을허용합니다."> 상업적사용을허용합니다. </label> <div class="checkbox"> <label> <input type="checkbox" value=" 컨텐츠변경을허용합니다."> 컨텐츠변경을허용합니다. </label> 소유권.span9 선택자를.span10 선택자로수정합니다. <div class="row"> <div class="span2"> <h4> 소유권 </h4> <div class="span10 right-margin20px"> 다음과같이.span3 선택자를추가합니다. <div id="add-owner" class="inline collapse span3"> <input type="text" name="some_name" value="" id="some_name"/> <button class="btn btn-mini btn-info"> 적용 </button> <button class="btn btn-mini"> 취소 </button> <div id="add-contributor" class="inline collapse span3"> <input type="text" name="some_name" value="" id="some_name"/> <button class="btn btn-mini btn-info"> 적용 </button> <button class="btn btn-mini"> 취소 </button> 사용한툴.span9 선택자를.span10 선택자로수정하고 class= input-xlarge span7 부분은제거합 니다. <div class="row"> <div class="span2"> 장 _ 부트스트랩 3.0

61 <h4> 사용한툴 </h4> <div class="span10"> <div class="control-group"> <div class="controls"> <p class="help-block"> 더많은노출을위해포트폴리오정보를더입력해주세요 ( 옵션 )</p> <label class="control-label" for="input01"> 소프트웨어 </label> <div class="controls"> <input type="text" placeholder=" 예 : 포토샵, 오토캐드 " class="input-xlarge span7"> 스타일시트는이전의스타일을그대로적용합니다. 16 product.php 파일수정하기 상품페이지는복잡하므로분리해서설명하겠습니다. 상품이미지와옵션이있는부분에서 <article> 태그바로아래의.span8 선택자가있는 <div> 태그를제거하고닫는태그도제거합니다. 그외아래코드에서빨간색부분을제거합니다. <section> 태그안의 span3 선택자는.span5 선택자로,.span5 선택자는.span7 선택자로수정합니다. footer의.span8 선택자는.span12 선택자로수정합니다. <div class="container blog blog3 product"> <div class="row"> <section class="span8 content"> <article class="row"> <div class="span8"> <div class="row"> <header class="span8"> <h4><strong>title of the post</strong></h4> </header> <div class="row"> <section class="span8"> <div class="row"> <div class="span3"> <div class="span5"> 생략 <div class="span5"> <div class="span7"> 생략 05. 부트스트랩 3.0 으로디자인수정하기 487

62 </section> <div class="row"> <footer class="span8"> 생략 </footer> </article> <div class="span12"> 상품옵션영역의.unstyled 선택자는.list-unstyled 선택자로수정합니다. <ul class="list-unstyled"> 라디오버튼에서.radio 선택자를제거한다음 <div> 태그로감싸고.radio 선택자를추가합 니다. <div class="radio"> <label> <input type="radio" value="s" name="group" checked="checked"> S </label> 수량입력박스는.span2 선택자로수정합니다. <input type="number" max="5" placeholder=" 수량 " class="span2"> 지금까지작업한상태에서화면에서확인하면레이블이인라인형태로나타납니다. 이를수 정하려면우선이전의스타일시트를모두복사해서붙여넣고다음스타일시트를추가합니 다. 또한, 버튼의상하간격을유지하기위해.review 선택자에위쪽마진을설정합니다..product.span7 label { display: block;.review { margin-top:20px; 장 _ 부트스트랩 3.0

63 그림 4-45 상품옵션영역 하단의탭영역은리뷰탭과관련상품탭부분만수정하면됩니다. 리뷰아이디입력박스의 폭을줄이기위해.span3 선택자로수정합니다. <input type="text" placeholder=" 아이디 " class="span3"> 평가라디오버튼의레이블태그선택자를.radio-inline 선택자로수정합니다. <label class="radio-inline"> <input type="radio" value="5" name="group" checked="checked"> 5 </label> 리캡차의입력박스와버튼을감싸는 <div> 태그의선택자는.input-group.span5 선택자 로수정합니다. 버튼 3 개를감싸는 <div> 태그를만들고.input-group-btn 선택자를추가 합니다. <div class="controls"> <div class="input-group span5"> <input type="text" id="recaptcha_response_field" name="recaptcha_response_field" class="input-recaptcha" /> <div class="input-group-btn"> <a class="btn" href="javascript:recaptcha.reload()"><i class="icon-refresh"></ i></a> <a class="btn recaptcha_only_if_image" href="javascript:recaptcha.switch_ type('audio')"><i title="get an audio CAPTCHA" class="icon-headphones"></i></a> <a class="btn recaptcha_only_if_audio" href="javascript:recaptcha.switch_ type('image')"><i title="get an image CAPTCHA" class="icon-picture"></i></a> <a class="btn" href="javascript:recaptcha.showhelp()"><i class="icon-questionsign"></i></a> 05. 부트스트랩 3.0 으로디자인수정하기 489

64 입력박스의왼쪽모서리에둥근모서리를적용합니다. 저장버튼은왼쪽, 오른쪽마진을 0 으 로설정합니다..input-group.span5 input { border-top-left-radius:4px; border-bottom-left-radius:4px;.save { margin:15px 0; 웹킷엔진을사용하는웹브라우저의아래쪽마진설정을 -15 픽셀로수정합니다. 탭과탭콘 텐츠의간격을유지하기위해 #mytab screen and (-webkit-min-device-pixel-ratio:0) { /* CSS Statements that only apply on webkit-based browsers (Chrome, Safari, etc.) */.product { margin-bottom: -15px; #mytab { margin-bottom:15px; 관련상품탭영역은 <ul> 태그과 <li> 태그를 <div> 태그로수정하고.thumbnails 선택자를.row 선택자로수정합니다..span2 선택자는.span3 선택자로수정합니다. <div class="row"> <div class="span3"> <div class="thumbnail"> <a href="product.php"> <img src="img/apple-iphone-5.jpg" alt="" /> </a> <div class="caption"> <h4> 아이폰 </h4> 장 _ 부트스트랩 3.0

65 <p> 가격 :100원 </p> <a href="#" class="btn btn-primary btn-mini"> <i class="icon-shopping-cart"></i> 장바구니담기 </a> <a href="#" class="btn btn-success btn-mini"> <i class="icon-eye-open"></i> 상세보기 </a> 스타일시트는다음과같이수정합니다. #related.span3 { width:33.33%; padding-right: 5px; padding-left: 5px; 767px 이하의미디어쿼리에서폭을 100% 로설정합니다. /* Landscape phone to portrait tablet (max-width: 767px) { #related.span3 { width:100%!important; padding-right: 5px; padding-left: 5px; 17 인터넷익스플로러 8 에서수정하기 3장에서 IE를위한디자인수정에서 IE8 버전에서만나타나는증상을해결하기위해다음과같은스타일시트를추가했습니다..navbar-inverse를제거하고추가합니다. #ie8 header.navbar-inverse.navbar-inner { filter: progid:dximagetransform.microsoft.gradient(enabled = false); background: #44494E; 05. 부트스트랩 3.0 으로디자인수정하기 491

이런증상이부 트스트랩의문제인지 respond.js 플러그인의문제인지는부트스트랩 3.

66 가장문제가되는부분은푸터부분인데아래처럼푸터가전체폭의배경이나타나지않습 니다. 그림 4-46 IE8 에서푸터 IE10 버전에서 IE8 모드로점검해보니 footer 가 header 에포함돼있습니다. 이런증상이부 트스트랩의문제인지 respond.js 플러그인의문제인지는부트스트랩 3.0 정식버전이출시 돼봐야확인할수있을것같습니다. 그림 4-47 IE8 파일구조의오류 이상으로부트스트랩 3.0 버전에대해알아봤습니다. 정식버전이나오고기능의변경이있 으면제블로그에서추가로다루겠습니다 장 _ 부트스트랩 3.0

쉽게 풀어쓴 C 프로그래밍

쉽게 풀어쓴 C 프로그래밍 CHAPTER 7. HTML 와 CSS 로웹사이트만들 기 웹사이트작성 웹사이트구축과정 내비게이션구조도 홈페이지레이아웃 헤더 web Shop 내비게이션메뉴