Sams Teach Yourself HTML5 in 10 Minutes(5th Edition) by Steven Holzner Authorized translation from the English language edition, entitled SAMS TEACH YOURSELF HTML5 IN 10 MINUTES, 5th Edition by HOLZNER, STEVEN, published by Pearson Education, Inc, publishing as Sams Publishing, Copyright 2011 by Pearson Education, Inc. All rights reserved. No part of this book may be reproduced or transmitted in any form or by any means, electronic or mechanical, including photocopying, recording or by any information storage retrieval system, without permission from Pearson Education, Inc. KOREAN language edition published by J-Pub Co. Copyright c 2011 KOREAN translation rights arranged with PEARSON EDUCATION, INC., publishing as Sams Publishing, Indianapolis through AGENCY ONE, SEOUL KOREA. 이책의한국어판저작권은에이전시원을통해저작권자와의독점계약으로제이펍에있습니다. 신저작권법에의해한국내에서보호를받는저작물이므로무단전재와무단복제를금합니다. 초판 1 쇄발행 2011 년 5 월 10 일 지은이스티븐홀즈너옮긴이천호민 펴낸이장성두 책임편집안주연 본문디자인초심디자인 표지디자인 Arowa & Arowana 주소경기도파주시교하읍파주신도시에이 15-1 블록한빛마을휴먼빌 201-502 전화 070-8201-9010 팩스 02-6280-0405 홈페이지 www.jpub.kr 펴낸곳제이펍 출판신고 2009 년 11 월 10 일제 406-2009-000087 호 용지신승지류유통 인쇄해외정판사 제본춘산제본 ISBN 978-89-94506-17-3 (13560) 값 16,000 원 이책은저작권법에따라보호를받는저작물이므로무단전재와무단복제를금지하며, 이책내용의전부또는일부를이용하려면반드시저작권자와제이펍의서면동의를받아야합니다. 잘못된책은구입하신서점에서바꾸어드립니다. 제이펍은독자여러분의책에관한아이디어와원고투고를기다리고있습니다. 책으로펴내고자하는아이디어나원고가있으신분은책에대한간단한개요와차례, 구성과저 ( 역 ) 자약력등을메일로보내주세요. ( 보내실곳 : jeipub@gmail.com)
차례 차례 옮긴이후기 x 이책에대하여 xiv 1 HTML5 기본 1 HTML5 시작하기 1 Canvas 요소로그림그리기 3 드래그앤드롭 3 새로운웹폼컨트롤을사용해정보가져오기 4 필요할때마다웹페이지편집하기 4 브라우저히스토리에데이터저장하기 4 문서내부에메시지보내기 5 놀라운비디오와오디오 5 웹저장소의사용 6 새로운요소사용하기 6 2 Canvas 요소로그림그리기 9 Canvas 요소시작하기 9 Canvas API 살펴보기 10 Canvas 예제시작 14 사각형그리기 16 선도형그리기 18 선도형채우기 19 곡선으로그림그리기 21 이차곡선그리기 22 둥근모양그리기 23 iv
차례 문자열그리기 24 canvas.html 예제코드 25 3 HTML5 의드래그앤드롭 29 드래그앤드롭시작하기 30 드래그앤드롭 API 살펴보기 31 드래그앤드롭예제시작 35 드래그앤드롭요소에스타일적용하기 38 드래그동작시작하기 40 드래그한객체를대상요소위로가져가기 42 드롭동작시작하기 43 드롭이벤트다루기 44 드롭동작완성하기 46 draganddrop.html 예제코드 47 4 웹폼컨트롤 51 웹폼컨트롤시작하기 52 웹폼컨트롤 API 살펴보기 54 웹폼예제시작 57 디폴트컨트롤생성하기 58 URL 컨트롤생성하기 60 Email 컨트롤생성하기 61 Range 와 Number 컨트롤생성하기 62 Date 와 Time 컨트롤생성하기 63 Color 컨트롤생성하기 65 Search 컨트롤생성하기 66 webforms.html 예제코드 67 webforms.php 예제코드 69 v
6 5 인라인편집 71 인라인편집시작하기 72 editdiv.html 예제시작 73 Bold 버튼추가하기 75 Italic 버튼추가하기 78 Underline 버튼추가하기 79 Add Link 버튼추가하기 81 Display Source 버튼추가하기 83 스펠링체크 86 editdiv.html 예제코드 87 editiframe.html 예제시작 88 editiframe.html 에버튼추가하기 91 editiframe.html 예제코드 93 6 브라우저히스토리다루기 95 브라우저히스토리시작하기 95 History API 살펴보기 97 pophistory.html 예제시작 99 뒤로가기버튼추가하기 100 앞으로가기버튼추가하기 103 이동버튼추가하기 105 히스토리개수조회 108 히스토리에데이터저장하기 109 히스토리에서데이터조회하기 112 pophistory.html 예제코드 115 vi
차례 7 메시징포인트얻기 119 메시지전달시작하기 120 메시징 API 살펴보기 122 parent.html 예제시작 123 교차 - 윈도우메시지전송하기 125 child.html 예제시작 127 교차 - 윈도우메시지전달받기 128 parent.html 예제코드 130 child.html 예제코드 131 domainparent.html 예제시작 132 교차 - 도메인메시지전송하기 134 domainchild.html 예제시작 136 교차 - 도메인메시지전달받기 137 domainparent.html 예제코드 139 domainchild.html 예제코드 140 8 비디오와오디오사용 141 비디오미디어컨트롤러시작하기 142 Video 요소 API 살펴보기 142 OGG 포맷으로변환 145 video.html 예제시작 147 video.html 에컨트롤추가하기 149 비디오반복재생 150 비디오자동재생 151 비디오재생실패감지 152 vii
8 오디오미디어컨트롤시작하기 154 audio.html 예제시작 156 오디오재생실패감지 158 9 웹저장소 163 세션저장소시작하기 164 세션저장소 API 살펴보기 165 sessionstorage.html 예제시작 167 세션에데이터저장하기 169 세션에저장한데이터읽어오기 170 세션에저장한데이터제거하기 172 sessionstorage.html 예제코드 174 로컬저장소시작하기 176 로컬저장소 API 살펴보기 177 localstorage.html 예제시작 178 브라우저에데이터저장하기 179 브라우저에저장한데이터읽어오기 181 로컬저장소의데이터제거하기 183 localstorage.html 예제코드 185 10 HHTML5 의새로운요소들 187 SVG 와 MathML 추가하기 187 새로운요소살펴보기 188 <article> 요소 190 <aside> 요소 191 <audio> 요소 192 <canvas> 요소 192 viii
차례 <command> 요소 192 <datalist> 요소 193 <details> 요소 194 <embed> 요소 195 <figcaption> 요소 196 <figure> 요소 196 <footer> 요소 197 <header> 요소 198 <hgroup> 요소 199 <keygen> 요소 199 <mark> 요소 200 <meter> 요소 201 <nav> 요소 202 <output> 요소 203 <progress> 요소 204 <rp> 요소 205 <rt> 요소 205 <ruby> 요소 206 <section> 요소 207 <source> 요소 207 <summary> 요소 208 <time> 요소 209 <video> 요소 209 찾아보기 210 ix
옮긴이후기 차례 주식시장에서흔하게접할수있는말중에이런말이있다. 달리는말에올라타라! 이말은여러분도쉽게짐작할수있듯이, 시장에서주목할만한종목에투자하라는뜻이다. 그럼지금우리가몸담고있는, 혹은앞으로몸담게될 IT 소프트웨어시장에서달리는말이란무엇일까? 정답은여러가지가될수있다. 어떤이는아직까지 모바일앱 (app) 이라고이야기할것이고, 어떤이는 병렬처리프로그래밍 이라고이야기할수도있을것이며, 또어떤이는너무많아서고르지못하겠다고할것이다. 하지만, 지금상황에서역자는 HTML5 에주목하라고이야기하고싶다. 모두가아는이야기겠지만, 일찍이애플의스티브잡스가 HTML5로인해더이상플래시 (flash) 플러그인을사용할필요가없다고이야기한이후로, 그리고무수히많은매체를통해서이미많은사람들이 HTML5 의 <video> 와 <audio>, <canvas> 요소, 그리고그외에 HTML5 이전버전에서볼수없었던, 만세를외칠만한많은기능에관심을갖기시작했다. 발빠른인터넷시장에선벌써 HTML5의준비를마쳤다. 대표적인예로구글의 Gmail과 Youtube를들수있는데, Gmail은메일에파일첨부기능으로 HTML5의 File Access 기능을적용했으며, Youtube는동영상재생을 HTML5의미디어기능으로대체했다. 101 Best HTML5 Sites(http://101besthtml5sites.com) 를확인해보는것도좋은방법이다. 오히려브라우저벤더사의대비가느린상태라고볼수있다. 물론 W3C의 HTML5에대한표준안정립이아직드래프트상태라고해도사용자의입장에서는그저아쉬울뿐이다. HTML5를보다쉽게접근할수있는방법이있다. 사실처음부터 W3C에서정리해놓은방대한양의백서를볼사람은그리많지않을것이다. 큰마음을먹지않는이상, 페이지의 Table Contents를여는순간손사래를치게될테니까. 그리어려운방법을택할필요가없다. HTML5 에대해서쉽게접근할수있는몇몇의사이트가존재하는데, 그중하나를소개할까한다. x
옮긴이후기 HTML5 Rocks(http://www.html5rocks.com) 는구글에서제작한사이트로새로워진 HTML5에어떤기능들이추가됐는지보기좋게설명해놓고있으며, 심지어큰기능단위로여러브라우저의지원정도를점수로표시하고있어재미있게볼수있다. 대부분의기능에서 Opera 가큰점수를얻고있다. 역시 Opera라는생각이든다. 다음사이트는 HTML5와 CSS3의기능들을나열하고각각의기능들에대해서브라우저별지원정도를나타내는데, 재미있는것은사이트의이름에서도쉽게알수있듯이 HTML5나 CSS3의기능들을언제쯤사용할수있는지를보여준다. 사이트메인페이지의제목을보면피식 ~ 웃음을나올지도모른다. When can I use (http://caniuse.com) xi
사실구글링을해보면이것외에도많은수의사이트에서 HTML5에관한정보를제공하고, HTML5의기능을사용해데모를구현한예와샘플코드를쉽게볼수있다. 시간이된다면관련사이트를검색해서데모를한번살펴보길권장한다. 그럼아마 HTML5를접하고자하는의지가불끈솟아오를것이다. 그런다음이책을통해 HTML5의세계에발을담그면된다. 앞으로 HTML5를이용한웹표준은더욱더굳건히자리매김할것이고, 더뛰어난기술들이개발될것이며, 더많은콘텐트가생산될것이다. HTML5를통해서말이다. 이런결과는요즘시대를살아가는누구든쉽게예상할수있다. 왜냐하면지금까지수없이많은웹기술들이발전해왔고, 그발전속도는더욱가속화되고있으며, 그결과를지금우리는직접경험하고또소비하고있기때문이다. 일말의의심도필요없는말이다. 그렇기때문에우리는 HTML5의시대를맞이하고함께살아가야한다. 그렇다고걱정할필요는없다. 우리는아주쉽게 HTML5 에접근할수있으니까. 부담없이. 이책은 Teach Yourself 시리즈중에 HTML5에관한내용을설명하는 Teach Yourself HTML5 in 10 Minutes 를번역한역서다. 원서의제목에서가장잘나타나듯이, 이책은 HTML5를쉽고빠르게, 그리고부담없이접하는데목적을두고있다. 특징을간결하게설명하고있으며, 군더더기없는예제코드를통해설명하고자하는기능을직접구현해볼수있도록한다. 구현한코드를실행시켜기능이어떻게동작하는지를직접눈으로확인해보면, 더쉽게이해할수있을것이다. 사실본역자는이책의번역을시작하기전, 약 1시간 10여분되는편도출근시간을활용해이책을읽었는데, 단세번의출근-퇴근-출근사이클을이용해이책을다읽을수있었다. ( 물론, 이책을읽었거나아니면이책의원서를읽은분들중에는역자가소비한시간이많다고이야기하는분들이있을수있다. 하지만, 그건개인차이니까.) 그만큼새로운 HTML5에쉽게접근할수있으며, HTML5 의새로운기능과기본적인문법들을어렵지않게배울수있을것이다. 추가정보를얻길원하는사람은인터넷이나더자세히 HTML5를다루는책을통해원하고자했던정보를획득하고, 뿌듯한마음으로자신이이제는한 HTML5 한다는생각을스스로해보거나다른이에게솜씨를뽐내도된다 ( 부디그런분들이많았으면하는바람이다 ). xii
옮긴이후기 그리긴기간은아니었지만, 그래도이책을번역하는시간동안그리고그이전부터지금까지늘고마운사람들이내옆에있다는사실을느낄때마다무척행복하다. 고마움을표시하기엔이지면이너무도부족한건사실이다. 하지만, 지속적으로감사를표한다는의미로몇마디적어보고자한다. 먼저편안한인상의제이펍출판사의장성두실장님. 여러도움덕에편안하게작업할수있었습니다. 그리고늘도움만받고있어정말고마운, 먼저들어선길에서얻은소중한경험들을늘아낌없이나눠주고있는웹지니님. 형 ~, 쌩유베리감사. 그리고난앞으로도계속해서, 지속적으로, 늘형한테도움을받을생각이야! 그리고페이스북패밀리여러분. 사랑해요! 저돌아가면다시자주함께해요. ( 혹시나도포함인가하고갸우뚱하지마세요. 무조건당신도포함입니다.) 내인생의반을너희와함께했구나. 나의친구들아 ~. 내가격하게아낀다. 마지막으로, 세상에서가장사랑하는가족모두에게진심으로감사의마음을전합니다. 특히그대! 늘생각하고있소. 그래서늘미안하고, 고맙고, 또사랑하오! 행복합시다! 천호민 xiii
이책에대하여 차례 HTML의새로운버전인 HTML5에첫발을내디딘것을축하한다. 이제바야흐로 HTML5의시대가왔다고많은사람들은이야기한다. 참고로 HTML 4.01은 1999년에완성됐다. 그와동시에혹자들은 HTML5가제공하는기능을간과하기쉽다고도이야기한다. 우리는여러분이이두가지의견에동의할것이라생각한다. HTML5는이전버전의 HTML이가지고있었던모든기능과강력함을그대로수용하면서전통적인 HTML 요소영역에는존재하지않았던스크립팅영역을크게발전시켰다. 그렇기때문에여러분이새로운 HTML 버전에대해서단지몇개의추가된요소만을기대했다면, 아마이책은여러분을깜짝놀래주기에부족함이없을것이다. HTML 은지금까지자바스크립트에대해학습해왔고, 또자바스크립트를확장해서사용할수있도록많은기능들을추가해놓았다. 예를들어, 지금껏자바스크립트와같은스크립트언어를통해서힘들게구현했던드래그앤드롭을 HTML5에서는기본적으로지원할뿐만아니라자바스크립트를통해그림을그릴수있는 Canvas 컨트롤역시제공한다. 이외에도우리는앞으로새로워질 HTML의많은기능들을이책을통해생생하게살펴보게될것이다. 이책은무엇을다루는가 이책은여러분들을 HTML의새로운기능들속으로안내할것이다. 다만, 이책에서는 HTML5의새로운기능에대해서만설명하기때문에여러분이 HTML 4.01 이전버전에대해서이미알고있다고가정한다. 다음은우리가살펴볼내용들을나열한것이다. 1장 HTML5 기본 : 이장에서는 HTML5의개요및 HTML5 문서의구조에대한규칙에대해서학습한다. 2장 Canvas 요소로그림그리기 : 여기에서는자바스크립트를통해서어떻게 HTML5에새로추가된 Canvas 컨트롤에그림을그릴수있는지살펴본다. xiv
이책에대하여 3장 HTML5에서의드래그앤드롭 : 이장에서는어떻게하면웹페이지를마우스로 드래그가능하게 만들수있는지설명한다. 4장 웹폼컨트롤 : HTML5는 telephone과 datetime 등의새로운컨트롤을포함해여러가지컨트롤을추가시켰다 ( 여기서컨트롤이란사용자와상호작용할수있는라디오버튼이나체크박스같은요소를가리킨다 ). 이장에서는이새로운컨트롤을직접사용해볼것이다. 5장 인라인편집 : 이장에서는직접편집가능한 HTML5의 <div> 또는 <span> 등의요소에대해서자세히살펴볼것이다. 6장 브라우저히스토리다루기 : 이장에서는이전버전의 HTML에서도존재했던히스토리, 페이지재방문을위해브라우저가제공하는브라우저의내장탐색기능에대해서살펴본다. 7장 메시지전달하기 : HTML5에서는서로다른문서간에메시지를전달할수있는기능이추가됐는데, 이장을통해 <iframe> 을포함한첫번째문서에서두번째문서로어떻게메시지를보낼수있는지간단히살펴볼것이다. 8장 비디오와오디오사용 : HTML5에서가장흥미로운기능중에하나가바로 <video> 와 <audio> 요소라고이야기할수있는데, 이장을통해서어떻게오디오와비디오를재생시킬수있는지확인해볼것이다. 9장 웹저장소 : 애초에웹페이지를탄생시켰던사람이전통적인 HTML과자바스크립트에대해서한가지누락시킨점이있는데, 바로사용자의페이지이동간에발생하는데이터의저장공간을마련해두지않았던것이다. 새로워진 HTML5에서는데이터저장에대한몇가지선택사항을제공하는데, 이장을통해자세히살펴볼것이다. 10장 새로운 HTML5 요소 : HTML5에는앞에서이미언급했던몇개의새로운요소외에더많은요소들이추가됐었다. 추가된수많은요소들을이장을통해살펴볼것이다. xv
준비작업 HTML5는아직까지걸음마단계에있기때문에약간의불편함을동반할수도있다. 특히브라우저의지원이현재까지는미비한상태인데, 이말은 HTML5의새로운기능을지원하지않는브라우저가있을수있다는점을뜻한다. 이책에서는파이어폭스, 크롬, 사파리, 오페라와인터넷익스플로러, 이렇게총다섯개의브라우저를사용해서 HTML5의새로운기능들을살펴볼것이다. 이책은각페이지마다새로워진 HTML5의기능에대해서설명하고, 현재어떤브라우저가이기능을지원하는지를명시한다. 그렇기때문에만일여러분이어떤기능을사용해보고싶다면, 먼저어떤브라우저가그기능을지원하는지를확인해봐야할것이다. 이책을읽기위해서는 ( 현재의표준버전인 ) HTML 4.01과자바스크립트에관한지식이필요하다. 전문가수준의지식은필요없겠지만, 사용할수있는정도의지식은필요할것이다. 이책의모든예제는함께제공된 HTML 문서를브라우저로열면바로실행이가능하다. 그러나 (4장에서사용하는 webforms.html과 webforms.php와같은 ) 두개의간단한예제는새로운웹폼컨트롤을사용해웹서버에서데이터를어떻게읽는가를보여주고, 웹서버에서브라우저가새로운세션을생성하고웹세션에데이터를어떻게저장하는지를설명하기때문에웹서버를필요로한다. 이두예제를실행시켜보기위해서는웹서버에이두예제파일을올려놓아야하는데, 그경우가아니라면이책에서제공하는예제코드를실행시키기위한별도의준비과정은필요치않다. 여기까지가책을읽기위해준비해야할전부이다. 그럼이제 1장부터시작해서 HTML5에대해자세히살펴보기로하자. xvi