HTML5 CSS3 실전에서는 이렇게 쓴다(위키북스 오픈소스 웹 시리즈 36)

HTML5 & CSS3, 이제는 실전이다!



책 제목인 『HTML5 & CSS3 실전에서는 이렇게 쓴다!』에서 느낄 수 있듯이 이 책은 웹 프로그래머와 디자이너가 실제로 사이트를 제작하면서 궁금해 하거나 참고할 수 있는 HTML5와 CSS3와 관련된 내용을 기본 뼈대로 삼는다. 이제 막 초보 딱지를 떼고 HTML과 CSS에 대한 개념을 익힌 프로그래머뿐 아니라 HTML5와 CSS3의 최신 기술을 직접 확인해보고 싶은 중급 프로그래머에게 이 책의 군더더기 없는 설명이 도움될 것이다.



이 책에서는 'HTML5 헤럴드'라는 구식 신문(www.thehtml5herald.com에 실제로 구현돼 있다) 웹 사이트를 HTML5와 CSS3의 새로운 기술을 이용해 실제로 하나씩 만들어 가는 식으로 구성돼 있으며, 새로운 기술을 설명할 때마다 다양한 브라우저에서의 지원 여부와 하위호환성에 대한 상세한 설명을 덧붙여 프로그래머가 새로운 기술을 자유롭게 적용할 수 있게 배려한다.



HTML5와 CSS3의 새로운 기능 외에도 Modernizr, WAI-ARAI 및 마이크로데이터와 같이 HTML5와 함께 쓰이는 필수 기술은 부록에서 자세히 다루고 있으며, 새로운 기능에 대해 좀 더 심도 있게 살펴보고 싶은 독자를 위해 꼼꼼하게 준비한 참고자료도 제공한다.



[이 책의 구성]



이 책은 11개의 장과 세 개의 부록으로 구성돼 있다. 대부분의 장은 서로 이어져 있어 순서대로 읽는다면 아마 효과가 가장 크겠지만 특정 주제를 살펴볼 필요가 있다면 건너뛰면서 읽어도 무방하다.



ㆍ 1장: HTML5와 CSS3 소개



1장에서는 실습으로 들어가기에 앞서 지금부터라도 HTML5와 CSS3를 사용해야 할 몇 가지 이유와 함께 HTML5와 CSS3의 역사를 살펴본다. 또한 브라우저 지원이라는 측면에서 현재 상황을 살펴보며, 지금 바로 사용해도 좋은 새로운 기술(현명하게 이용하기만 한다면)을 논한다.



ㆍ 2장: 마크업, HTML5 스타일



2장에서는 HTML5에서 등장하는 새로운 구조적 요소 및 의미적 요소를 설명한다. 또한 이 책의 나머지 부분에 걸쳐 계속 다루게 될 'HTML5 헤럴드'라는 실습 사이트도 소개한다. div가 지루하다면? 다행히도 이제 HTML5에서는 다양한 대안을 제공한다. 바로 article, section, nav, footer, aside, header가 여기에 해당한다.



ㆍ 3장: HTML5의 의미적 표현 더 알아보기



2장에 이어 3장에서는 HTML5에서 문서의 아우트라인을 구성하는 새로운 방법을 알아본다. 그러고 나서 마크업을 좀 더 풍부하게 표현해줄 다른 의미적 요소를 살펴본다.



ㆍ 4장: HTML5 폼



HTML5에서 가장 유용하고 바로 적용할 수 있는 기능으로 폼이 있다. 현재 여러 브라우저에서는 이메일 주소나 URL과 같은 유형에 대해 내장 유효성 검사를 지원하며, 어떤 브라우저는 날짜 선택기, 슬라이더, 스피너 박스까지도 지원한다. 이러한 기능은 폼 코드 작성을 즐겁게 만들어준다! 4장에서는 HTML5 폼을 작성할 때 알아야 할 모든 사항을 다루며, 버전이 낮은 브라우저에 대비한 스크립트도 제공한다.



ㆍ 5장: HTML5 오디오와 비디오



종종 HTML5는 플래시가 차지하고 있던 온라인 멀티미디어 콘텐츠 왕좌의 대항마로 내세워지곤 한다. 새로운 audio와 video 요소가 바로 그 이유다. audio와 video 요소는 플래시와 같은 서드파티 플러그인에 의존하지 않고 스크립트로 제어 가능한 내장 미디어 플레이어를 제공한다. 5장에서는 이러한 새로운 요소의 사용과 관련된 자세한 내용을 속속들이 살펴본다.



ㆍ 6장: CSS3 소개



이제 HTML5에 관해 모두 살펴봤으므로 가까운 친척인 CSS3로 옮겨갈 차례다. 6장에서는 유례가 없을 정도의 유연한 방법으로 페이지 내의 요소를 선택하는 새로운 셀렉터를 살펴보는 것으로 CSS3로의 여행을 시작한다. 그러고 나서 CSS3에서 투명도를 비롯해 색상을 명시하는 새로운 방법을 살펴본다. 그리고 일부 저비용 고효율 기능으로 6장을 마무리한다. 바로 최소한의 작업으로 웹 사이트에 추가할 수 있는 멋진 CSS3 기능으로, 텍스트 그림자 효과, 그림자 효과 및 둥근 모서리가 여기에 해당한다.



ㆍ 7장: CSS3 그라디언트와 다중 배경



마지막으로 그라디언트나 배경 이미지가 없는 사이트를 작업했던 것이 언제였는가? 대역폭 제한 내에서 완벽한 배경 그라디언트와 이미지를 생성하려고 애쓰면서 포토샵과 씨름하는 데 많은 시간을 보냈던 개발자들에게 CSS3는 고대하던 기능을 제공한다. 이제 이미지 없이도 CSS에서 바로 선형 또는 방사형 그라디언트를 지정할 수 있고, 한 요소에 배경 이미지를 몇 개라도 줄 수 있다. 이제 어쩔 수 없이 이용하고 있던 모든 여분의 div를 버릴 때가 된 것이다.



ㆍ 8장: CSS3의 변형과 전환



애니메이션은 오랫동안 자바스크립트의 영역으로 알려져 왔지만 CSS3를 이용하면 브라우저에게 무거운 짐을 어느 정도 넘겨줄 수가 있다. 변형을 이용하면 요소를 회전하고, 뒤집고, 비틀 수 있을 뿐 아니라 요소를 던져버릴 수도 있다. 전환은 페이지에서 보이는 갑작스런 상태 변화의 중간에 미묘한 변화를 추가해준다. 8장에서는 가까운 미래를 내다보며 마무리한다. 즉, CSS 키프레임 애니메이션은 여전히 완벽하게 지원되지 않고 있지만 여러분도 이러한 애니메이션이 굉장히 매력적이라는 데 동의하게 될 것이다.



ㆍ 9장: 임베디드 폰트와 다단 레이아웃



Arial이나 Verdana 중 어떤 폰트를 선호하는가? Georgia 혹은 Times는? 이러한 폰트 중 어떤 폰트도 좋아하지 않는다면? 9장에서는 과거의 "웹-안전" 폰트를 넘어 방문자가 스타일시트 및 이미지와 함께 내려받을 수 있는 임의의 폰트를 페이지에 바로 삽입하는 방법을 살펴본다. 또한 추가적인 마크업이나 사용하기가 꺼려지는 float를 이용하지 않고도 콘텐츠를 다중 칼럼에 배치하는 새로운 CSS 기능을 살펴본다.



ㆍ 10장: 위치 정보, 오프라인 웹 앱 및 웹 스토리지



최신 브라우저에는 다양한 새 표준 자바스크립트 API가 탑재돼 있다. 이러한 API 가운데 상당수는 특별히 모바일 브라우저에 적합하도록 만들어졌지만 여전히 데스크톱 사용자에게도 혜택을 준다. 10장에서는 가장 흥미로운 세 가지 내용을 살펴본다. 바로 위치 정보와 오프라인 웹 앱, 그리고 웹 스토리지다. 또한 세부적으로 다루지는 않겠지만 추가적으로 일부 API에 대해서도 간단히 살펴보고(지원이 미비하거나 제한된 경우에만 사용되기 때문에) 좀 더 깊게 살펴볼 수 있게 참고자료도 제공하겠다.



ㆍ 11장: 캔버스, SVG와 드래그 앤 드롭



이 책의 마지막 장에서는 그래픽을 그리고 표시하는 데 사용하는, 서로 약간은 경쟁적인 두 가지 기술에 할애했다. 캔버스는 HTML5에서 새로운 기술이며 픽셀 단위로 표현되는 공간과 거기에 다양한 도형을 그리는 자바스크립트 API를 제공한다. 한편 SVG는 나온 지 몇 년 됐고 현재 브라우저에서 상당히 높은 수준으로 지원되고 있어 점점 더 실용적인 대안이 되고 있다. 마지막으로 한 가지 더 새로운 자바스크립트 API인 드래그 앤 드롭 관련 API를 다루며, 여기엔 드래그 앤 드롭 인터페이스에 대한 지원 기능이 내장돼 있다.



ㆍ 부록 A: Modernizr



HTML5 전문가라면 누구나 사용하는 핵심 도구인 Modernizr는 모든 HTML5와 CSS3의 기능에 대한 브라우저의 지원 상태를 알아내는 짧고도 매우 실용적인 자바스크립트 라이브러리다. Modernizr를 이용하면 사이트에 선별적으로 스타일을 맞추거나 대비책을 적용할 수 있다. Modernizr는 이 책 전반에 걸쳐 이용하지만 이 부록에는 Modernizr를 사용하는 기본 지침을 수록했다. 이로써 한곳에 레퍼런스를 구비해 두고, 다른 장에서는 HTML5와 CSS3에 대한 핵심 내용에만 집중할 수 있다.



ㆍ 부록 B: WAI-ARIA



HTML5와 함께 자주 언급되는 별도의 규격인 WAI-ARIA는 스크린리더와 같은 보조 기술을 이용하는 사용자도 세련된 웹 애플리케이션에 접근하는 데 도움을 받을 수 있는 최신 도구 중 하나다. 물론 WAI-ARIA에 대한 내용만으로도 책 한 권을 모두 채울 수 있겠지만 이 책에서는 WAI-ARIA에 대해 간략히 소개하고 더 많은 정보를 얻을 수 있는 곳을 소개하는 것만으로도 충분히 도움될 거라 생각한다.



ㆍ 부록 C: 마이크로데이터



마이크로데이터는 기계가 이해할 수 있는 라벨을 이용해 마크업에 설명을 다는 것과 관련된 HTML5 규격의 일부다. 아직 다소 유동적인 상황이긴 하지만 마이크로데이터는 여러분이 알아둘 만한 가치가 있다고 생각한다.



- 서문 중에서



<출판사 리뷰>



『HTML5 & CSS3 실전에서는 이렇게 쓴다!』는 차세대 웹 개발 기술에 대한 완벽한 소개서입니다. 쉽게 따라 할 수 있는 이 책에는 HTML5 및 CCS3를 바로 실무에 적용하는 데 필요한 모든 내용이 담겨 있습니다. 아울러 HTML5에서 이용할 수 있는 새로운 의미적 요소뿐 아니라 복잡한 방법 대신 CSS3를 이용해 화려한 웹사이트를 제작하는 방법을 완벽하게 습득할 수 있습니다.



★ 이 책에서 다루는 내용

ㆍ 자체 HTML5 video를 이용해 귀찮은 플래시를 없애는 방법

ㆍ @font-face를 이용해 메시지의 의미를 부각시키는 폰트 타입 설정

ㆍ 사용자가 좋아할 만한 지능적이고 자체 유효성 검사를 실시하는 웹 폼 제작

ㆍ 모바일 환경에서 빛을 발하는 최신 웹 앱 제작

ㆍ SVG와 캔버스를 이용한 동적이고 효과적인 그래픽의 실시간 생성

ㆍ 새로운 API를 이용한 위치 정보와 오프라인 기능 추가

01장 HTML5와 CSS3 소개



HTML5란?

HTML5가 걸어온 길

- 진정한 HTML5 규격이 정해질 수 있을까?

왜 HTML5에 관심을 가져야 할까?

CSS3란?

왜 CSS3에 관심을 가져야 할까?

'실전'이란 무엇을 의미하는가?

- 다양한 브라우저 시장

- 성장하는 모바일 시장

실전 내용으로 들어가면서



02장 마크업, HTML5 스타일



HTML5 헤럴드 소개

기본 HTML5 템플릿

- 독타입

- html 요소

- head 요소

- 대등한 상황으로 만들기

- 나머지는 알고 있는 그대로다

HTML5 FAQ

- 왜 이러한 변경사항이 이전 브라우저에서도 여전히 작동하는 걸까?

- 모든 태그를 닫지 말아야 할까?

- 다른 XHTML 기반 문법 규칙은 어떨까?

페이지의 구조 정의

- header 요소

- section 요소

- article 요소

- nav 요소

- aside 요소

- footer 요소

HTML5 헤럴드 구조화

정리



03장 HTML5의 의미적 표현 더 알아보기



콘텐츠 타입의 새로운 측면

문서의 개요

뉴스 속보

- hgroup 요소

새로운 요소 더 알아보기

- figure와 figcaption 요소

- mark 요소

- progress와 meter 요소

- time 요소

기존 기능의 변화

- '폐기된'이라는 용어는 폐기됐다

- Link 내의 블록 요소

- 굵은 글씨체

- 이탤릭체

- 큰 글씨와 작은 글씨

- 기다려왔던 cite 요소

- (정의가 아닌) 설명 목록

다른 새로운 요소와 기능

- details 요소

- 맞춤형 순서 있는 목록

- 범위가 지정된 스타일

- 스크립트를 위한 async 속성

HTML5 문서의 유효성 검사

요약



04장 HTML5 폼



툴박스의 믿을 만한 도구들

HTML5 폼 속성

- required 속성

- placeholder 속성

- pattern 속성

- disabled 속성

- readonly 속성

- multiple 속성

- form 속성

- autocomplete 속성

- datalist 요소와 list 속성

- autofocus 속성

HTML5의 새로운 폼 입력 타입

- Search

- 이메일 주소

- URL

- 전화번호

- 숫자

- 범위

- 색상

날짜와 시간

HTML5에서의 다른 새로운 폼 컨트롤

- output 요소

- keygen 요소

기존 폼 컨트롤과 속성의 변화

- form 요소

- optgroup 요소

- textarea 요소

결론



05장 HTML5 오디오와 비디오



탄생 배경

기능 지원의 현재 상태

- 비디오 컨테이너 포맷

- 비디오 코덱

- 오디오 코덱

- 현재 브라우저에서는 어떤 조합이 작동할까?

마크업

- 내장 컨트롤 사용

- autoplay 속성

- loop 속성

- preload 속성

- poster 속성

- audio 속성

- 다중 비디오 포맷 지원

- source 순서

- 인터넷 익스플로러 6~8은 어떻게 될까?

- MIME 타입

웹용 비디오 파일 인코딩

맞춤 컨트롤 생성

- 첫 시작을 위한 몇 가지 마크업과 스타일

- 미디어 요소 API 소개

- 비디오의 재생과 중지

- 비디오의 오디오 트랙에 대한 음소거 및 음소거 해제

- 비디오 재생이 끝났을 때의 반응

- 비디오 재생에 따른 시간 업데이트

- 미디어 요소 API의 추가적인 기능

오디오는 어떤가?

접근 가능한 미디어

쇼타임



06장 CSS3 소개



이전 브라우저 지원하기

CSS3 선택자

- 관계형 선택자

- 속성 선택자

- 가상 클래스(Pseudo-classes)

- 구조적 가상 클래스

- 가상 요소와 생성된 콘텐츠

CSS3 색

- RGBA

- HSL과 HSLA

- 불투명도

실전 적용

둥근 모서리: border-radius

그림자 효과

- Inset과 여러 개의 그림자 효과

텍스트 그림자 효과

더 많은 그림자 효과

다음으로



07장 CSS3 그라디언트와 다중 배경



선형 그라디언트

- W3C 문법

- 이전의 웹킷 문법

- 종합 예제

- SVG를 이용한 선형 그라디언트

- IE 필터를 이용한 선형 그라디언트

- 이용 가능한 도구

방사형 그라디언트

- W3C 문법

- 이전의 웹킷 문법

- 모든 내용을 통합하면

반복 그라디언트

다중 배경 이미지

배경 크기

배경으로



08장 CSS3 변형과 전환



변형(Transform)

- 이동(Translation)

- 크기변환

- 회전

- 비틀기

- 변형의 원점 변경

- 인터넷 익스플로러 8과 그 이전 버전을 위한 지원

전환(Transition)

- transition-property

- transition-duration

- transition-timing-function

- transition-delay

- transition 약칭표기 속성

- 다중 전환

애니메이션

- 키 프레임

- 애니메이션 속성

넘어가면서



09장 웹 폰트와 다단 레이아웃



@font-face를 이용한 웹 폰트

- @font-face 구현

- 폰트 소스 선언

- 폰트 속성 기술자

- 유니코드 범위

- 폰트 적용

- 법적 고려 사항

- 다양한 폰트 파일 생성: 폰트 스쿼럴

- 다른 고려 사항

CSS3 다단 레이아웃

- column-count 속성

- column-gap 속성

- column-width 속성

- columns 약칭표기 속성

- 단과 height 속성

- 그 밖의 단 기능

- 다른 고려 사항

- 점진적 향상

미디어 쿼리

- 미디어 쿼리란?

- 문법

- 미디어 쿼리의 유연성

- 브라우저 지원

- 추가 참고 자료

스타일리시하게 살기



10장 위치 정보, 오프라인 웹 앱, 그리고 웹 스토리지



위치 정보

- 프라이버시에 대한 배려

- 위치 정보 메서드

- Modernizr를 이용한 지원 여부 확인

- 현재 위치 조회

- 위치 정보의 Position Object

- 위도와 경도 얻기

- 지도 불러오기

- 이전의 모바일 기기에 대한 마지막 한마디

오프라인 웹 애플리케이션

- 작동 방법: HTML5 애플리케이션 캐시

- 오프라인에서 작동하도록 사이트 설정하기

- 사이트를 오프라인으로 저장하기 위한 허가 얻기

- 오프라인 테스트

- 오프라인에서도 이용 가능한 HTML5 헤럴드 만들기

- 오프라인 웹 애플리케이션 저장 공간의 제약

- Fallback 섹션

- 캐시 리프레싱

- 지금 온라인 상태일까?

- 추가 참고 자료

웹 스토리지

- 두 종류의 웹 스토리지

- 웹 스토리지 데이터의 모습

- 데이터 저장하기와 읽기

- 저장 데이터 변환

- 좀 더 간단한 사용법

- 특정 항목 제거와 전체 데이터 지우기

- 스토리지 제한

- 보안 고려사항

- HTML5 헤럴드에 웹 스토리지 추가

- 웹 인스펙터를 이용한 웹 스토리지 값 열람

추가적인 HTML5 API

- 웹 워커

- 웹 소켓

- Web SQL과 IndexedDB

그림 그리기로 되돌아가 보자



11장 캔버스, SVG와 드래그 앤 드롭



캔버스

- 캔버스의 역사

- canvas 요소 생성

- 캔버스에 그리기

- 컨텍스트 얻기

- 브러시에 색 입히기

- 캔버스에 사각형 그리기

- 캔버스 좌표 시스템

- fillStyle의 변형

- Path를 이용해 다른 모양 그리기

- 캔버스 그림 저장하기

- 이미지를 캔버스에 그리기

- 이미지 조작하기

- 컬러에서 흑백으로 이미지 변환하기

- getImageData에서의 보안 오류

- 캔버스로 비디오 조작하기

- 캔버스에 텍스트 표시하기

- 접근성에 대한 우려

- 추가 참고 자료 목록

SVG

- SVG에서 그리기

- SVG 이미지 생성을 위한 잉크스케이프 활용

- SVG 필터

- 라파엘 라이브러리 활용

- 캔버스 vs. SVG

드래그 앤 드롭

- WAI-ARIA 고양이에게 먹이주기

- 드래그 가능한 요소 만들기

- DataTransfer 객체

- 드롭된 요소 받기

- 참고 자료

여기까지입니다!



부록A Modernizr



CSS에서 Modernizr 이용하기

자바스크립트에서 Modernizr 이용하기

인터넷 익스플로러 8과 그 이전 버전에서의 HTML5 요소에 대한 스타일 적용 지원

추가 참고 자료



부록B WAI-ARIA



WAI-ARIA가 어떻게 의미적 표현을 보완하는가

WAI-ARIA의 현재 상태

추가 참고 자료 목록



부록C 마이크로데이터



HTML5의 의미적 표현은 충분하지 않은가?

마이크로데이터 문법

이름-값 쌍 이해하기

마이크로데이터 네임스페이스

추가 참고 자료

알렉시스 골드스타인 저자 알렉시스 골드스타인 (ALEXIS GOLDSTEIN)은 90년대 중반 고등학교 재학 시절 처음으로 HTML을 익혔다. 그녀는 여성을 위한 저비용 프로그래밍 강의를 담당하는 Girl Develop It의 강사이자 공동 조직자이며, 브룩클린에 있는 NYC Resistor hackerspace의 매우 자랑스러운 멤버이기도 하다.