요즘 HTML5라는 말이 화제가 되고 있습니다. HTML5에 대해 관심을 가지고 살펴봤지만 제대로 이해한 것 같지 않다는 의견도 종종 듣습니다. HTML5가 이해하기 어려운 이유는 HTML5가 HTML 태그만을 가리키는 것이 아니라 CSS3이나 JavaScript를 포함한 종합적인 기술 체계를 가리키고 있기 때문입니다.
이 책은 위와 같은 내용을 고려하여 HTML5의 기술 체계를 한눈에 살펴볼 수 있도록 구성하였습니다. 특히 후반부의 내용은 난이도가 높은데, JavaScript에 익숙하지 않은 분도 일단 4장까지는 읽어보시기 바랍니다.
■ 저자/역자 소개
저자 ANK Co., Ltd. (http://www.ank.co.jp) 소프트웨어 개발에서 Web 사이트 구축․디자인, 서적 집필까지 폭넓게 일을 하는 회사. 홈페이지 사전, HTML 태그 사전 등 다수의 서적 발행
<번역 도서> ․ 성공과 실패를 결정하는 1%의 Windows 구조와 원리 ․ 마스터링 Visual C# .NET ․ Visual Basic .NET 외 다수
■ 역자의 말 현대와 같은 인터넷 시대에는 기업 사이트 외에도 개인 홈페이지 블로그 등을 갖고 있는 경우가 많습니다. 특히 스마트폰이 널리 보급되어 언제 어디서나 인터넷을 이용할 수 있는 요즘은 웹 페이지에 대한 수요가 정말 많습니다. 이러한 웹 페이지는 모두 HTML 문서로 되어 있습니다. 예전에는 작성자가 태그를 하나하나 입력하면서 웹 페이지를 만들었지만, 요즘에는 웹 페이지 작성 툴이 많이 있어서 HTML 태그에 신경쓰지 않고도 어느 정도 고난이도의 웹 페이지를 만들 수도 있습니다. 하지만 다른 웹 페이지와 구별되는 자신만의 오리지널 페이지를 만들거나 미세한 조정을 하기 위해서는 태그에 대한 지식이 필요합니다. 그런데 최근 HTML5가 주목을 받고 있습니다. HTML5는 단순히 HTML 태그만이 아니라 CSS3과 JavaScript를 종합적으로 포함한 기술로, 지금까지는 애드온 등에 의존해 왔던 많은 다양한 기능들이 HTML5로 가능해졌습니다. “HTML5가 보이는 그림책”은 HTML의 기본적인 내용과 더불어 HTML5에서 새로 도입된 기술 등을 한눈에 파악할 수 있도록 구성되어 있습니다. 각 기술에 대한 개요뿐만 아니라 관련 태그나 API를 사용하는 예제 프로그램도 풍부하므로 HTML5 전반에 관해 이해하고 이용해보고 싶은 분들에게 많은 도움이 될 것입니다.
■ 이 책의 구성
○ 꼭 알아야 할 Key Point 각 장에서 배워야 할 중요한 개념들을 미리 예습합니다. 각 개념들이 가지고 있는 관련성과 각 장에서 설명하는 HTML5의 기본 구조를 한눈에 파악할 수 있도록 안내합니다. ○ 본문 본문은 펼친 면에 하나의 주제만을 다루어 이미지가 산만하게 흩어지지 않도록 하였고, 나중에 필요한 부분을 찾을 때도 효과적으로 사용할 수 있도록 배려했습니다. ○ 예제 프로그램 본문에는 웹 페이지와 웹 애플리케이션을 작성하는 예를 싣고 있습니다. 비교적 간단하게 작성할 수 있으므로 한번 따라해보기 바랍니다. ○ 도전! HTML5 어떤 학습이든 여러 번의 반복과 확인을 통해야만 자기 지식으로 만들 수 있습니다. 도전! HTML5에서는 각 장에서 배운 내용을 바탕으로 연습 문제를 풀어 보면서 웹 페이지 및 웹 애플리케이션 작성에 관한 지식을 익힐 수 있습니다. ○ 알아 두면 도움이 되는 HTML5 상식 HTML5의 기본 개념을 공부하는 것도 중요하지만, 본문에서 다루지 못했던 HTML5에 관한 내용을 쉬어가면서 배워도 좋을 것입니다. ‘알아 두면 도움이 되는 HTML5 상식’은 CSS와 JavaScript를 비롯한 HTML5에 대한 전반적인 지식을 한층 더 높여줍니다. ○ 부록 부록에는 웹 서버 소프트웨어인 Apache HTTP Service와 Microsoft 사의 IIS(Internet Information Services)를 사용하여 웹 서버를 구축하는 방법을 설명해 놓았습니다.
■ 추천사 웹에 관련된 기술은 계속 발전하고 있기 때문에 전체를 파악하기란 결코 쉽지 않다. 하지만 개발자나 디자이너로서 성장하기 위해서는 이 기술이 반드시 필요하다. 이번에 검토한 성안당의 “HTML5가 보이는 그림책”은 웹에 관련된 대부분의 기술들을 다루고 있을 뿐만 아니라 꼭 필요한 개념을 빠짐없이, 정확하게 설명하고 있어서 웹에 대해 알고자 하는 독자들에게 가장 적합한 책이라고 생각한다. 다양한 주제와 정확한 개념의 전달 그리고 복잡하지 않은 설명은 웹에 대해 막연한 두려움을 갖고 있는 독자들에게 좋은 벗이 되어줄 것이라 확신한다. 조민호/컴퓨터 공학 박사
개발자로서 웹에 대해 정확히 파악하려면 HTML/CSS를 기반으로 한 JavaScript 개념이 반드시 필요하다. 이 책은 HTML/CSS에 대한 내용이 그림으로 표현되어 있고, HTML5/CSS3에서 개선된 내용 또한 간단명료하게 정리되어 있다. 이 책의 가장 큰 장점은 간단하고, 정확하며, 재미있는 설명이라고 생각한다. 검토하는 과정에서 처음부터 끝까지 단숨에 읽을 정도로 강한 흡인력을 갖고 있다는 점에도 높은 점수를 주고 싶다. 만약, 웹에 대해 알고 싶다거나 개발자로서 역량을 키우고 싶다면 이 책을 반드시 읽어보길 바란다. 김남숙 과장/리얼플레이어 코리아
시중에 나와 있는 대부분의 웹 관련 서적은 너무 전문적이거나 불필요한 내용이 많아서 처음 공부하는 사람들에게 부담이 되는 것이 사실이다. “HTML5가 보이는 그림책”은 꼭 필요하고 정확한 개념만을 정리해서 제공하는 점이 무척 마음에 들었고, 실무에서도 이 정도의 기능만 알고 있으면 큰 문제없이 개발에 임할 수 있을 것이라 생각한다. 특히 Canvas와 CSS 부분에서 그래픽에 대한 개념을 이미지로 설명하고 있는 점이 정말 마음에 든다. 김동언/프리랜스 개발자(웹 분야)
프로젝트 관리를 포함한 업무를 수행하면서 웹에 관련된 다양한 기술의 정확한 의미와 적용 방법 등에 대해 궁금한 점이 많았는데, 이번에 “HTML5가 보이는 그림책”을 검토하면서 이러한 궁금증을 대부분 해소할 수 있었다. 또한 이미지를 중심으로 쉽게 설명되어 있어서 부담 없이 읽을 수 있었고, 실제 개발 과정에 대한 자세한 설명도 곁들여 있어서 읽는 내내 시간 가는 줄 모를 정도였다. 만약 누군가 나에게 웹에 관련된 책을 추천해 달라고 한다면, 주저 없이 이 책을 추천할 것이다. 조형진 차장/INSoft㈜
목차
■ 목차
제0장 HTML5를 시작하기 전에 인터넷과 WWW 웹 서버 동적 웹 페이지 클라이언트 사이드 스크립트 인터넷의 변화 HTML5로 할 수 있는 일 웹 브라우저의 종류
제1장 HTML Key Point HTML의 역사 HTML의 버전 Lesson 01 HTML이란? Lesson 02 웹 서버에 업로드하기 Lesson 03 기본 태그 Lesson 04 테이블 Lesson 05 폼 Lesson 06 폼 요소 (1) Lesson 07 폼 요소 (2) Lesson 08 요소의 지정 Lesson 09 메타 요소 Lesson 10 XHTML 예제 프로그램 앙케이트 설문 프로그램 << Exercise 도전! HTML5 HTML5 상식 리퀘스트
제3장 HTML5와 CSS3의 개요 Key Point HTML5의 등장 HTML5의 현재 상태 Lesson 01 HTML5란? Lesson 02 HTML5의 특징 Lesson 03 HTML5의 새로운 태그 (1) Lesson 04 HTML5의 새로운 태그 (2) Lesson 05 의미가 바뀐 태그 Lesson 06 CSS3의 특징 Lesson 07 벤더 프리픽스(Vendor Prefix) Lesson 08 CSS3의 새로운 스타일 (1) Lesson 09 CSS3의 새로운 스타일 (2) Lesson 10 CSS3의 새로운 스타일 (3) Lesson 11 CSS3를 사용한 애니메이션 Lesson 12 CSS3의 그러데이션 Lesson 13 플렉서블 박스 Lesson 14 글꼴 다운로드 예제 프로그램 색상을 바꾸는 프로그램 << Exercise 도전! HTML5 HTML5 상식 콘텐츠 모델
제4장 HTML5의 전체상 Key Point HTML5로 할 수 있는 일 웹 애플리케이션 플랫폼 Lesson 01 태그의 의미 부여 Lesson 02 멀티미디어 지원 Lesson 03 드래그 앤 드롭 지원 Lesson 04 GPS와의 연동 Lesson 05 그래픽 Lesson 06 스토리지와 파일 Lesson 07 백그라운드와 오프라인 Lesson 08 HTML5의 통신 관련 기술 << Exercise 도전! HTML5 HTML5 상식 Ajax
제5장 Canvas Key Point Canvas에 대해 Canvas의 가능성 Lesson 01 Canvas를 사용한 그림 그리기 Lesson 02 도형 그리기 (1) Lesson 03 도형 그리기 (2) Lesson 04 도형 그리기 (3) Lesson 05 도형 그리기 (4) Lesson 06 타이머를 사용한 예 Lesson 07 이벤트를 사용한 예 Lesson 08 이미지 표시 예제 프로그램 그림 그리는 프로그램 << Exercise 도전! HTML5 HTML5 상식 Flash와의 관계
제6장 스토리지와 파일 Key Point 웹 브라우저에 값을 저장하기 데이터를 저장하는 몇 가지 방법 Lesson 01 Web Storage (1) Lesson 02 Web Storage (2) Lesson 03 Indexed Database API (1) Lesson 04 Indexed Database API (2) Lesson 05 File API (1) Lesson 06 File API (2) << Exercise 도전! HTML5 HTML5 상식 JavaScript의 문법 (1)
제7장 백그라운드와 오프라인 Key Point 시간이 걸리는 처리를 실행하기 모바일에서의 편리성 Lesson 01 Web Workers (1) Lesson 02 Web Workers (2) Lesson 03 ApplicationCache (1) Lesson 04 ApplicationCache (2) << Exercise 도전! HTML5 HTML5 상식 JavaScript의 문법 (2)
제8장 통신 관련 기술 Key Point JavaScript를 사용한 통신 서버의 데이터 송신 Lesson 01 Web Messaging (1) Lesson 02 Web Messaging (2) Lesson 03 Server-Sent Events (1) Lesson 04 Server-Sent Events (2) Lesson 05 WebSocket (1) Lesson 06 WebSocket (2) << Exercise 도전! HTML5 HTML5 상식 JavaScript의 디버그
