HTML5 CSS3 실전에서는 이렇게 쓴다

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를 이용해 메시지의 의미를 부각시키는 폰트 타입 설정
ㆍ 사용자가 좋아할 만한 지능적이고 자체 유효성 검사를 실시하는 웹 폼 제작
ㆍ 모바일 환경