책 소개
HTML5, CSS3, 자바스크립트를 활용한 웹 프로그래밍의 정도(正道)를 설명하는 아주 좋은 참고서다. HTML5의 문서구조, CSS3 스타일과 프로퍼티, 자바스크립트에 대한 기본적인 설명을 시작으로 비디오와 오디오, 폼, 캔버스, 드래그앤드롭, 지오로케이션, 웹 스토리지, IndexedDB, 파일, 커뮤니케이션, 웹 워커, 히스토리, 오프라인과 같은 필수 API에 대해 실전 예제를 중심으로 총 16장에 걸쳐 단계별로 명쾌하게 풀어간다. 이 책으로 HTML5의 개념과 실전 프로그래밍의 정석을 함께 확인해보자.
[ 소개 ]
우리는 혁명에 직면해 있다. 웹은 메인 개발 플랫폼인 동시에 정보와 소프트웨어에 대한 주요 기반이 되고 있다. 최근 몇 년 동안 모바일 기기는 인터넷 애플리케이션을 가능한 수단에서 필수 요소로 바꿔 놓았다. 현재 웹에서 독립적으로 동작하는 컴퓨터가 개발 중이며 출시도 목전에 두고 있다. 웹에서 동작하는 소프트웨어는 그 어느 때보다 더 정교해지고 있으며, 최종적으로 데스크톱 애플리케이션을 대체하고 있다. 변화의 수준은 실험적이고 급진적이며 HTML5가 이러한 변화의 중심에 서 있다.
『HTML5+CSS3+자바스크립트의 정석』은 필수 지식의 습득에서 HTML5 명세에 포함된 복잡한 주제의 마스터까지 단계별로 독자를 안내한다. 이 책을 읽고 나면 HTML5를 이용해 문서를 구조화하는 방법, CSS3를 이용해 스타일을 적용하는 방법, 가장 강력한 자바스크립트 API를 이용해 작업하는 방법을 알게 된다.
이 책은 단순한 HTML5의 안내서가 아니다. 이 책은 돋보이는 웹사이트와 놀라운 웹 애플리케이션의 구축을 기본부터 설명하는 전체 과정이다. 각 장에서는 HTML5, CSS3, 자바스크립트의 복잡한 문제뿐만 아니라 기본 개념을 살펴본다. 실용적인 전체 코드를 통해 초보자는 개념을 파악할 수 있으며 전문가는 각각의 태그, 스타일 또는 명세에 포함된 함수의 실제 사용 방식을 확인할 수 있다. 코드는 독자들이 복잡한 주제를 점진적으로 이해할 수 있도록 책 전반에 걸쳐 특정한 순서로 배치돼 있다.
『HTML5+CSS3+자바스크립트의 정석』은 독자들이 최신 웹 기술에 익숙해질 수 있게 하는 데 목표를 뒀다. 이러한 기술은 미래를 준비하기 위해 개발됐으며, 이 책은 여러분의 잠재력을 일깨우기 위해 쓰여졌다. 이제 마스터가 되어보자!
[ 소개 ]
우리는 혁명에 직면해 있다. 웹은 메인 개발 플랫폼인 동시에 정보와 소프트웨어에 대한 주요 기반이 되고 있다. 최근 몇 년 동안 모바일 기기는 인터넷 애플리케이션을 가능한 수단에서 필수 요소로 바꿔 놓았다. 현재 웹에서 독립적으로 동작하는 컴퓨터가 개발 중이며 출시도 목전에 두고 있다. 웹에서 동작하는 소프트웨어는 그 어느 때보다 더 정교해지고 있으며, 최종적으로 데스크톱 애플리케이션을 대체하고 있다. 변화의 수준은 실험적이고 급진적이며 HTML5가 이러한 변화의 중심에 서 있다.
『HTML5+CSS3+자바스크립트의 정석』은 필수 지식의 습득에서 HTML5 명세에 포함된 복잡한 주제의 마스터까지 단계별로 독자를 안내한다. 이 책을 읽고 나면 HTML5를 이용해 문서를 구조화하는 방법, CSS3를 이용해 스타일을 적용하는 방법, 가장 강력한 자바스크립트 API를 이용해 작업하는 방법을 알게 된다.
이 책은 단순한 HTML5의 안내서가 아니다. 이 책은 돋보이는 웹사이트와 놀라운 웹 애플리케이션의 구축을 기본부터 설명하는 전체 과정이다. 각 장에서는 HTML5, CSS3, 자바스크립트의 복잡한 문제뿐만 아니라 기본 개념을 살펴본다. 실용적인 전체 코드를 통해 초보자는 개념을 파악할 수 있으며 전문가는 각각의 태그, 스타일 또는 명세에 포함된 함수의 실제 사용 방식을 확인할 수 있다. 코드는 독자들이 복잡한 주제를 점진적으로 이해할 수 있도록 책 전반에 걸쳐 특정한 순서로 배치돼 있다.
『HTML5+CSS3+자바스크립트의 정석』은 독자들이 최신 웹 기술에 익숙해질 수 있게 하는 데 목표를 뒀다. 이러한 기술은 미래를 준비하기 위해 개발됐으며, 이 책은 여러분의 잠재력을 일깨우기 위해 쓰여졌다. 이제 마스터가 되어보자!
저자/역자 소개
[ 저자 서문 ]
HTML5는 기존 마크업 언어의 새로운 버전이 아니라(‘예전’ 기술의 개선이 아니라) 모바일 기기와 클라우드 컴퓨팅과 네트워킹 시대에 웹사이트와 애플리케이션 제작을 위한 새로운 개념이다.
이 모든 것은 오래 전에 웹 페이지의 기본적인 구조를 만들고 해당 콘텐츠를 구성하고 정보를 공유하기 위해 개발된 HTML의 간단한 버전으로 시작했다. 언어와 웹 자체는 주로 텍스트를 통한 정보 통신의 목적으로 탄생했다.
하지만 HTML의 협소한 활용 범위로 인해, 각 기업들은 예전에 없던 새로운 언어와 소프트웨어를 개발하고 웹에 기능을 추가하기 시작했다. 당시 초기에 개발된 언어와 소프트웨어 들은 강력하고 유명한 플러그인으로 성장했다. 간단한 게임과 재미있는 애니메이션은 곧 정교한 애플리케이션으로 변했고 웹의 개념을 완전히 바꿔놓는 새로운 경험을 제공했다.
새롭게 개발된 것들 중에서는 자바와 플래시가 가장 성공적이었다. 자바와 플래시는 폭넓게 채택되었으며 인터넷의 미래로 여겨졌다. 하지만 사용자 수가 점점 증가하고, 인터넷 비즈니스와 사회적 소통을 위한 주요 분야에서 컴퓨터 사용자 간 상호 연결하는 방법이 차차 변화하게 되면서, 자바와 플래시에 존재하던 제약사항은 사형 선고를 받게 됐다.
자바와 플래시의 주된 불편함은 통합(integration)의 결핍이라 할 수 있다. 자바와 플래시 모두 처음부터 플러그인으로 출발했으며, 구조에 삽입되지만 기본적으로 단지 화면의 일부 영역에 해당하는 구조하고만 공유한다. 애플리케이션과 문서 사이의 통신과 통합은 없었다.
통합의 미진함은 매우 심각한 문제가 됐으며 HTML 문서에서 영역을 공유하고 플러그인의 제약사항에 영향을 받지 않는 언어 개발을 위한 길을 마련하게 됐다. 자바스크립트는 브라우저에 내장된 해석형 언어(interpreted language)로서, 분명히 사용자의 경험을 향상시키고 웹에 기능을 제공하는 방법이었다. 하지만 몇 년간 보급 시도의 실패와 오남용으로 인해 시장에서 온전히 채택되지 않았으며 인기도 감소했다. 자바스크립트를 폄하하는 사람들에게는 채택을 반대하는 좋은 이유가 됐으며, 또한 당시 자바스크립트는 플래시와 자바의 기능을 대체할 능력조차 없었다. 그리고 분명히 자바와 플래시가 웹 애플리케이션의 범위를 제한하고 웹의 콘텐츠를 고립시키는 시기였음에도, 비디오 스트리밍 같은 인기 있는 기능은 웹의 큰 비중을 차지하게 됐고 이는 자바나 플래시 기술을 통해서만 효과적으로 제공될 수 있었다.
이와 같은 성공에도 불구하고 웹 영역에서 자바는 쇠퇴했다. 언어 본래의 복잡성, 지지부진한 발전과 통합의 미진함으로 인해 오늘날 자바는 주류 웹 애플리케이션에 더 이상 사용되지 않을 정도로 그 중요도가 줄어들게 됐다. 자바가 사라지자 웹 시장은 플래시를 주목했다. 하지만 플래시가 웹에서 경쟁자와 기본적인 특성을 공유해야 한다는 사실은 플래시도 자바와 동일한 운명에 처하게 될 것으로 보였다.
한편, 웹에 접근하는 소프트웨어는 계속 발전했다. 새로운 기능을 비롯해 더 빨라진 인터넷 접속 기술과 함께 브라우저 역시 자바스크립트 엔진을 향상시켰다. 더 강력해질수록 더 많은 기회가 생겼으며 자바스크립트 언어는 이 모든 것을 받아들일 준비를 갖췄다.
이러한 과정에서 개발자들은 자바와 플래시 모두 사용자의 증가로 인해 요구되는 애플리케이션을 제작하는 데 필요한 도구를 제공하기에는 충분하지 않다고 확신하기에 이르렀다. 결국 개발자들은 이전에 본 적이 없던 방식으로 자바스크립트를 애플리케이션에 적용하기 시작했다. 혁신과 놀라운 결과가 더 많은 프로그래머들의 눈길을 끌었다. 곧 ‘웹 2.0’이 탄생했고 개발자의 커뮤니티에서 자바스크립트에 대한 인식도 급격히 변했다.
자바스크립트는 예전에 어느 누구도 웹에서 이뤄내지 못한 작업의 수행과 혁신을 가능하게 한 언어임에 분명하다. 지난 몇 년간 전세계 프로그래머들과 웹 디자이너들은 이 기술의 한계와 이식성의 초기 결함을 극복하기 위해 매우 놀라운 방안을 내놓았다. 자바스크립트는 HTML과 CSS와 함께 웹의 발전에 절실히 필요한 가장 완벽한 조합이 됐다.
HTML5는 실제로 이러한 조합을 개선시킨, 모든 내용을 한데 결합하는 접착제와도 같다. HTML5는 웹의 모든 측면에 대한 표준을 제안했으며 포함된 각각의 기술에 대한 목적도 분명히 했다. 지금부터 HTML은 구조적인 요소를 제공하며, CSS는 해당 구조를 시각적으로 매력적이고 유용하게 변환하는 방법에 집중하며, 자바스크립트는 기능을 제공하고 전체 웹 애플리케이션을 구축하는 데 필요한 모든 능력을 제공한다.
웹사이트와 애플리케이션의 경계는 마침내 사라졌다. 그리고 필요한 기술은 준비됐다. 웹의 미래는 유망하며 HTML, CSS 그리고 자바스크립트라는 세 가지 기술의 조합과 발전은 하나의 강력한 명세가 됐으며 인터넷을 선도적인 개발용 플랫폼으로 변화시키고 있다. HTML5는 분명히 이러한 방식을 이끌고 있다.
[ 저자 소개 ]
J.D. 고샤(J.D. Gauchat)
프리랜서 웹 프로그래머이자 세계 시장에서 기회를 발굴하기 위해 최선을 다하는 기업가다. 지난 10년간 다수의 프로젝트에 참여했으며 HTML, CSS, PHP, 자바스크립트에 관한 기사를 기고했다. 현재는 최신 기술로 구현한 웹과 웹 애플리케이션 개발에 주력하고 있다.
[ 옮긴이의 말 ]
HTML5는 W3C에서 만든 차세대 웹 표준으로 애플, 구글, 모질라, 오페라 그리고 마이크로소프트 등의 모든 벤더가 참여하고 있습니다. HTML5에 이와 같은 주요 선도기업들이 앞다퉈 참여하는 이유는 분명 HTML5에 그 무엇인가 ‘매력’이 있어서일 겁니다.
예전에 안철수 교수님이 ‘무릎팍도사’라는 TV 프로그램에 출연해 자신의 성공 요인은 ‘운이란 기회가 준비를 만난 것’이라고 이야기했습니다. 아마도 준비된 HTML5가 모바일이라는 기회를 만나 ‘운’ 좋은 성공을 거둔 스토리가 이와 비슷하지 않을까요?
HTML5는 더 이상 화면만 표현하는 ‘수단’이 아닙니다. HTML5는 이전 버전의 개선이 아니라 새로운 ‘플랫폼’입니다. 기존의 HTML이 ‘표현’에 집중한 ‘수동적인 수단’이었다면 HTML5는 웹의 ‘기반’이 되는 ‘능동적인 도구’입니다. HTML5가 각광받는 이유도 과거의 한계를 뛰어넘은 이와 같은 ‘혁신’에 있다고 생각됩니다.
이 책은 HTML5와 관련된 주요 핵심 주제를 총 16장으로 구성했으며 각 장은 거의 독립적입니다. 처음에는 간단한 기본내용으로 시작해 그 예제를 점진적으로 완성해 나가는 방식이며 각 장이 끝나면 전체적인 내용을 한눈에 파악할 수 있게 구성했습니다. 결국 각 장은 기승전결의 스토리가 있는 단편 드라마와 같습니다. 따라서 처음에는 이 책을 가벼운 마음으로 읽으면서 전체 윤곽을 파악하면 됩니다. 그런 다음 각 예제를 자세히 살펴보고 실행해보면 ‘감’을 잡게 될 겁니다.
이 책과 더불어 이 책에 대한 홈페이지(www.minkbooks.com)도 매우 알차게 구성돼 있습니다. 홈페이지를 보면 저자의 섬세함과 전문적인 지식이 이 책이 탄생한 원동력이라 확신하게 됩니다. 이제 전체 ‘숲’을 보았고, 코드라는 ‘나무’도 살펴봤다면 한 단계 더 나아가 이 책의 홈페이지를 꼭 방문해 보시기 바랍니다. 홈페이지(그림 1 참조)의 우측 상단에 있는 ‘Links’ 메뉴를 클릭하시면 각 장과 관련 있는 주요 사이트의 링크가 보입니다(그림 2 참조). 이 링크의 내용을 확인하고 이해하게 되면 드디어 그 ‘숲’에 있는 ‘나무’ 외에도 아름다운 ‘꽃’도 보일 겁니다.
그림 1. 이 책의 홈페이지(www.minkbooks.com) 화면
그림 2. Links 메뉴 화면
이 책의 소스코드는 총 세 가지 형태로 제공합니다. 첫 번째는 txt 파일 형태로 책에 있는 모든 코드를 각각의 텍스트 파일로 제공합니다. 예컨대 책의 코드 1-1의 텍스트 파일은 code1-1.txt입니다. 두 번째는 html 파일 형태입니다. txt 파일과 마찬가지로 책의 모든 코드를 제공합니다. 하지만 html 파일을 브라우저에서 열면, 결과가 아니라 해당 코드가 브라우저에 직접 나타납니다. 마지막으로 세 번째는 책의 본문에 있는 화면 캡처를 위해 작성한 html 파일입니다. 앞서 설명했듯이 이 책의 구성이 점진적 구성으로 되어있어 이전 css 파일이나 js 파일을 덮어쓰게 되는 경우가 있습니다. 따라서 화면 캡처 시 사용한 코드의 경우는 독립적으로 작성해 해당 코드만 실행하면 결과를 바로 확인해 볼 수 있도록 html, css, js 파일을 모두 합쳐서 하나의 html 파일로 작성했습니다. 그리고 이와 같은 통합 html 파일의 명명 규칙은 html+css+js 순으로 부여했습니다. 예컨대 code5-4+5+6~10.html 파일의 경우는 ‘코드 5-4의 html 파일+코드 5-5의 css 파일+코드 5-6에서 코드 5~10까지의 js파일’을 모두 합쳐서 하나로 작성한 html 파일입니다. 참고로 두 개의 파일을 합친 경우에 첫 번째는 html 파일이고 두 번째는 css나 js 파일입니다. 전체 소스코드는 에이콘 출판사의 도서정보 페이지인 http://acornpub.co.kr/book/html5-css3-javascript에서 zip 파일로 제공합니다.
HTML5는 현재도 진화 중인 웹 표준입니다. 따라서 크로스 브라우징(cross browsing)을 가능하게 하려면 각 브라우저에서 HTML5의 지원 여부를 반드시 확인해 봐야 합니다. 이를 확인해 볼 수 있는 가장 좋은 사이트는 www.html5test.com입니다. 이 사이트가 의미 있는 것은 HTML5의 요소나 폼 등의 기능에 대한 지원 여부를 한눈에 파악하고 확인해 볼 수 있다는 점입니다. 참고로 이 책의 소스코드에 대한 화면 캡처는 맥 OS X 10.7.4의 사파리 5.1.7을 기준으로 작업했으며 사파리가 지원하지 않는 일부 기능에 대해선 크롬이나 파이어폭스의 최신 버전 중에 지원하는 브라우저에서 작업했습니다.
HTML5의 세계로 뛰어든 독자 여러분의 열정과 도전에 경의를 표합니다. 이 책이 독자 여러분의 노력에 좋은 길라잡이가 되길 바라며, 감사의 말과 함께 건승을 빕니다.
[ 옮긴이 소개 ]
홍영표
전자전기공학을 전공하다 컴퓨터 프로그램에 빠져 이 일을 평생 업으로 삼게 됐다. LG CNS에서 개발자와 아키텍트로 근무하면서 다양한 프로젝트 경험을 통해 IT에 눈을 뜨게 됐다. 지금은 한 금융회사 정보시스템부에서 근무하고 있다. 차세대시스템 구축 시 애플리케이션 아키텍트로서 시스템 성능과 튜닝을 담당했으며, 현재는 모바일 시스템 구축을 비롯해 신기술 연구개발(R&D)을 맡고 있다. 애플의 철학과 스티브 잡스의 카리스마를 좋아하며, 엔지니어를 넘어 아티스트가 되기 위해 고군분투 중이다. 옮긴 책으로는 『아이폰&아이패드 인 액션』(에이콘출판, 2011), 『Professional iPhone and iPad Database Application Programming 한국어판』(에이콘출판, 2012), 『스프링 인 액션(제3판)』(제이펍, 2012)이 있다.
HTML5는 기존 마크업 언어의 새로운 버전이 아니라(‘예전’ 기술의 개선이 아니라) 모바일 기기와 클라우드 컴퓨팅과 네트워킹 시대에 웹사이트와 애플리케이션 제작을 위한 새로운 개념이다.
이 모든 것은 오래 전에 웹 페이지의 기본적인 구조를 만들고 해당 콘텐츠를 구성하고 정보를 공유하기 위해 개발된 HTML의 간단한 버전으로 시작했다. 언어와 웹 자체는 주로 텍스트를 통한 정보 통신의 목적으로 탄생했다.
하지만 HTML의 협소한 활용 범위로 인해, 각 기업들은 예전에 없던 새로운 언어와 소프트웨어를 개발하고 웹에 기능을 추가하기 시작했다. 당시 초기에 개발된 언어와 소프트웨어 들은 강력하고 유명한 플러그인으로 성장했다. 간단한 게임과 재미있는 애니메이션은 곧 정교한 애플리케이션으로 변했고 웹의 개념을 완전히 바꿔놓는 새로운 경험을 제공했다.
새롭게 개발된 것들 중에서는 자바와 플래시가 가장 성공적이었다. 자바와 플래시는 폭넓게 채택되었으며 인터넷의 미래로 여겨졌다. 하지만 사용자 수가 점점 증가하고, 인터넷 비즈니스와 사회적 소통을 위한 주요 분야에서 컴퓨터 사용자 간 상호 연결하는 방법이 차차 변화하게 되면서, 자바와 플래시에 존재하던 제약사항은 사형 선고를 받게 됐다.
자바와 플래시의 주된 불편함은 통합(integration)의 결핍이라 할 수 있다. 자바와 플래시 모두 처음부터 플러그인으로 출발했으며, 구조에 삽입되지만 기본적으로 단지 화면의 일부 영역에 해당하는 구조하고만 공유한다. 애플리케이션과 문서 사이의 통신과 통합은 없었다.
통합의 미진함은 매우 심각한 문제가 됐으며 HTML 문서에서 영역을 공유하고 플러그인의 제약사항에 영향을 받지 않는 언어 개발을 위한 길을 마련하게 됐다. 자바스크립트는 브라우저에 내장된 해석형 언어(interpreted language)로서, 분명히 사용자의 경험을 향상시키고 웹에 기능을 제공하는 방법이었다. 하지만 몇 년간 보급 시도의 실패와 오남용으로 인해 시장에서 온전히 채택되지 않았으며 인기도 감소했다. 자바스크립트를 폄하하는 사람들에게는 채택을 반대하는 좋은 이유가 됐으며, 또한 당시 자바스크립트는 플래시와 자바의 기능을 대체할 능력조차 없었다. 그리고 분명히 자바와 플래시가 웹 애플리케이션의 범위를 제한하고 웹의 콘텐츠를 고립시키는 시기였음에도, 비디오 스트리밍 같은 인기 있는 기능은 웹의 큰 비중을 차지하게 됐고 이는 자바나 플래시 기술을 통해서만 효과적으로 제공될 수 있었다.
이와 같은 성공에도 불구하고 웹 영역에서 자바는 쇠퇴했다. 언어 본래의 복잡성, 지지부진한 발전과 통합의 미진함으로 인해 오늘날 자바는 주류 웹 애플리케이션에 더 이상 사용되지 않을 정도로 그 중요도가 줄어들게 됐다. 자바가 사라지자 웹 시장은 플래시를 주목했다. 하지만 플래시가 웹에서 경쟁자와 기본적인 특성을 공유해야 한다는 사실은 플래시도 자바와 동일한 운명에 처하게 될 것으로 보였다.
한편, 웹에 접근하는 소프트웨어는 계속 발전했다. 새로운 기능을 비롯해 더 빨라진 인터넷 접속 기술과 함께 브라우저 역시 자바스크립트 엔진을 향상시켰다. 더 강력해질수록 더 많은 기회가 생겼으며 자바스크립트 언어는 이 모든 것을 받아들일 준비를 갖췄다.
이러한 과정에서 개발자들은 자바와 플래시 모두 사용자의 증가로 인해 요구되는 애플리케이션을 제작하는 데 필요한 도구를 제공하기에는 충분하지 않다고 확신하기에 이르렀다. 결국 개발자들은 이전에 본 적이 없던 방식으로 자바스크립트를 애플리케이션에 적용하기 시작했다. 혁신과 놀라운 결과가 더 많은 프로그래머들의 눈길을 끌었다. 곧 ‘웹 2.0’이 탄생했고 개발자의 커뮤니티에서 자바스크립트에 대한 인식도 급격히 변했다.
자바스크립트는 예전에 어느 누구도 웹에서 이뤄내지 못한 작업의 수행과 혁신을 가능하게 한 언어임에 분명하다. 지난 몇 년간 전세계 프로그래머들과 웹 디자이너들은 이 기술의 한계와 이식성의 초기 결함을 극복하기 위해 매우 놀라운 방안을 내놓았다. 자바스크립트는 HTML과 CSS와 함께 웹의 발전에 절실히 필요한 가장 완벽한 조합이 됐다.
HTML5는 실제로 이러한 조합을 개선시킨, 모든 내용을 한데 결합하는 접착제와도 같다. HTML5는 웹의 모든 측면에 대한 표준을 제안했으며 포함된 각각의 기술에 대한 목적도 분명히 했다. 지금부터 HTML은 구조적인 요소를 제공하며, CSS는 해당 구조를 시각적으로 매력적이고 유용하게 변환하는 방법에 집중하며, 자바스크립트는 기능을 제공하고 전체 웹 애플리케이션을 구축하는 데 필요한 모든 능력을 제공한다.
웹사이트와 애플리케이션의 경계는 마침내 사라졌다. 그리고 필요한 기술은 준비됐다. 웹의 미래는 유망하며 HTML, CSS 그리고 자바스크립트라는 세 가지 기술의 조합과 발전은 하나의 강력한 명세가 됐으며 인터넷을 선도적인 개발용 플랫폼으로 변화시키고 있다. HTML5는 분명히 이러한 방식을 이끌고 있다.
[ 저자 소개 ]
J.D. 고샤(J.D. Gauchat)
프리랜서 웹 프로그래머이자 세계 시장에서 기회를 발굴하기 위해 최선을 다하는 기업가다. 지난 10년간 다수의 프로젝트에 참여했으며 HTML, CSS, PHP, 자바스크립트에 관한 기사를 기고했다. 현재는 최신 기술로 구현한 웹과 웹 애플리케이션 개발에 주력하고 있다.
[ 옮긴이의 말 ]
HTML5는 W3C에서 만든 차세대 웹 표준으로 애플, 구글, 모질라, 오페라 그리고 마이크로소프트 등의 모든 벤더가 참여하고 있습니다. HTML5에 이와 같은 주요 선도기업들이 앞다퉈 참여하는 이유는 분명 HTML5에 그 무엇인가 ‘매력’이 있어서일 겁니다.
예전에 안철수 교수님이 ‘무릎팍도사’라는 TV 프로그램에 출연해 자신의 성공 요인은 ‘운이란 기회가 준비를 만난 것’이라고 이야기했습니다. 아마도 준비된 HTML5가 모바일이라는 기회를 만나 ‘운’ 좋은 성공을 거둔 스토리가 이와 비슷하지 않을까요?
HTML5는 더 이상 화면만 표현하는 ‘수단’이 아닙니다. HTML5는 이전 버전의 개선이 아니라 새로운 ‘플랫폼’입니다. 기존의 HTML이 ‘표현’에 집중한 ‘수동적인 수단’이었다면 HTML5는 웹의 ‘기반’이 되는 ‘능동적인 도구’입니다. HTML5가 각광받는 이유도 과거의 한계를 뛰어넘은 이와 같은 ‘혁신’에 있다고 생각됩니다.
이 책은 HTML5와 관련된 주요 핵심 주제를 총 16장으로 구성했으며 각 장은 거의 독립적입니다. 처음에는 간단한 기본내용으로 시작해 그 예제를 점진적으로 완성해 나가는 방식이며 각 장이 끝나면 전체적인 내용을 한눈에 파악할 수 있게 구성했습니다. 결국 각 장은 기승전결의 스토리가 있는 단편 드라마와 같습니다. 따라서 처음에는 이 책을 가벼운 마음으로 읽으면서 전체 윤곽을 파악하면 됩니다. 그런 다음 각 예제를 자세히 살펴보고 실행해보면 ‘감’을 잡게 될 겁니다.
이 책과 더불어 이 책에 대한 홈페이지(www.minkbooks.com)도 매우 알차게 구성돼 있습니다. 홈페이지를 보면 저자의 섬세함과 전문적인 지식이 이 책이 탄생한 원동력이라 확신하게 됩니다. 이제 전체 ‘숲’을 보았고, 코드라는 ‘나무’도 살펴봤다면 한 단계 더 나아가 이 책의 홈페이지를 꼭 방문해 보시기 바랍니다. 홈페이지(그림 1 참조)의 우측 상단에 있는 ‘Links’ 메뉴를 클릭하시면 각 장과 관련 있는 주요 사이트의 링크가 보입니다(그림 2 참조). 이 링크의 내용을 확인하고 이해하게 되면 드디어 그 ‘숲’에 있는 ‘나무’ 외에도 아름다운 ‘꽃’도 보일 겁니다.
그림 1. 이 책의 홈페이지(www.minkbooks.com) 화면
그림 2. Links 메뉴 화면
이 책의 소스코드는 총 세 가지 형태로 제공합니다. 첫 번째는 txt 파일 형태로 책에 있는 모든 코드를 각각의 텍스트 파일로 제공합니다. 예컨대 책의 코드 1-1의 텍스트 파일은 code1-1.txt입니다. 두 번째는 html 파일 형태입니다. txt 파일과 마찬가지로 책의 모든 코드를 제공합니다. 하지만 html 파일을 브라우저에서 열면, 결과가 아니라 해당 코드가 브라우저에 직접 나타납니다. 마지막으로 세 번째는 책의 본문에 있는 화면 캡처를 위해 작성한 html 파일입니다. 앞서 설명했듯이 이 책의 구성이 점진적 구성으로 되어있어 이전 css 파일이나 js 파일을 덮어쓰게 되는 경우가 있습니다. 따라서 화면 캡처 시 사용한 코드의 경우는 독립적으로 작성해 해당 코드만 실행하면 결과를 바로 확인해 볼 수 있도록 html, css, js 파일을 모두 합쳐서 하나의 html 파일로 작성했습니다. 그리고 이와 같은 통합 html 파일의 명명 규칙은 html+css+js 순으로 부여했습니다. 예컨대 code5-4+5+6~10.html 파일의 경우는 ‘코드 5-4의 html 파일+코드 5-5의 css 파일+코드 5-6에서 코드 5~10까지의 js파일’을 모두 합쳐서 하나로 작성한 html 파일입니다. 참고로 두 개의 파일을 합친 경우에 첫 번째는 html 파일이고 두 번째는 css나 js 파일입니다. 전체 소스코드는 에이콘 출판사의 도서정보 페이지인 http://acornpub.co.kr/book/html5-css3-javascript에서 zip 파일로 제공합니다.
HTML5는 현재도 진화 중인 웹 표준입니다. 따라서 크로스 브라우징(cross browsing)을 가능하게 하려면 각 브라우저에서 HTML5의 지원 여부를 반드시 확인해 봐야 합니다. 이를 확인해 볼 수 있는 가장 좋은 사이트는 www.html5test.com입니다. 이 사이트가 의미 있는 것은 HTML5의 요소나 폼 등의 기능에 대한 지원 여부를 한눈에 파악하고 확인해 볼 수 있다는 점입니다. 참고로 이 책의 소스코드에 대한 화면 캡처는 맥 OS X 10.7.4의 사파리 5.1.7을 기준으로 작업했으며 사파리가 지원하지 않는 일부 기능에 대해선 크롬이나 파이어폭스의 최신 버전 중에 지원하는 브라우저에서 작업했습니다.
HTML5의 세계로 뛰어든 독자 여러분의 열정과 도전에 경의를 표합니다. 이 책이 독자 여러분의 노력에 좋은 길라잡이가 되길 바라며, 감사의 말과 함께 건승을 빕니다.
[ 옮긴이 소개 ]
홍영표
전자전기공학을 전공하다 컴퓨터 프로그램에 빠져 이 일을 평생 업으로 삼게 됐다. LG CNS에서 개발자와 아키텍트로 근무하면서 다양한 프로젝트 경험을 통해 IT에 눈을 뜨게 됐다. 지금은 한 금융회사 정보시스템부에서 근무하고 있다. 차세대시스템 구축 시 애플리케이션 아키텍트로서 시스템 성능과 튜닝을 담당했으며, 현재는 모바일 시스템 구축을 비롯해 신기술 연구개발(R&D)을 맡고 있다. 애플의 철학과 스티브 잡스의 카리스마를 좋아하며, 엔지니어를 넘어 아티스트가 되기 위해 고군분투 중이다. 옮긴 책으로는 『아이폰&아이패드 인 액션』(에이콘출판, 2011), 『Professional iPhone and iPad Database Application Programming 한국어판』(에이콘출판, 2012), 『스프링 인 액션(제3판)』(제이펍, 2012)이 있다.
목차
목차
- 1장 HTML5 문서
- 기본 구성
- 구조
- 독타입
- < html >
- < head >
- < body >
- < meta >
- < title >
- < link >
- 바디 구조
- 구성
- < header >
- < nav >
- < section >
- < aside >
- < footer >
- 바디 내부
- < article >
- < hgroup >
- < figure >와 < figcaption >
- 신/구 요소
- < mark >
- < small >
- < cite >
- < address >
- < time >
- 定石: HTML5 문서
- 2장 CSS 스타일과 박스 모델
- CSS와 HTML
- 스타일과 구조
- 블록 요소
- 박스 모델
- 스타일에 대한 기본 사항
- 인라인 스타일
- 내장 스타일
- 외부 파일
- 참조
- 키워드로 참조
- id 속성으로 참조
- 클래스 속성으로 참조
- 임의의 속성으로 참조
- 유사 클래스로 참조
- 새로운 선택자
- 템플릿에 CSS 적용
- 전통적 박스 모델
- 템플릿
- 범용 선택자 *
- 새로운 제목 계층구조
- 새로운 HTML5 요소 선언
- 바디 중앙 정렬
- 메인 박스 생성
- 헤더
- 내비게이션바
- 섹션과 사이드바
- 푸터
- 마무리 작업
- 박스 크기
- 유연한 박스 모델
- 유연한 박스 모델 이해
- display
- box-orient
- box-direction
- box-ordinal-group
- box-pack
- box-flex
- box-align
- 定石: CSS 스타일과 박스 모델
- 유연한 박스 모델
- 유사 클래스와 선택자
- 3장 CSS3 프로퍼티
- 새로운 규칙
- CSS3가 미쳤어요!
- 템플릿
- border-radius
- box-shadow
- text-shadow
- @font-face
- 선형 그라디언트
- 원형 그라디언트
- RGBA
- HSLA
- outline
- border-image
- 변형과 전환
- transform: scale
- transform: rotate
- transform: skew
- transform: translate
- 일괄 변형
- 동적 변형
- 전환
- 定石: CSS3 프로퍼티
- 새로운 규칙
- 4장 자바스크립트
- 자바스크립트의 연관성
- 자바스크립트 통합
- 인라인
- 내장
- 외부 파일
- 새로운 선택자
- querySelector()
- querySelectorAll()
- 이벤트 핸들러
- 인라인 이벤트 핸들러
- 프로퍼티로서의 이벤트 핸들러
- addEventListener() 메소드
- API
- 캔버스 API
- 드래그 앤드 드롭 API
- 지오로케이션 API
- 스토리지 API
- 파일 API
- 커뮤니케이션API
- 웹 워커API
- 히스토리API
- 오프라인API
- 외부 라이브러리
- 제이쿼리
- 구글 지도
- 定石: 자바스크립트
- 요소
- 선택자
- 이벤트
- API
- 5장 비디오와 오디오
- HTML5를 이용한 비디오 재생
- <video> 요소
- <video> 속성
- 비디오 플레이어 제작
- 디자인
- 코드
- 이벤트
- 메소드
- 프로퍼티
- 코드 동작
- 비디오 포맷
- HTML5를 이용한 오디오 재생
- <audio> 요소
- 오디오 플레이어 프로그래밍
- 定石: 비디오와 오디오
- 요소
- 속성
- 비디오 속성
- 이벤트
- 메소드
- 프로퍼티
- HTML5를 이용한 비디오 재생
- 6장 폼과 폼 API
- HTML5 웹 폼
- < form > 요소
- < input > 요소
- email 타입
- search 타입
- url 타입
- tel 타입
- number 타입
- range 타입
- date 타입
- week 타입
- month 타입
- time 타입
- datetime 타입
- datetime-local 타입
- color 타입
- 새로운 속성
- placeholder 속성
- required 속성
- multiple 속성
- autofocus 속성
- pattern 속성
- form 속성
- 새로운 폼 요소
- < datalist > 요소
- < progress > 요소
- < meter > 요소
- < output > 요소
- 폼 API
- setCustomValidity()
- Invalid 이벤트
- 실시간 유효성 검증
- 유효성 제약조건
- willValidate
- 定石: 폼과 폼 API
- 타입
- 속성
- 요소
- 메소드
- 이벤트
- 상태
- HTML5 웹 폼
- 7장 캔버스 API
- 캔버스 준비
- < canvas > 요소
- getContext()
- 캔버스에 그리기
- 사각형 그리기
- 색상
- 그라디언트
- 패스 생성
- 선 스타일
- 텍스트
- 그림자
- 변환
- 상태 복구
- globalCompositeOperation
- 이미지 처리
- drawImage()
- 이미지 데이터
- 패턴
- 애니메이션
- 비디오 처리
- 定石: 캔버스 API
- 메소드
- 프로퍼티
- 캔버스 준비
- 8장 드래그 앤 드롭 API
- 웹에서의 드래그 앤 드롭
- 새로운 이벤트
- dataTransfer
- dragenter, dragleave, dragend
- 유효한 소스 선택
- setDragImage()
- 파일
- 定石: 드래그 앤 드롭 API
- 이벤트
- 메소드
- 프로퍼티
- 웹에서의 드래그 앤 드롭
- 9장 지오로케이션 API
- 위치 찾기
- getCurrentPosition(location)
- getCurrentPosition(location, error)
- getCurrentPosition(location, error, configuration)
- watchPosition(location, error, configuration)
- 구글 지도 사용
- 定石: 지오로케이션 API
- 메소드
- 객체
- 위치 찾기
- 10장 웹 스토리지 API
- 두 가지 스토리지 시스템
- sessionStorage
- 데이터 스토리지 구현
- 데이터 생성
- 데이터 조회
- 데이터 삭제
- localStorage
- 스토리지 이벤트
- 스토리지 공간
- 定石: 웹 스토리지 API
- 스토리지 형태
- 메소드
- 프로퍼티
- 이벤트
- 11장 IndexedDB API
- 로우레벨 API
- 데이터베이스
- 객체와 객체 저장소
- 인덱스
- 트랜잭션
- 객체 저장소 메소드
- IndexedDB 구현
- 템플릿
- 데이터베이스 열기
- 데이터베이스 버전
- 객체 저장소와 인덱스
- 객체 추가
- 객체 조회
- 코드 종료와 테스트
- 데이터 목록
- 커서
- 순서 변경
- 데이터 삭제
- 데이터 검색
- 定石: IndexedDB API
- 환경 인터페이스(IDBEnvironment와 IDBFactory)
- 데이터베이스 인터페이스(IDBDatabase)
- 객체 저장소 인터페이스(IDBObjectStore)
- 커서 인터페이스(IDBCursor)
- 트랜잭션 인터페이스(IDBTransaction)
- 범위 인터페이스(IDBKeyRangeConstructors)
- 에러 인터페이스(IDBDatabaseException)
- 로우레벨 API
- 12장 파일 API
- 파일 스토리지
- 사용자의 파일 처리
- 템플릿
- 파일 읽기
- 파일 프로퍼티
- 블롭
- 이벤트
- 파일 생성
- 템플릿
- 하드 드라이브
- 파일 생성
- 디렉터리 생성
- 파일 목록
- 파일 처리
- 이동
- 복사
- 삭제
- 파일 콘텐츠
- 콘텐츠 작성
- 콘텐츠 추가
- 콘텐츠 읽기
- 실제 파일 시스템
- 定石: 파일 API
- Blob 인터페이스(파일 API)
- File 인터페이스(파일 API)
- FileReader 인터페이스(파일 API)
- LocalFileSystem 인터페이스(파일 API: 디렉터리와 시스템)
- FileSystem 인터페이스(파일 API: 디렉터리와 시스템)
- Entry 인터페이스(파일 API: 디렉터리와 시스템)
- DirectoryEntry 인터페이스(파일 API: 디렉터리와 시스템)
- DirectoryReader 인터페이스(파일 API: 디렉터리와 시스템)
- FileEntry 인터페이스(파일 API: 디렉터리와 시스템)
- BlobBuilder 인터페이스(파일 API: 라이터)
- FileWriter 인터페이스(파일 API: 라이터)
- FileError 인터페이스(파일 API와 확장)
- 13장 커뮤니케이션 API
- 에이잭스 레벨 2
- 데이터 조회
- 응답 프로퍼티
- 이벤트
- 데이터 전송
- 크로스 근원 요청
- 파일 업로드
- 실제 애플리케이션
- 크로스 도큐먼트 메시징
- 생성자
- 메시지 이벤트와 프로퍼티
- 메시지 전송
- 필터와 크로스 근원
- 웹 소켓
- WS 서버 설정
- 생성자
- 메소드
- 프로퍼티
- 이벤트
- 템플릿
- 통신 시작
- 전체 애플리케이션
- 定石: 커뮤니케이션 API
- XMLHttpRequest 레벨 2
- 웹 메시징 API
- 웹소켓 API
- 에이잭스 레벨 2
- 14장 웹 워커 API
- 고난이도 작업
- 워커 생성
- 메시지 송수신
- 에러 검출
- 워커 종료
- 동기식 API
- 스크립트 임포트
- 공유 워커
- 定石: 웹 워커 API
- 워커
- 전용 워커
- 공유 워커
- 고난이도 작업
- 15장 히스토리 API
- 히스토리 인터페이스
- 웹 내비게이션
- 새로운 메소드
- 가짜 URL
- 추적
- 실전 예제
- 定石: 히스토리 API
- 히스토리 인터페이스
- 16장 오프라인 API
- 캐시 매니페스트
- 매니페스트 파일
- 카테고리
- 주석
- 매니페스트 파일 사용
- 오프라인 API
- 에러
- 온라인과 오프라인
- 캐시 처리
- 진행
- 캐시 업데이트
- 定石: 오프라인 API
- 매니페스트 파일
- 프로퍼티
- 이벤트
- 메소드
- 캐시 매니페스트
- 맺음말
- 세계를 위한 작업
- 대안
- 모더나이저
- 라이브러리
- 구글 크롬 프레임
- 클라우드를 위한 작업
- 세계를 위한 작업
도서 오류 신고
정오표
정오표
2014.12.4 수정사항
p.13 : 밑에서 7행
범용 선택자 * ==> 범용 선택자p.331 : 위에서 7행
errorㅡ ==> errorp.379 : 밑에서 4행
값0 ==> 값 0p.395 : 참고 박스 안 3행
webkitRequestFileSystem(0000000000000000) => webkitRequestFileSystem()p.425 : 위에서 4행
값1 => 값 1p.510 : 그림 16-3 제목
그림 16-3 캐시의 크기 제한 ==> 그림 16-3 프로그래스바 작업 확인
[p.57 : 마지막행]
과련성 높은 정보와
->
관련성 높은 정보와