제레미키스 Jeremy Keith 웹디자이너를위한 HTML5

Size: px

Start display at page:

Download "제레미키스 Jeremy Keith 웹디자이너를위한 HTML5"

오현 정
5 years ago
Views:

1 제레미키스 Jeremy Keith 웹디자이너를위한 HTML5

2 HTML5 FOR WEB DESIGNERS By A Book Apart Copyright 2010 by Jeremy Keith Korean translation copyright 2011 by Webactually KOREA, Inc. 이책의한국어판저작권은저작권자와의독점계약으로웹액츄얼리코리아 ( 주 ) 에있습니다. 저작권법에의해한국내에서보호를받는저작물이므로무단전재와복제를금합니다. 이책내용의전부또는일부를사용하려면반드시저작권자와웹액츄얼리북스팀의서면동의를받아야합니다. table of contents 1 chapter 1 마크업언어의간략한역사 웹디자이너를위한 HTML5 초판인쇄 2011 년 4 월일초판발행 2011 년 4 월일 저자제레미키스 역자김중철, 웹액츄얼리북스팀펴낸곳웹액츄얼리코리아 출판등록제 호주소서울서초구반포동 모모빌딩 B1 전화 (02) 팩스 (02) 웹사이트 편집디자인 design rak chapter 2 HTML5 의설계 chapter 3 리치미디어 chapter 4 Web Forms 2.0 chapter 5 HTML 의미론 chapter 6 지금 HTML5 를사용하려면 인덱스 가격 12,000 원 ISBN 잘못되거나파손된책은구입하신곳에서교환해드립니다.

3 출간에앞서 이책은웹개발자이자저술가로널리알려진제레미키스 Jeremy Keith 의명저 HTML5 For Web Designers 를번역한책입니다. 제레미키스는웹표준기술에관한함축적이고명쾌한저술로잘알려져있고국내에도이미소개된바있습니다. 더욱이이책은웹표준기술의세계적인선구자로유명한제프리젤드먼 Jeffrey Zeldman 이설립한출판사 A Book Apart의책입니다. Web Standards Project의설립자였던제프리젤드먼은 A Book Apart를통해지식의사전적인나열이아니라효과적인학습을통해보다근본적인의미를깨우칠수있는책을발행하고있습니다. 그가진정으로바라는것은웹표준기술의실제사용사례에있어의문과오류를없애는것입니다. 웹액츄얼리는제프리젤드먼의 A Book Apart 한국파트너로이책을발행하게된것을진심으로기쁘게생각합니다. 이책은 HTML5 각요소들의근본적인의미와한계에대해핵심을찌르며그쓰임새를적절하게잘전달하고있습니다. 기존기술과 HTML5 요소를정확한예제를곁들여비교설명하여그동안품었던 HTML5와 HTML 요소전반에대한의문이남지않도록명쾌하게정리했습니다. HTML5 기술구현에목마른독자여러분께큰도움이될것입니다. 또한 HTML과웹기술발전이면의의미를살펴봄으로써 CSS와스크립트, XHTML과 HTML이상호발전하면서 HTML5가어떤의미를갖는지, 그리고 HTML5의사용처와그개방적지향점에대한생각을더욱견고하게해주어독자여러분의응용력을높여줄것입니다. 뿐만아니라저자의다양한인문지식을배경으로한재치있는사례, 함축적이면서도세련된사고와문장은책읽는재미를더합니다. 책제목은 웹디자이너를위한 HTML5 입니다. 원서의제목 HTML5 For Web Designers 를그대로살릴것인지아니면국내실정에맞춰바꿀것인지를놓고잠시고민했지만원서제목에따르기로했습니다. 그이유는국내웹디자인산업이좀더발전하기를바라는마음에서입니다. 하지만이책은웹분야종사자모두를위한책입니다. 세련되고퀄리티높은웹사이트를제작하기위해서는 HTML5, CSS3를알아야합니다. 이책이여러분에게좋은가이드가되길바랍니다. - 웹액츄얼리북스팀 HTML5 의각요소들은다분히의미론적이고포괄적인동시에개별 적인기술이많기때문에저자의경험과이론을바탕으로한이책은

4 감사의글 HTML5 For Web Designers 가한국에출판되기를손꼽아기다려왔습니다. 이책의목적은독자들에게실질적인도움을주기위해짧은시간내웹의새로운공통어에대한상세하고꼼꼼한리뷰를제공하는것입니다. 이책을통해재미는물론앞으로더나은웹사이트를만들기위한영감을발견하시길바랍니다. 제레미키스 & 제프리젤드먼 We have eagerly awaited the publication of HTML5 FOR WEB DESIGNERS in Korea. Our goal with this book was to provide a highly detailed and meticulously edited examination of the web's new lingua franca-and to do it fast, so you can get back to work. We hope it entertains, but more importantly, we hope it inspires you to make better websites, now and in the future. Jeremy Keith & jeffrey Zeldman Jeremy Keith web: adactio.com Jeffrey Zeldman web:

5 번역감수자 아무리웹애플리케이션시대가왔다고하나웹의가장근본적인목적은많은사람들과정보를보편적으로공유하는것입니다. 그래서웹산업에종사하는사람들이 HTML이라는도구를어떻게사용하느냐는매우중요한과제입니다. 이책은 HTML5로웹콘텐츠를의미있고효율적으로만드는방법에대해소개합니다. 뿌리깊은나무는바람에흔들리지않듯이책이제시하는원칙을통해만들어진웹사이트는많은사람들에게도움을줄것입니다. 이책은현재까지출간된어떤책보다도 HTML5 표준의역사와원칙그리고개발방법에대해핵심적인내용을잘설명하고있습니다. 또한 HTML5 마크업이변화된내용을명확히설명하고있으며, HTML5에서가장중요한기능인캔버스, 비디오, 오디오부분을알기쉽게표현했습니다. 그리고마지막부분에서는지금당장 HTML5를활용하는방법을소개하여 HTML5를처음공부하는분들이쉽게활용할수있도록배려했습니다. HTML5 공부를시작하는분들, 그리고 HTML5 의기본적인이해를명확히하기를원하는분들에게적극적으로추천해드리고싶은책입니다. 윤석찬다음커뮤니케이션에서테크니컬에반젤리스트로서웹표준및웹애플리케이션기술에관심을가지고있으며, 제주대컴퓨터공학과에서웹기술및공개 SW를가르치고있다. 오랜기간한국 Mozilla 커뮤니티리더이면서 이원석현재삼성전자책임연구원으로근무하고있으며, W3C HTML5 대한민국관심그룹의장, W3C 대한민국사무국코디네이터, 모바일웹2.0 포럼 HTML5 AG 의장으로활동하고있다. 2003년부터웹서비스, 시맨틱웹, 유비쿼터스웹등에웹기술에대한다양한연구를수행했으며, 최근에는 HTML5, 미디어어노테이션, 디바이스 API

6 서문 맨디브라운 Mandy Brown, 제이슨산타마리아 Jason Santa Maria 와함께출판사 A Book Apart를설립했을때, 우리마음을사로잡은주제는오직 HTML5뿐이었습니다. 또한이주제를소화할수있는유일한저자는제레미키스 Jeremy Keith 단한명뿐이라고믿었습니다. HTML5는웹표준을준수하는디자인커뮤니티에웹폰트 real fonts 나 CSS3가출현했을때보다더엄청난충격을주었습니다. HTML5는느리고다분히정치적인 W3C에서탈피해, 단순한문서를넘어애플리케이션으로서의웹을목표로하는웹디자인커뮤니티를흥분시킨한편혼란을안겨주었습니다. 제레미키스는 DOM과자바스크립트에관한그의저술에서보여주었던것처럼, HTML5 주제에관해서도발군의능력을보여주고있습니다. HTML5가어떤것인지설명하고, 실제로이를사용할표준을준수하는디자이너와개발자들이신경써야할핵심들을효과적으로전달하고있습니다. 이책에서도그는꼭필요한만큼의글과그림만으로자신의능력을충분히발휘하고있습니다. 또브라우저제작사들을위해서는기술적인문제를담은보다두꺼운 비법서가나올수도있겠지만, 다행히도저와독자여러분은이런것들 을생각할필요가전혀없습니다. 이책은웹콘텐츠를만들고, 감각적이고의미있는웹페이지를만들 며, 훌륭한접근성의인터페이스를만드는여러분을위한책입니다. HTML5 의길잡이로서이책을참조하십시오. 이책의목표는빛처럼 명쾌합니다. A Book Apart 에서나올모든책들과마찬가지로복잡한 주제에대해명확한방향을제시하며, 최대한빠르게, 충분히이해할 수있도록독자여러분을도울것입니다. 여러분이좀더쉽게일을시 작할수있도록말입니다. Jeffrey Zeldman 제프리젤드먼 이미 HTML5 에관해다른책들이나와있으며, 앞으로도더많은책이 나올것입니다. HTML5 를이용하려는애플리케이션개발자들을위해 서 5 백여페이지에달하는기술서적이나올수도있을것입니다.

7 HTML5의 API는매우강력합니다. 완전히저의상상을초월할정도입니다. 그러니이에대해쓰는것은저보다더똑똑한개발자들의몫으로넘기겠습니다. API 내용만해도하나의책분량입니다. 그렇지만 HTML5에는여전히우리웹디자이너들을흥분시킬만한새로운내용들이아주많습니다. 다음장부터이런흥분의세계가시작됩니다. 3웹의역사는기술의발전으로요약할수있습니다. 초창기에 HTML에추가된태그중하나인 <img> 태그는웹을근본적으로바꾸었습니다. 또한이후에도입된자바스크립트는웹을보다동적인환경으로바꿀수있도록했습니다. Ajax의확산은완전한기 리치미디어 능을하는애플리케이션으로서의웹의가능성을보여주었습니다. 웹표준은지금까지엄청나게발전해서이제는 HTML, CSS, 그리고자바스크립트만으로거의모든것을만들수있게되었습니다. 그런데웹표준이다루는범위에는약간의빈틈이존재합니다. 여러분이텍스트와이미지만을다룬다면 HTML과 CSS만으로도충분할것입니다. 하지만오디오나비디오를만들려면 Flash 나 Silverlight와같은플러그인 Plug-in 기술을사용해야할것입니다. 30 HTML5 for Web Designers 리치미디어 31

플러그인 이라는말은이런기술들에정확히어울리는용어입니다. 이기술들은웹의부족한부분들을채워주기때문입니다. 이들은온라인상의게임, 영화, 음악등에상대적으로쉽게접근할수있도록도와줍니다. 하지만이기술들은개방되어있지않습니다. 이기술들은개방된개발자커뮤니티에의해만들어진것이아니라개별회사들이만든것이어서독점적기술입니다.

8 플러그인 이라는말은이런기술들에정확히어울리는용어입니다. 이기술들은웹의부족한부분들을채워주기때문입니다. 이들은온라인상의게임, 영화, 음악등에상대적으로쉽게접근할수있도록도와줍니다. 하지만이기술들은개방되어있지않습니다. 이기술들은개방된개발자커뮤니티에의해만들어진것이아니라개별회사들이만든것이어서독점적기술입니다. Flash는매우강력한기술임에틀림없지만, 때로는 Flash를사용하는것이마치악마와거래하는것처럼느껴집니다. Flash를이용하면웹상에서리치미디어를사용할수있게되지만, 이로인해우리는독립성일부를잃게되니까요. HTML5도점점부족한부분을채워나가고있습니다. 그결과, Flash나 Silverlight와같은특정회사의독점적인기술들과직접적으로경쟁하게되었습니다. 하지만 HTML5의리치미디어요소들은플러그인형태가아니라브라우저에자체내장된다는점이다릅니다. 만일단이미지가브라우저에의해처리되고나면, 그내용은바뀔수없습니다. <canvas> 태그는이와달리동적인이미지를만들수있는환경을제공합니다. 이태그는아주간단합니다. <canvas> 태그를사용하려면다음예와같이여는태그안에치수만입력하면됩니다. <canvas id="my-first-canvas" width="360" height="240"> </canvas> 여는태그와닫는태그사이에어떤내용을넣었을때, <canvas> 태그를지원하지않는브라우저에서는그내용이그대로표시될것입니다.( 그림 3.01) <canvas id="my-first-canvas" width="360" height="240"> <p>no canvas support? Have an old-fashioned image instead:</p> <img src="puppy.jpg" alt="a cute puppy"> </canvas> 캔버스 Mosaic 브라우저가웹페이지내에이미지를포함하는기능을추가했을때, 이는마치웹에터보엔진을단것과같았습니다. 하지만이미지들은그때부터계속움직이지않는정적인상태 로남아있게됩니다. 여러분은움직이는 gif 를만들수도있고, 자바스크립트를이용해이미지의스타일을바꿀수도있습니다. 또한동적으로서버에서이미지를생성할수도있습니다. 하지 그림 3.01: <canvas> 태그가지원되지않는브라우저를사용하면귀여운강아지이미지가보일것이다. 32 HTML5 for Web Designers 리치미디어 33

9 내부의복잡한모든작업은자바스크립트가처리합니다. 우선여러분이할일은 canvas 요소와 콘텍스트 context 를참조하는것입니다. 여기에서 콘텍스트 란단순히 API를의미합니다. 현재까지콘텍스트는 2차원만있습니다. var canvas = document.getelementbyid('my-first-canvas'); var context = canvas.getcontext('2d'); 이제는 1 의 HTML5 규격에정의된 API를이용해 <canvas> 태그의 2차원평면위에그림을그릴수있습니다. 이제이후에여러분이그리는모든것들은빨간외곽선을갖게될것입니다. 예를들어, 직사각형을그리려면다음문법을사용하면됩니다. strokerect ( left, top, width, height ) canvas의왼쪽경계로부터 20 픽셀만큼, 위쪽경계로부터 30 픽셀만큼떨어진위치에가로 100 픽셀, 세로 50 픽셀크기의직사각형을그리고싶다면, 다음과같이코드를작성하면됩니다.( 그림 3.02) context.strokerect(20, 30, 100, 50); 2차원 API는 Illustrator와같은그래픽프로그램에서볼수있는선굵기 strokes, 채우기 fills, 색상변화 gradients, 그림자 shadows, 도형 shapes, 그리고베지에곡선 Bezier curves 2 등과같은수많은도구들을 제공합니다. 차이점이라면그래픽유저인터페이스 GUI 를이용하는대신에모든것을자바스크립트를이용해나타내야한다는 것입니다. 그림 3.02: 위의 <canvas> 태그로그린직사각형. 갖고놀기 : 코드로그림그리기선을빨간색으로지정하는명령은다음과같습니다. context.strokestyle = '#990000'; 이것은아주간단한예에불과합니다. 2차원 API는 fillstyle, fillrect, linewidth, shadowcolor 등과같은수많은방법를제공합니다. 이론적으로는 Illustrator와같은프로그램에서그릴수있는모 든이미지들은 <canvas> 태그안에서만들수있습니다. 물론정 1 전체 URL은 the-canvas-element.html이다. 2 벡터그래픽이론에서곡선부분을나타내는방식중한가지. Adobe Illustrator가대표적인방식. 말그렇게실천하려면엄청난수고와함께굉장히긴자바스크 립트코드가필요할것입니다. 게다가 canvas 가진짜초점을두 고있는부분은이런것이아닙니다. 34 HTML5 for Web Designers 리치미디어 35

10 인덱스 ㄱ 객체지향 38 공백 7, 20 공백문자 구글차트 API 39 구조적태그 85, 92, 94, 103, 106, 권고제안 9 권고후보안 9-10 그래픽유저인터페이스 34 ㄴ 내장된콘텐츠 (embedded contents) 94 네비게이션 86-87, 네임스페이스 노드 37 ㄷ 닫는태그 20-21, 33, 48 닫는슬래시 21 대체콘텐츠 48-50, 52 드래그앤드롭 29 ㄹ 레미샤프 (Remy Sharp) 104, 110 렌더링 17-18, 23, 25, 77 리치미디어 31-32, 53 링크 19, 87, 89-90, 106 링크리스트 90 ㅁ 마이크로포맷 12, 77-80, 마이크로데이터 80 마크노팅엄 (Mark Nottingham) 80 마크필그림 (Mark Pilgrim) 110 메소드 44, 80 문맥 82, 100 문서형식 15, 17 모바일 Safari 65 ㅂ 브루스로슨 (Bruce Lawson) 110 부제 99 불대수 43 ㅅ 사용성 61, 74 사용자기반 13, 36 사용자시나리오 79 사이드바 88 상세연락처 64, 77 색상선택기 71 샌드박스 53 섹션화콘텐츠 94-95, 97, 99, 100, 102, 105, 107 섹션화루트 99 슈도클래스 55 스크롤 59 스크린리더 26, 37, 40, 106 스탠드얼론방식 48 스피너컨트롤 슬라이더컨트롤 66, 73 시맨틱 85 쌍방향매체 54 ㅇ 아우트라인알고리즘 97, 역설계 14 오류처리 14 웹애플리케이션 5, 29 위젯 69, 유효성검증 17, 107 유효성검사기 20-21, 107 이식성 이탤릭체 인라인태그 27, 81, 94 인용 88 입력형식 ㅈ 자동모드 17 자동완성 자바스크립트라이브러리 40, 66, 71, 73 자바스크립트 API 장치독립성 25 접근성 50 제목 104 제프리스네든 (Geoffrey Sneddon) 105 조건주석 104 존앨소프 (John Allsopp) 79 ㅋ 코덱 47 콘텐츠모델 94 ㅌ 탐색건너뛰기 106 팀버너스리경 (Sir Tim Berners-Lee) 1, 7 ㅍ 파서 76 표준모드 17 프랑스혁명 11 프랑스혁명력 11 프로퍼티 44 플러그인 31-32, 53 ㅎ 헨리시보넨 (Henri Sivonen) 107 a abbr 9, 24, acronym Adobe 47 Ajax 31, 85, 101, 106 APi 28-30, 34-35, 39-40, 44 Apple 5, 40, 47 AriA , 109 article aside audio 41, 44, autobuffer autocomplete 61, 62 autofocus autoplay b bespin bgcolor 24 big block 103 br 21 button c canvas 32-35, 36-39, cellpadding 24 cellspacing 24 center 24 Chrome 40 cite class 77 color 71, 109 Content-Type 18 context 34 controls 44, 51 CSS 3 55 d datalist date 69, 109 datetime 69, HTML5 for Web Designers 인덱스 115

11 datetime-local 69 div 85, 92-93, 109 doctype 15-18, 21-22, 107 doctype 전환 17 document.write 28 DOM 37, 56, 68, 77, 84 e em 25, , 109 f fallback 48, 50 Filament group 39 Firefox 40, 47 Flash 31-32, 36, 42, font 14, 24 footer 85, 87-90, 92, 107 form 56, 58-59, frame 23 g Google 53, 58, 85 h hatom 77, 91 hcalendar 77, 82 hcard 77 hgroup 99 HTML HTML HTML , 12, i IETF 2 illustrator img 2, 31, 53 innerhtml 28 input 64, 70, 72 IRC 112 ISO 70 j Javascript 19 jquery 39 l lint 22 loop 43-44, 51 m mark meta 18 mime 4 Modernizr 108 month 70 Mosaic 2, 32 Mozilla 5, 36 MP3 47 MP4 52 n nav 89 navigation 86, 89 noframe 23 number o obsolete 22 ogg Vorbis 47, 48 opera 5, 40, 66-67, 70 outline 97 p parser 76 pattern 72 placeholder 56-58, 60 poster 52 preload 46, 51 progress 84 pubdate 91 Python 19 q QuickTime 41 r range 66-69, 109 RDFa Real Audio 41 required role , 109 RSS 90 s Safari 40, 46-47, scoped search 64, 106, 109 section 85-88, 90, 92, 96 sectioning content 94 sectioning roots 99 SGML 2 Silverlight small 25, source 47-48, 51 strike 24 strong 25, 81 SVG 40 t table 39 tel 64 text-align 24 Theora Video 52 time 70, 82-83, 91 type 19, 67 u ugly-stick UndoManager 29 url 64 user agent 76 v valign 24 video 51, 54, 94, 108, 110 w W3C 2-9, 11, 21, 41, 56, 107, 111 Web Apps , 29 Web Forms Web slices 91 Web standards Project 3 week 70 WHATWg 5-7, 12, 112 window.history 28 x XHTML , 8, 16-17, 20-21, 107 XHTML XHTML 2 4, 6-8, 11-12, 14 XML 2-3, 4, 40, 76 XMLHttprequest 41 y year 70 Year Zero 12 Youtube HTML5 for Web Designers 인덱스 117

A Book Apart 에관하여 저자에관하여 웹디자인은다방면에관한넓은지식과고도의집중력을필요로하는작업입니다. 이것이바로웹사이트를만드는사람들을위한출판사 A Book Apart의새로운시리즈총서에담긴정신입니다. A Book Apart는오직하나의주제에대해자세하면서도세심하게편집된내용만을출판합니다.

12 A Book Apart 에관하여 저자에관하여 웹디자인은다방면에관한넓은지식과고도의집중력을필요로하는작업입니다. 이것이바로웹사이트를만드는사람들을위한출판사 A Book Apart의새로운시리즈총서에담긴정신입니다. A Book Apart는오직하나의주제에대해자세하면서도세심하게편집된내용만을출판합니다. 이번에제레미키스 Jeremy Keith 와함께 웹디자이너를위한 HTML5 를출간하게되어정말기쁩니다. 제레미키스 Jeremy Keith 는영국브라이튼에거주하는아일랜드국적의웹개발자입니다. 현재 Clearleft라는웹컨설팅회사에근무하고있으며 DOM Scripting 과 Bulletproof Ajax 라는두권의책을저술했습니다. 그의홈페이지는 adactio. com이며최근에수행한프로젝트는검색한음악을팟캐스트 podcast 로만 들어주는서비스인 Huffduffer 입니다. 제레미는웹사이트를만들지 않을때에는 Salter Cane 이라는밴드에서부주키를연주하곤합니다. His loony bun is fine benny lava! 1 1 인도의마이클잭슨이라불리는베니라바 (Benny Lava) 의노래중에 My loony bun is fine benny lava! 라는곡이있다. 문법적으로맞지않는영어를소리나는대로적은의미없는문장인데이제목으로뮤직비디오를만들어유튜브에서큰인기를모았다. W

13 글로벌모던웹디자인트렌드한방에!! 스매싱!! 정가 : 28,000원페이지수 : 344페이지, 전면컬러판형 : 신국판 mm 초판발행일 : 12월 20일펴낸곳 : 웹액츄얼리코리아 스매싱매거진이세계유명웹디자이너, 웹개발자와공동집필글로벌웹리더들의 9가지특강웹기획자, 디자이너, 퍼블리셔, 개발자필독서 < 스매싱북 > 은글로벌웹디자인커뮤니티 스매싱매거진 이세계유명웹디자이너, 웹개발자와함께집필한모던웹디자인에관한최고의실용서이다. 코딩분야의테크니컬팁과사용자인터페이스디자인, CSS레이아웃, 웹타이포그래피, 컬러사용가이드, 웹사이트성능최적화, 전환율높이기, 주목받는웹사이트를만드는웹디자인브랜딩등에관한정보를담고있다. 뿐만아니라마지막챕터에서는 스매싱매거진 이글로벌웹디자인업계에서가장영향력있는미디어회사로성장하기까지의히스토리를들려준다.

HTML5가 웹 환경에 미치는 영향 고 있어 웹 플랫폼 환경과는 차이가 있다. HTML5는 기존 HTML 기반 웹 브라우저와의 호환성을 유지하면서도, 구조적인 마크업(mark-up) 및 편리한 웹 폼(web form) 기능을 제공하고, 리치웹 애플리케이 션(RIA)을

HTML5가 웹 환경에 미치는 영향 고 있어 웹 플랫폼 환경과는 차이가 있다. HTML5는 기존 HTML 기반 웹 브라우저와의 호환성을 유지하면서도, 구조적인 마크업(mark-up) 및 편리한 웹 폼(web form) 기능을 제공하고, 리치웹 애플리케이 션(RIA)을 동 향 제 23 권 5호 통권 504호 HTML5가 웹 환경에 미치는 영향 이 은 민 * 16) 1. 개 요 구글(Google)은 2010년 5월 구글 I/O 개발자 컨퍼런스에서 HTML5를 통해 플러 그인의 사용이 줄어들고 프로그램 다운로드 및 설치가 필요 없는 브라우저 기반 웹 플랫폼 환경이 점차 구현되고 있다고 강조했다. 그리고 애플(Apple)은 2010년