Hanbit ebook Realtime 31 크로스브라우징과반응형웹을위한어비의노하우 HTML5 보일러플레이트 송태민지음
크로스브라우징과반응형웹을위한어비의노하우 HTML5 보일러플레이트
크로스브라우징과반응형웹을위한어비의노하우 HTML5 보일러플레이트 초판발행 2013 년 6 월 30 일 지은이송태민 / 펴낸이김태헌펴낸곳한빛미디어 ( 주 ) / 주소서울시마포구양화로 7길 83 한빛미디어 ( 주 ) IT출판부전화 02-325-5544 / 팩스 02-336-7124 등록 1999년 6월 24일제10-1779호 ISBN 978-89-6848-639-5 15000 / 정가 9,900원 책임편집배용석 / 기획이중민 / 편집김연숙디자인표지여동일, 내지스튜디오 [ 밈 ], 조판박진희마케팅박상용, 박주훈, 정민하 이책에대한의견이나오탈자및잘못된내용에대한수정정보는한빛미디어 ( 주 ) 의홈페이지나아래이메일로알려주십시오. 한빛미디어홈페이지 www.hanb.co.kr / 이메일 ask@hanb.co.kr Published by HANBIT Media, Inc. Printed in Korea Copyright c 2013 HANBIT Media, Inc. 이책의저작권은송태민과한빛미디어 ( 주 ) 에있습니다. 저작권법에의해보호를받는저작물이므로무단복제및무단전재를금합니다. 저작권법에의해보호를받는저작물이므로무단복제및무단전재를금합니다. 지금하지않으면할수없는일이있습니다. 책으로펴내고싶은아이디어나원고를메일 (ebookwriter@hanb.co.kr) 로보내주세요. 한빛미디어 ( 주 ) 는여러분의소중한경험과지식을기다리고있습니다.
지은이 _ 송태민 ( 어비, UhBee) 언제나새로운주제를빠르게탐구한후자신의지식을다른사람들과어떻게나누는것이좋을지에대해서고민하고책을쓰는소신있는웹퍼블리셔이자현업 UI/ UX 디자이너입니다. 또한한달에한곡이상은꼭작사 / 작곡해서발표한다는신념아래자신을채찍질하는왑듀오의리더이자래퍼이기도합니다. 현재 SK플래닛에서 UI/UX 디자이너로다양한서비스를개발하고있으며, UX/UI를연구하는어비팩토리공장장이자 KAC한국예술원멀티미디어디자인과외래교수로활동중입니다. 또한디자인정글, 디노마드등에서강의를진행하며, 웹개발트렌드와관련한각종세미나에서자주볼수있는스피커이기도합니다. 저서로 크리에이티브디자이너를위한웹표준 ( 제우미디어, 2009), 어비의모바일 HTML ( 에세이, 2011), 어비의모바일웹 ( 길벗, 2012), 반응형웹디자인 ( 위키북스, 2013) 등이있습니다. 주요경력現 SK플래닛 UX 디자이너現 KAC한국예술원멀티미디어디자인과교수現어비팩토리대표前 SK커뮤니케이션즈 UX/UI/GUI 前이베이코리아 UX 디자이너前현대엠엔소프트 TDX 디자이너前그래택 - 곰플레이어디자이너
저자서문 HTML5라는기술이있더라도각나라의웹환경에맞춘표준문안은조금씩다른법입니다. 왜냐하면관련기술의선호도와인프라가다를수있기때문입니다. 즉, 국내에서는국내실정에맞는 HTML5 표준문안이필요하다는뜻입니다. 필자는 14년이넘도록웹퍼블리셔로일해온경험을바탕으로국내환경에맞는 HTML5 보일러플레이트템플릿을제작하여더나은 HTML5 웹제작환경을구축하는데이바지할수있도록노력하고싶습니다. 사실이책을쓰게된계기는 HTML5에기반을둔웹페이지를누구나쉽게제작할수있도록하기위해템플릿을공유하는외국의모임을접하면서입니다. 이러한템플릿을국내실정에맞게변형하여공유해서사용할수있다면어떨까하는생각이발전한것이죠. 항상웹페이지를만들때마다기존에사용하던코드를찾아복사하거나붙여넣는작업이지루하고복잡했다면이제부터는이책에서소개하는 HTML5 보일러플레이트를이용해손쉽게마크업할수있기를바랍니다. 이책이나오기까지물심양면으로도움을준한빛미디어스마트미디어팀여러분감사합니다. 특히기획단계에서부터아이디어도함께고민하고, 집필하는동안옆에서열심히응원해준이중민대리님께감사드립니다 ( 앞으로도계속함께할수있는최고의파트너가되기를 ). 때로는밤새우면서한권한권씩집필할때마다묵묵히옆에서가정을챙겨준아내김재연, 아빠와함께놀고싶은마음이가득함에도기특하게도잘참아준두딸채빈이와나윤이에게도항상감사하고사랑한다는말과함께더욱열심히하는남편, 아빠가되고싶다는말을전하고싶습니다. 그리고번역하면서같은느낌을공유하고조언을아끼지않은동생지연이, 필자가 더잘되도록항상응원해주는 KAC 한국예술원정택민팀장님과 KAC 한국예술원
임직원여러분, 앞으로저자로사는삶도성실하기를바라며많은응원을해주신 SK플래닛황실근팀장님, 최근호부장님, 강진호부장님, 이재성매니저님, 서광민매니저님, 앞으로항상재미있고열정적으로함께일할수있기를바랍니다. 페이스북을통해응원해준이동윤, 박근용, 윤우건등많은분과디노마드, 웹스미디어에감사의말을전합니다. 마지막으로저의영원한스승 김세원 형님사랑합니다. 집필을마치며송태민
추천사 김세원 _ 세종씨앤피모바일사업부 / 차장 HTML5 보일러플레이트의진정한가이드북 이책은 HTML5라는거대한세계를폭넓게, 그리고가능한한깊이있게여러분에게전달하는표준매뉴얼의하나라고생각합니다. 일반적으로 HTML5라불리는것은여러가지요소의집합체인만큼전체내용은엄청나게방대합니다. 웹에서도정보가여러곳에흩어져있어전체모습을파악하는것만도꽤고생스러운일일정도입니다. 최근각웹브라우저의업그레이드가매우빠른속도로진행되므로가까운시일안에많은문제가해결될것으로예상합니다만그전까지는 W3C의 HTML5 기술문서등을참고하면서공부하는것이더정확합니다. 그러려면 HTML5를쉽고빠르게습득할수있는레이아웃인템플릿을분석하면서공부하는것이지름길일것입니다. 이책은웹디자이너와웹퍼블리셔그리고개발자, 기획자에게 HTML5 보일러플 레이트라는템플릿형태의마크업을제시하는가이드로손색없는책입니다.
베타리더 서광민 _ SK planet / 매니저 어느분야든변화의시점에서는다양한서비스가탄생할기회가생기기마련입니다. 그리고좋은아이디어를가진분이라면이런상황을적극활용하여다양한실험을해보고싶은욕망도생길것입니다. 이때중요한점은바로 속도 입니다. 서비스디자인이나개발속도에서많은시간을허비하게되면결국서비스가성공할시기를놓칩니다. 또한다양한서비스를짧은시간안에디자인하고테스트해보는것도따지고보면시간과의싸움입니다. 그런면에서 HTML5 보일러플레이트 는웹서비스에요구하는시간과의싸움에서유리한고지를차지할수있도록상당한도움을줍니다. 왜냐하면반복작업을미리설정하거나개개인의작업방식에맞춘사용자화설정까지할수있어같은작업을반복진행할때빠른처리가가능하며효율적으로시간을활용할수있기때문입니다. 물론이책은 HTML5를처음부터차근차근설명하는책은아닙니다. 하지만웹페이지제작의기초지식이있다면국내실정에맞는 HTML5 보일러플레이트를통해 HTML5를빠르게살펴볼수있습니다. 국내웹서비스에종사하고있는많은분께실질적인도움이될수있을것으로확신합니다.
조성민 _ 현대오토에버 / 대리 모바일아키텍트라는업무의특성상 HTML5를대할때는웹표준준수, 다양한웹엔진을기반으로하는크로스브라우징지원, 여러가지디바이스를지원하는반응형스크립트작성기법에대해늘고민하게됩니다. 정답이존재하지않는문제라최대한효율적이며합리적인사고를해야하며이때가장도움이되는것은실무에서쌓은다양하고깊은경험입니다. 이러한고민을하는한사람으로서먼저필자의노력에박수를보내고싶습니다. 한두사람이만든예제로책이구성되면필자가자주사용하는디자인패턴이나기능위주로흐를염려가있습니다. 그런면에서이책은수많은외국의웹디자이너가오픈소스프로젝트형태로만든템플릿에기반을두어최대한객관적인시각을유지하면서도다양한고급예제를제공하려는필자의의지가돋보입니다. 특히최근이슈가되고있는반응형웹디자인요소관련스크립트샘플코드를다수제공함으로써실무에서바로사용할수있다는것은다른책과구별되는이책의장점이라고할수있을것입니다. 실무에서 6개월이상근무한경력이있는웹퍼블리셔, 스크립터라면매우적절한활용서가될것으로생각합니다.
이동윤 ( 윤들쥔장 ) _ ( 주 ) 넥스트이지 / SI 전략사업부기획팀장 1996년부터웹디자인을시작하여벤처회사를거쳐, 웹디자인교육, 디자인자격증관련서적집필, IT업체의기획자로서지금까지웹업계에종사하면서새로운기술이나외국트렌드를국내에소개하고전파하기란쉬운일이아니다는것을깨닫곤합니다. 특히지금처럼웹생태계가혼란을겪는시기에는아무리좋은기술이있어도대중화가되지못한다면묻혀버리기십상이죠. 특히세미나와같이지나가버리는형식이아닌책으로소개된다는것은대단한노력이필요한일입니다. 베타리딩을하면서특히나놀랐던점은바로 HTML5 보일러플레이트의소개와분석에만그치지않고, 필자가국내환경에맞는 HTML5 보일러플레이트템플릿을만들어전파하고, 또실무에적용하여사용할수있도록예제를통해자세하고도친절하게안내를해주고있다는것입니다. 아마오랜기간웹업계에종사한경력자든, 급하게실무프로젝트를진행해야하는초보웹퍼블리셔든이책은언제든지찾아볼수있는아주유용한지침서가될것으로기대합니다.
예제파일 예제파일 : http://www.hanb.co.kr/exam/2639 예제웹페이지 : http://uhb.kr/book/hanb/hbp 질문 / 답변커뮤니티 - 어비의웹표준커뮤니티 http://www.standrad.pe.kr
한빛 ebook 리얼타임 한빛 ebook 리얼타임은 IT 개발자를위한 ebook 입니다. 요즘 IT 업계에는하루가멀다하고수많은기술이나타나고사라져갑니다. 인터넷을아무리뒤져도조금이나마정리된정보를찾는것도쉽지않습니다. 또한잘정리되어책으로나오기까지는오랜시간이걸립니다. 어떻게하면조금이라도더유용한정보를빠르게얻을수있을까요? 어떻게하면남보다조금더빨리경험하고습득한지식을공유하고발전시켜나갈수있을까요? 세상에는수많은종이책이있습니다. 그리고그종이책을그대로옮긴전자책도많습니다. 전자책에는전자책에적합한콘텐츠와전자책의특성을살린형식이있다고생각합니다. 한빛이지금생각하고추구하는, 개발자를위한리얼타임전자책은이렇습니다. 1. ebook Only - 빠르게변화하는 IT 기술에대해핵심적인정보를신속하게제공합니다. 500페이지가까운분량의잘정리된도서 ( 종이책 ) 가아니라, 핵심적인내용을빠르게전달하기위해조금은거칠지만 100페이지내외의전자책전용으로개발한서비스입니다. 독자에게는새로운정보를빨리얻을수있는기회가되고, 자신이먼저경험한지식과정보를책으로펴내고싶지만너무바빠서엄두를못내시는선배, 전문가, 고수분에게는보다쉽게집필하실기회가되리라생각합니다. 또한새로운정보와지식을빠르게전달하기위해 O'Reilly의전자책번역서비스도하고있습니다. 2. 무료로업데이트되는, 전자책전용서비스입니다. 종이책으로는기술의변화속도를따라잡기가쉽지않습니다. 책이일정한분량이상으로집필되고정리되어나오는동안기술은이미변해있습니다. 전자책으로출간된이후에도버전업을통해중요한기술적변화가있거나, 저자 ( 역자 ) 와독자가소통하면서보완되고발전된노하우가정리되면구매하신분께무료로업데이트해드립니다.
3. 독자의편의를위하여, DRM-Free로제공합니다. 구매한전자책을다양한 IT기기에서자유롭게활용하실수있도록 DRM-Free PDF 포맷으로제공합니다. 이는독자여러분과한빛이생각하고추구하는전자책을만들어나가기위해, 독자여러분이언제어디서어떤기기를사용하시더라도편리하게전자책을보실수있도록하기위함입니다. 4. 전자책환경을고려한최적의형태와디자인에담고자노력했습니다. 종이책을그대로옮겨놓아가독성이떨어지고읽기힘든전자책이아니라, 전자책의환경에가능한최적화하여쾌적한경험을드리고자합니다. 링크등의기능을적극적으로이용할수있음은물론이고글자크기나행간, 여백등을전자책에가장최적화된형태로새롭게디자인하였습니다. 앞으로도독자여러분의충고에귀기울이며지속해서발전시켜나가도록하겠습니다. 지금보시는전자책에소유권한을표시한문구가없거나타인의소유권한을표시한 문구가있다면위법하게사용하고계실가능성이높습니다. 이경우저작권법에의해 불이익을받으실수있습니다. 다양한기기에사용할수있습니다. 또한한빛미디어사이트에서구입하신후에는횟수에 관계없이다운받으실수있습니다. 한빛미디어전자책은인쇄, 검색, 복사하여붙이기가가능합니다. 전자책은오탈자교정이나내용의수정보완이이뤄지면업데이트관련공지를이메일로 알려드리며, 구매하신전자책의수정본은무료로내려받으실수있습니다. 이런특별한권한은한빛미디어사이트에서구입하신독자에게만제공되며, 다른 사람에게양도나이전되지않습니다.
차례 01 HTML5 보일러플레이트소개 1 1.1 HTML5 보일러플레이트란? 1 1.2 HTML5 보일러플레이트의주요특징 4 1.2.1 jquery 라이브러리 5 1.2.2 Modernizr 라이브러리 7 1.3 HTML5 보일러플레이트다운로드 9 1.3.1 Github 9 1.3.2 Initializr 10 1.4 HTML5 보일러플레이트의버전별변화 14 1.5 HTML5 보일러플레이트의장단점 17 02 HTML5 보일러플레이트분석 18 2.1 HTML5 보일러플레이트구조 18 2.1.1 루트디렉터리구조 19 2.1.2 추가디렉터리구조 20 2.2 index.html 분석 23 2.3 normalize.css 분석 30 2.3.1 HTML5 요소관련설정 32 2.3.2 기본요소관련설정 34 2.3.3 하이퍼링크요소관련설정 36 2.3.4 텍스트요소관련설정 36 2.3.5 목록요소관련설정 42 2.3.6 내장콘텐츠요소관련설정 44
2.3.7 <figure> 요소관련설정 45 2.3.8 <form> 및하위요소관련설정 45 2.3.9 <table> 요소관련설정 51 2.4 main.css 분석 51 2.4.1 HTML5 보일러플레이트고유설정 52 2.4.2 Chrome 프레임관련설정 53 2.4.3 도움을주는 class 속성설정 54 2.4.4 미디어쿼리관련설정 57 2.5 plugins.js 분석 58 03 국내환경에맞게수정한 HTML5 보일러플레이트템플릿 61 3.1 수정한 HTML5 보일러플레이트구조 61 3.2 index.html의변경점 62 3.3 normalize.css의변경점 64 3.3.1 국내에서사용하지않는 normalize.css 코드예 65 3.3.2 새롭게추가하거나수정한부분 66 3.4 main.css의변경점 67 04 예제웹페이지만들기 72 4.1 웹페이지구성노하우 72 4.2 반응형웹구성미리보기 75 4.2.1 레이아웃구조살펴보기 77 4.3 레이아웃구조만들기 78
4.3.1 HTML 마크업 79 4.3.2 CSS 코딩 80 4.4 반응형웹만들기 81 4.4.1 레이아웃 CSS 반응형 81 4.5 header 영역만들기 82 4.5.1 HTML 마크업 83 4.5.2 CSS 코딩 84 4.6 article 영역만들기 85 4.6.1 HTML 마크업 86 4.6.2 이미지플리킹효과 89 4.6.3 CSS 코딩 93 4.7 aside 영역만들기 95 4.7.1 HTML 마크업 96 4.7.2 CSS 코딩 99 4.8 footer 영역만들기 101 4.8.1 HTML 마크업 101 4.8.2 CSS 코딩 102 4.8.3 placeholder 속성변경하기 103 4.9 반응형웹 : 태블릿 PC 버전완성하기 105 4.9.1 header 영역 106 4.9.2 article 영역 106 4.9.3 aside 영역 107 4.9.4 footer 영역 109 4.10 크로스브라우징확인 109
부록예제웹페이지소스코드 114 index.html 114 normalize.css 119 main.css 120 index.css 121
1 HTML5 보일러플레이트소개 1990년웹의창시자로불리는팀버너스리가처음 HTML과웹브라우저, 서버소프트웨어를공개한후약 20년의세월이흘렀습니다. 그사이에웹은팀버너스리가생각했던것이상으로놀라운발전속도를보였다고생각합니다. 그리고웹개발을위한많은직군이생겨났습니다. 이책에서는많은직군중웹퍼블리셔를대상으로설명을이어갈것이며 1 장에서 는지금부터소개하려는 HTML5 보일러플레이트가무엇인지와 HTML5 보일러플 레이트의특징과장단점을설명합니다. 1.1 HTML5 보일러플레이트란? 최근웹사이트를만드는사람의주요관심사라면누가뭐라고해도 HTML5, CSS3, 자바스크립트에기반을둔라이브러리입니다. 왜냐하면기존의정적인웹을동적으로바꾸는데적극힘을쏟기때문입니다. 덕분에웹사이트제작환경에도많은변화가생겼습니다. 웹브라우저의성능이향상되었을뿐만아니라스마트폰으로부터시작된모바일웹에적응할힘이생겼고, 훨씬적은코딩으로도많은것을구현할수있게되었습니다. 이것이 2000년대후반에있었던일입니다. 그런데 2010 년이지나면서변화가생겼습니다. 새롭게등장하는신기술에관심을 두는것은전과같지만등장한기술들을재정리혹은재조합하는일에도많은관심 을두고있습니다. 이유는다음과같습니다. 기존웹퍼블리셔의 HTML5 적응문제 수많은자바스크립트기반라이브러리적응문제 HTML5 기반의웹브라우저와구형웹브라우저의호환성문제 1 장 HTML5 보일러플레이트소개 1
이러한문제를해결하려고등장한것이바로 UI 프레임워크와웹템플릿입니다. 현재국내에서많은관심을두고있는 UI 프레임워크로는트위터에근무하는엔지니어인마크오토 Mark Otto 와제이콥토른 Jacob Thornton 이개발한오픈소스기반 01 의부트스트랩 Bootstrap 이유명합니다 ( 트위터웹사이트의 UI 프레임워크로도사용합니다 ). 반응형웹페이지를제작하는데최적화되어있으며, CSS에대한깊은지식이없어도 <div> 요소의 class 속성을조절하면원하는의도대로웹페이지의디자인을조절할수도있습니다. 그림 1-1 부트스트랩 또한 HTML5라는이슈와함께주목받는부분이바로웹브라우저입니다. 웹이발전하면서각각의웹브라우저마다업그레이드가잦아졌으며, 지원하는 HTML의버전도다릅니다. 그런데여전히많은사람은자기취향대로웹브라우저를선택해서사용하며, 심지어는오래된버전의웹브라우저를사용하는사람도있습니다. 01 아파치 2.0 라이선스 1 장 HTML5 보일러플레이트소개 2
물론앞으로이런상황은점차 HTML5 를지원하는웹브라우저를사용하는방향 으로바뀌겠지만현재시점에서는다양한종류의웹브라우저에서웹사이트가무 리없이동작하는 크로스브라우징 이필요합니다. 이러한요구에부응하기위해서등장한것이바로 HTML5 보일러플레이트입니다. 니콜라스갤러거 Nicolas Gallagher, 폴아이리시 Paul Irish, 마티아스바이넨스 Mathias Bynens, 디비어매니언 Divya Manian, 한스크리스티안라이널 Hans Christian Reinl 등외국의웹퍼블리셔와디자이너들이조금씩의견을반영하면서점점완성된방향으로만들어가는, 다시말해 크로스브라우징 을지원하는웹사이트를쉽게만들도록도와주는템플릿입니다. 즉, HTML5 기반으로제작해야하는웹사이트에서크로스브라우징에필요한기준마크업, CSS, 자바스크립트등을배포하는것입니다. 그림 1-2 HTML5 보일러플레이트 1 장 HTML5 보일러플레이트소개 3
1.2 HTML5 보일러플레이트의주요특징 앞서 HTML5 보일러플레이트는크로스브라우징을지원한다고설명했습니다. 그럼구체적으로어떤특징이있어서크로스브라우징을지원한다고말하는것일까요? 여기서는주요특징을설명하겠습니다. 인터넷익스플로러 6을포함한크로스브라우징호환성지원인터넷익스플로러 6~8은 HTML5를지원하지않는웹브라우저입니다. 이러한웹브라우저에서도웹사이트의디자인이정상적으로구현될수있도록두가지를포함시켰습니다. 하나는 CSS의모음인 normalize.css며, 하나는자바스크립트라이브러리인 Modernizr입니다. 이를이용하면 HTML5의마크업요소대신기존 HTML/XHTML 코드를선택하고대체해서사용할수있도록도와줍니다. 모바일웹브라우저최적화 CSS3의미디어쿼리 (@media) 를이용해서모바일웹브라우저의해상도에맞춰웹사이트가표시되도록지원하도록도와줍니다. main.css에최적화를위한코드가포함되어있습니다. 크로스브라우징유닛테스트지원앞서소개한 Modernizr 라이브러리를간단하게설명하면 HTML5가웹브라우저에서정상적으로동작하는지를테스트하는자바스크립트기반의라이브러리입니다. 이라이브러리에서제공하는객체를이용한자바스크립트코드를만들어 HTML5가정상적으로동작하는지확인할수있습니다. 1.2.2 Modernizr 라이브러리 에서사용방법을확인할수있습니다. 1 장 HTML5 보일러플레이트소개 4
자바스크립트프로파일링웹브라우저의로딩속도를제어하는자바스크립트요소들을모아서로딩속도를확인한후결과를콘솔에출력하는 plugins.js를제공합니다. jquery 혹은 helper.js를함께이용하면측정결과를수집할수도있습니다. ios와안드로이드모바일웹브라우저를위한 CSS 코드제공 ios 5 이상버전의 Safari 웹브라우저에서 <audio> 요소를사용할때세로폭을조정한다든가, 사용자가임의로웹페이지를확대하는것을막는다든가, 안드로이드 4.0 이상의웹킷브라우저에서발생하는 <audio> 및 <video> 요소의버그를피하는등의 CSS 코드를제공합니다. normalize.css에서제공하는기능입니다. 그외 HTML5 보일러플레이트가가진주요특징은 https://github.com/h5bp/ html5-boilerplate/blob/v4.2.0/doc/toc.md 혹은템플릿소스파일의 doc 디렉터리안에있는 TOC.md 를열어서확인할수있습니다. 1.2.1 jquery 라이브러리 jquery 라이브러리는이제는웹사이트제작에서없어서는안될필수요소로자리잡은자바스크립트기반의라이브러리며, 이책을읽는독자라면아마굉장히많이들어본용어가아닐까생각합니다. jquery 라이브러리는웹브라우저호환성을고려해서자바스크립트코드작성을단순화할수있도록설계되었으며, 존레식 John Resig 이 2006년뉴욕시바캠프 Barcamp NYC 에서공식적으로소개했습니다. 조금구체적으로설명하자면코드보기, 문서객체모델찾기, 애니메이션만들기, 이벤트제어, Ajax 개발을쉽게할수있습니다. 또한개발자가플러그인을개발할수있는기능도있기때문에수많은자바스크립트기반의라이브러리가만들어질수있는환경을제공합니다. 1 장 HTML5 보일러플레이트소개 5
그림 1-3 jquery 공식웹사이트 주요특징 02 은다음과같습니다. DOM 요소선택 DOM 트래버설및수정 (CSS 1~3 지원. 기본 XPath를플러그인으로지원 ) 이벤트지원 CSS 조작가능 특수효과및애니메이션지원 Ajax 함수포함 유틸리티 - 웹브라우저버전, "each" 함수지원 자바스크립트플러그인지원 02 출처 : http://ko.wikipedia.org/wiki/jquery 1 장 HTML5 보일러플레이트소개 6
HTML5 보일러플레이트에서사용하는 jquery 버전은 1.9.1입니다. 1.9.1 버전은기존인터넷익스플로러 6~8을모두지원하는마지막 jquery 버전이며 jquery 1.8.X 이하의버전을기반으로작성한코드와호환되지않는다는점에주의해야합니다. 주요특징은다음과같습니다. 삭제된기능.toggle(function, function,... ) jquery.browser( ) (Modernizr.js에서해당기능을지원 ).live( ).die( ) jquery.sub( ) (jquery Migrate Plugin을통해사용가능 ) 추가 / 변경 / 대체된기능.add().addBack(selector) 를.addSelf() 로대체.before()/.after() 를사용하면대상요소에는추가된요소를포함하지않게됨 ajaxstrt, ajaxstop, ajaxsend, ajaxcomplete, ajaxerror, ajaxsuccess 이벤트는실제웹페이지파일에작성하도록변경 jquery.ajax가빈문자열이담긴 JSON 결과를반환 인터넷익스플로러 6~8에서 $("input").attr("type", newvalue) 선언가능.selector 비추천 1.2.2 Modernizr 라이브러리 Modernizr 는새롭게추가된 HTML5 요소나 CSS3 속성을웹브라우저가지원하 는지검사하는오픈소스프로젝트기반의자바스크립트라이브러리입니다. 또한 1 장 HTML5 보일러플레이트소개 7
CSS3나새로운웹기술이등장할때마다버전을업그레이드하면서웹브라우저가해당기술을지원하는지를검사할수있도록발전하고있습니다. HTML5 보일러플레이트는크로스브라우징지원을표방하는만큼, 이 Modernizr 라이브러리는반드시필요합니다. 그림 1-4 Modernizr 공식웹사이트 기본적인코드작성법은다음과같습니다. if (Modernizr.html5/CSS3 요소. 속성 == true/false) { // 조건에따라원하는자바스크립트처리코드작성 } 이를통해서웹브라우저에따라필요한코드를선택할수있어크로스브라우징을 지원하게합니다. 1 장 HTML5 보일러플레이트소개 8
1.3 HTML5 보일러플레이트다운로드 HTML5 보일러플레이트는앞서그림 1-2에서소개한 http://html5boilerplate. com의 <Download v.4.2.0> 를눌러다운로드할수있습니다. 그런데해당링크이외에도사용자가원하는콘셉트에맞춰 HTML5 보일러플레이트템플릿을다운로드할수있는방법이있습니다. 1.3.1 Github 최근에는웹퍼블리셔에게도 Git과 Github라는용어가익숙할것으로생각합니다. 최신버전을다운로드하려면 Github를추천합니다. Github(https://github. com/h5bp/html5-boilerplate) 에서 HTML5 보일러플레이트의최신템플릿을다운로드할수있습니다. 그림 1-5 Github 의 HTML5 보일러플레이트 1 장 HTML5 보일러플레이트소개 9
1.3.2 Initializr HTML5 보일러플레이트웹사이트의 <Get a custom Build> 를누르면 Initializr (http://www.initializr.com) 라는사이트를만날수있습니다. Initializr의콘셉트는 HTML5 보일러플레이트기반의프로젝트를시작할수있는템플릿파일의구성을사용자가직접선택해다운로드하는서비스라는점입니다. 크게 <Classic H5BP>, <Responsive>( 반응형웹 ), <Bootstrap> 의세가지항목 으로나누어필요한구성을선택할수있으며각항목아래에있는 <Dosc Demo> 를누르면해당템플릿의데모페이지도확인할수있습니다. 그림 1-6 Initializr 메인페이지 1 장 HTML5 보일러플레이트소개 10
Classic H5BP HTML5 보일러플레이트의기본템플릿입니다. 선택사항은다음과같습니다. No template Minified Modernizr IE Classes Chrome Frame Google Analytics.htaccess Favicon Apple Touch Icons plugins.js Robots.txt Humans.txt 404 Page Adobe Cross Domainm 그림 1-7 Classic H5BP 선택화면 1 장 HTML5 보일러플레이트소개 11
Responsive 반응형웹제작에최적화된템플릿소스코드구조를선택해서다운로드할수있습 니다. 선택사항은다음과같습니다. Mobile-first Responsive Modernizr Respond - Alternatives Google Analytics Minified IE Classes Chrome Frame Apple Touch Icons Favicon 그림 1-8 Responsive 선택화면 1 장 HTML5 보일러플레이트소개 12
Bootstrap HTML5 보일러플레이트에앞서소개한부트스트랩프레임워크를결합하여만든템플릿입니다. plusins.js를제외한 HTML5 보일러플레이트와부트스트랩의모든기능을사용할수있다는장점이있으며, 선택사항은다음과같습니다. Responsive Bootstrap 2.3.0 Modernizr Respond - Alternatives Minified Development IE Classes Chrome Frame Google Analytics Favicon Apple Touch Icons 그림 1-9 Bootstrap 선택화면 1 장 HTML5 보일러플레이트소개 13
1.4 HTML5 보일러플레이트의버전별변화 HTML5 보일러플레이트가처음공개된것은 2011년 3월 21이며, 이후세번의업그레이드와일곱번의업데이트가이루어졌습니다. 간략한내용을소개하면다음과같습니다. 1.0.0 (2011. 3. 21) jquery 이용시혼란을방지하기위해상대 URL 사용 구글웹로그분석코드최적화 에릭마이어의 Reset CSS 업데이트와 HTML5 Doctor 재설정 HTML 요소에 IE9 특정조건클래스를제거 YUI 프로파일링제거 2.0.0 (2011. 8. 10) reset.css 기반에서 normalize.css 기반으로교체 (#500) Respond.js에미디어쿼리 polyfill을추가 인터넷익스플로러 6 사용자를위한구글 Chrome 프레임스크립트프롬프트추가 모던브라우저에대한 HTML 조건부주석의단순화와 oldie 클래스추가 구글웹로그분석에웹사이트속도를추적하는기능을추가 jquery 1.6.2로업데이트 ( 축소버전을기본으로이용 ) Modernizr 2.0 축소버전으로업데이트 (yepnope, html5shiv, Respond.js 포함 ) 구글웹로그분석스크립트로딩에 Modernizr.load( ) 이용 1 장 HTML5 보일러플레이트소개 14
3.0.0 (2012. 2. 6) 404.html의디자인개선 최신 normalize.css 변경점과더나은타이포그래피기본값을포함하는 main.css로업데이트 (#825) Modernizr 2.5로업데이트 (yepnope 1.5 및 html5shiv 3.2 포함 ) jquery 1.7.1로업데이트 Google 웹로그분석스크립트를비동기코드로되돌림 Respond.js 제거 (#816) 인터넷익스플로러 6 사용자를위해 Google Chrome 프레임스크립트를 Chrome 프레임및다른웹브라우저의옵션링크로교체 3.0.1 (2012. 2. 8) Modernizr 2.5.2 로업데이트 (html5shiv 3.3 포함 ) 3.0.2 (2012. 2. 19) Modernizr 2.5.3 으로업데이트 4.0.0 (2012. 8. 28) HiDPI example 미디어쿼리추가 (#1127) MIT 라이선스추가 (#1139) normalize.css 1.0.1로업데이트 normalize.css 부분을기존 CSS 부분과분리 (#1160) CSS 파일과 JS 파일의디렉터리구조와이름재설정 jquery 1.8로업데이트 (#1161) Modernizr 2.6.1로업데이트 (#1086) 1 장 HTML5 보일러플레이트소개 15
Uncompressed jquery 를 Compressed jquery 로교체 (#1153) 불필요한인라인주석제거 (#1150) 4.0.1 (2012. 10. 20) 콘솔메서드스터핑의추가개선 (#1206, #1229) jquery 1.8.2로업데이트 Modernizr 2.6.2로업데이트 4.0.2 (2012. 12. 9) placeholder 아이콘업데이트 normalize.css 1.0.2로업데이트 jquery 1.8.3으로업데이트 4.0.3 (2013. 1. 12) 32 32px 의 favicon.ico 추가 (#1286) HiDPI example 미디어쿼리업데이트 (#1127) 4.1.0 (2013. 1. 21) normalize.css 1.1.0 로업데이트 jquery 1.9.0 로업데이트 4.2.0 (2013. 4. 8) Google 웹로그분석프로토콜검사를제거 (#1319) normalize.css 1.1.1로업데이트 jquery 1.9.1로업데이트 1 장 HTML5 보일러플레이트소개 16
1.5 HTML5 보일러플레이트의장단점 HTML5 보일러플레이트의 보일러플레이트 는 표준문안 이라는뜻입니다. 따라서모든사람이같은환경에서 HTML5 페이지를제작할수있어리소스관리와접근을손쉽게할수있도록도와주는템플릿이라고생각할수있습니다. 또한프로그램이아닌자주사용하는요소들을모은 html, css, js 파일을전부압축하여제공하므로어떤프로젝트환경에서든바로작업이가능하고, 원하는파일을자유롭게수정해자신만의사용자화템플릿을만들수있다는장점도있습니다. 즉, 어떤웹페이지를만들때마다 HTML5 마크업파일을새로만들고, <meta> 요소를고치고, 자주사용하는 CSS 코드를복사해서넣는시간을단축할수있는매우좋은템플릿이며다른사람과함께공동작업을할때도가이드역할을톡톡히할수있는것이바로 HTML5 보일러플레이트의큰장점이아닐까생각합니다. 하지만여러분이주의해야할점이있습니다. 단순하게 HTML5 보일러플레이트템플릿만그대로이용하게되면필요없는부분도소스코드에함께포함되어서자칫웹사이트최적화에방해될수있다는것입니다. 2장부터설명하는모든내용을정확하게파악하여여러분만의 HTML5 보일러플레이트템플릿을만들고나아가서이를전세계웹퍼블리셔들과공유하는것을목표로삼기를바랍니다. 1 장 HTML5 보일러플레이트소개 17