HTML5 CSS3 자바스크립트의 정석(에이콘 웹 프로페셔널 시리즈 48)

HTML5, CSS3, 자바스크립트를 활용한 웹 프로그래밍의 정도(正道)를 설명하는 아주 좋은 참고서다. HTML5의 문서구조, CSS3 스타일과 프로퍼티, 자바스크립트에 대한 기본적인 설명을 시작으로 비디오와 오디오, 폼, 캔버스, 드래그앤드롭, 지오로케이션, 웹 스토리지, IndexedDB, 파일, 커뮤니케이션, 웹 워커, 히스토리, 오프라인과 같은 필수 API에 대해 실전 예제를 중심으로 총 16장에 걸쳐 단계별로 명쾌하게 풀어간다. 이 책으로 HTML5의 개념과 실전 프로그래밍의 정석을 함께 확인해보자.



우리는 혁명에 직면해 있다. 웹은 메인 개발 플랫폼인 동시에 정보와 소프트웨어에 대한 주요 기반이 되고 있다. 최근 몇 년 동안 모바일 기기는 인터넷 애플리케이션을 가능한 수단에서 필수 요소로 바꿔 놓았다. 현재 웹에서 독립적으로 동작하는 컴퓨터가 개발 중이며 출시도 목전에 두고 있다. 웹에서 동작하는 소프트웨어는 그 어느 때보다 더 정교해지고 있으며, 최종적으로 데스크톱 애플리케이션을 대체하고 있다. 변화의 수준은 실험적이고 급진적이며 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는 분명히 이러한 방식을 이끌고 있다.



★ 옮긴이의 말 ★



HTML5는 W3C에서 만든 차세대 웹 표준으로 애플, 구글, 모질라, 오페라 그리고 마이크로소프트 등의 모든 벤더가 참여하고 있습니다. HTML5에 이와 같은 주요 선도기업들이 앞다퉈 참여하는 이유는 분명 HTML5에 그 무엇인가 '매력'이 있어서일 겁니다.



예전에 안철수 교수님이 '무릎팍도사'라는 TV 프로그램에 출연해 자신의 성공 요인은 '운이란 기회가 준비를 만난 것'이라고 이야기했습니다. 아마도 준비된 HTML5가 모바일이라는 기회를 만나 '운' 좋은 성공을 거둔 스토리가 이와 비슷하지 않을까요?



HTML5는 더 이상 화면만 표현하는 '수단'이 아닙니다. HTML5는 이전 버전의 개선이 아니라 새로운 '플랫폼'입니다. 기존의 HTML이 '표현'에 집중한 '수동적인 수단'이었다면 HTML5는 웹의 '기반'이 되는 '능동적인 도구'입니다. HTML5가 각광받는 이유도 과거의 한계를 뛰어넘은 이와 같은 '혁신'에 있다고 생각됩니다.



이 책은 HTML5와 관련된 주요 핵심 주제를 총 16장으로 구성했으며 각 장은 거의 독립적입니다. 처음에는 간단한 기본내용으로 시작해 그 예제를 점진적으로 완성해 나가는 방식이며 각 장이 끝나면 전체적인 내용을 한눈에 파악할 수 있게 구성했습니다. 결국 각 장은 기승전결의 스토리가 있는 단편 드라마와 같습니다. 따라서 처음에는 이 책을 가벼운 마음으로 읽으면서 전체 윤곽을 파악하면 됩니다. 그런 다음 각 예제를 자세히 살펴보고 실행해보면 '감'을 잡게 될 겁니다.



이 책과 더불어 이 책에 대한 홈페이지도 매우 알차게 구성돼 있습니다. 홈페이지를 보면 저자의 섬세함과 전문적인 지식이 이 책이 탄생한 원동력이라 확신하게 됩니다. 이제 전체 '숲'을 보았고, 코드라는 '나무'도 살펴봤다면 한 단계 더 나아가 이 책의 홈페이지를 꼭 방문해 보시기 바랍니다. 홈페이지(그림 1 참조)의 우측 상단에 있는 'Links' 메뉴를 클릭하시면 각 장과 관련 있는 주요 사이트의 링크가 보입니다(그림 2 참조). 이 링크의 내용을 확인하고 이해하게 되면 드디어 그 '숲'에 있는 '나무' 외에도 아름다운 '꽃'도 보일 겁니다.



이 책의 소스코드는 총 세 가지 형태로 제공합니다. 첫 번째는 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 파일입니다. 전체 소스코드는 에이콘 출판사의 도서정보 페이지에서 zip 파일로 제공합니다.



HTML5는 현재도 진화 중인 웹 표준입니다. 따라서 크로스 브라우징(cross browsing)을 가능하게 하려면 각 브라우저에서 HTML5의 지원 여부를 반드시 확인해 봐야 합니다. 이를 확인해 볼 수 있는 가장 좋은 사이트는 htlm5test.com입니다. 이 사이트가 의미 있는 것은 HTML5의 요소나 폼 등의 기능에 대한 지원 여부를 한눈에 파악하고 확인해 볼 수 있다는 점입니다. 참고로 이 책의 소스코드에 대한 화면 캡처는 맥 OS X 10.7.4의 사파리 5.1.7을 기준으로 작업했으며 사파리가 지원하지 않는 일부 기능에 대해선 크롬이나 파이어폭스의 최신 버전 중에 지원하는 브라우저에서 작업했습니다.



HTML5의 세계로 뛰어든 독자 여러분의 열정과 도전에 경의를 표합니다. 이 책이 독자 여러분의 노력에 좋은 길라잡이가 되길 바라며, 감사의 말과 함께 건승을 빕니다.

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〉 요소

___오디오 플레이어 프로그래밍

___定石: 비디오와 오디오

______요소

______속성

______비디오 속성

______이벤트

______메소드

______프로퍼티



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

______타입

______속성

______요소

______메소드

______이벤트

______상태



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)



12장 파일 API

___파일 스토리지

___사용자의 파일 처리

______템플릿

______파일 읽기

______파일 프로퍼티

______블롭

______이벤트

___파일 생성

______템플릿

______하드 드라이브

______파일 생성

______디렉터리 생성

______파일 목록

______파일 처리

______이동

______복사

______삭제

___파일 콘텐츠

______콘텐츠 작성

______콘텐츠 추가

______콘텐츠 읽기

___실제 파일 시스템

___定石: 파일 API

______Blob 인터페이스(파일 API)

______File 인터페이스(파일 API)

______FileReader 인터페이스(파일 API)

______LocalFileSystem 인터페이스(파일 API: 디렉터리와 시스템)

______FileSystem 인터페이스(파일 API: 디렉터리와 시스템)

______Entry 인터페이스(파일 API: 디렉터리와 시스템)

______DirectoryEntry 인터페이스(파일 API: 디렉터리와 시스템)

______DirectoryRead___er 인터페이스(파일 API: 디렉터리와 시스템)

______FileEntry 인터페이스(파일 API: 디렉터리와 시스템)

______BlobBuilder 인터페이스(파일 API: 라이터)

______FileWriter 인터페이스(파일 API: 라이터)

______FileError 인터페이스(파일 API와 확장)



13장 커뮤니케이션 API

___에이잭스 레벨 2

______데이터 조회

______응답 프로퍼티

______이벤트

______데이터 전송

______크로스 근원 요청

______파일 업로드

______실제 애플리케이션

___크로스 도큐먼트 메시징

______생성자

______메시지 이벤트와 프로퍼티

______메시지 전송

______필터와 크로스 근원

___웹 소켓

______WS 서버 설정

______생성자

______메소드

______프로퍼티

______이벤트

______템플릿

______통신 시작

______전체 애플리케이션

___定石: 커뮤니케이션 API

______XMLHttpRequest 레벨 2

______웹 메시징 API

______웹소켓 API



14장 웹 워커 API

___고난이도 작업

______워커 생성

______메시지 송수신

______에러 검출

______워커 종료

______동기식 API

______스크립트 임포트

______공유 워커

___定石: 웹 워커 API

______워커

______전용 워커

______공유 워커



15장 히스토리 API

___히스토리 인터페이스

______웹 내비게이션

______새로운 메소드

______가짜 URL

______추적

______실전 예제

___定石: 히스토리 API



16장 오프라인 API

___캐시 매니페스트

______매니페스트 파일

______카테고리

______주석

______매니페스트 파일 사용

___오프라인 API

______에러

______온라인과 오프라인

______캐시 처리

______진행

______캐시 업데이트

___定石: 오프라인 API

______매니페스트 파일

______프로퍼티

______이벤트

______메소드



맺음말

___세계를 위한 작업

______대안

______모더나이저

______라이브러리

______구글 크롬 프레임

___클라우드를 위한 작업

___최종 권고

J. D. 고샤 저자 J.D. 고샤(J.D. Gauchat)는 프리랜서 웹 프로그래머이자 세계 시장에서 기회를 발굴하기 위해 최선을 다하는 기업가다. 지난 10년간 다수의 프로젝트에 참여했으며 HTML, CSS, PHP, 자바스크립트에 관한 기사를 기고했다. 현재는 최신 기술로 구현한 웹과 웹 애플리케이션 개발에 주력하고 있다.