<신간> 최신 HTML5 표준안과 웹 브라우저 호환성을 반영한 웹 디자인 입문서

<모던 웹 디자인을 위한 HTML5 CSS3 입문, 개정판>은 2014년 10월 확정된 HTML5 표준안과 최신 웹 브라우저 환경에 맞춘 최신 개정된 책이다. 웹 디자인을 처음 배우는 독자에게 HTML5와 CSS3를 단계별로 학습하는 방법을 설명해준 후, 웹 사이트 디자인을 직접 따라 하면서 스타일을 완성하는 방법을 자연스럽게 터득하도록 돕는다. 또한 HTML5의 다양한 태그와 CSS3의 스타일 속성, 복잡한 CSS3 선택자를 쉽게 이해할 수 있는 코드와 이미지를 함께 보여주므로 시각적인 효과를 높였다. 그래서 HTML5와 CSS3에 맞춰 웹 디자인 경험이 없어도 바로 웹 디자인을 시작할 수 있도록 구성했다.

이 책은 부록 일부를 제외하면 본문 전체에서 자바스크립트가 없다. 웹 디자인도 모르는데 HTML5, CSS3, 자바스크립트를 섞어놔서 불만이었다면 이 책이 정답이다. 순수하게 웹 디자인을 공부하고 싶은 독자, HTML5와 자바스크립트를 섞어놔서 공부하기 어려웠던 독자, 웹 디자인을 먼저 배우고 자바스크립트를 공부하고 싶은 독자를 위한 책이다. 웹 디자인에 자바스크립트를 더해 동적으로 만들고 싶다면 자매서 『모던 웹을 위한 JavaScript jQuery 입문, 개정판』을 보면 된다.

그리고 불필요한 부분을 제외한 HTML5와 CSS3의 핵심을 단계별로 학습하고, 웹 사이트 디자인을 직접 따라 하면서 HTML5와 CSS3를 어떻게 응용하는지 설명한다. 또한 기본이 되는 데스크톱용 웹 페이지 시안을 만들어본 후 스마트폰을 위한 모바일 웹 페이지 제작 , 태블릿을 위한 웹 페이지 제작을 따라 하는 구성이므로 단순한 태그 나열이 아니라 어떤 웹 사이트 디자인에도 대응하는 스타일을 완성하는 방법을 자연스럽게 터득하게 한다. 이외에도 실제와 같은 웹 페이지인 가상의 소셜커머스 제작 방법, 데스크톱, 스마트폰, 태블릿 등의 다양한 크기의 화면에 대응하는 반응형 웹 디자인 제작 방법, 웹 디자인에 사용되는 정적 그리드 시스템, 동적 그리드 시스템, 반응형 그리드 시스템까지 설명해, 실무를 막 시작한 웹 디자이너라면 누구든 이 책의 예제를 응용해 사용할 수 있다.

<모던 웹 디자인을 위한 HTML5 CSS3 입문, 개정판>은 HTML5와 CSS3는 이미 차세대 표준안 제정을 위한 논의를 시작했으며 크롬, 웹킷, 파이어폭스, 인터넷 익스플로러 등의 웹 브라우저는 매우 빠르게 발전하는 중이다. 또한 아직 최신 브라우저가 아닌 구형 브라우저를 사용하는 사람도 많다. 이 책은 최신 브라우저와 구형 브라우저의 호환성을 유지하는 스타일시트 핵, HTML5 지원을 가능하게 하는 HTML5 Shiv, IE9.js 등을 설명한다. 또한, 웹 디자인을 간편하게 해주는 부트스트랩, 체계적인 스타일링을 위한 Less, HTML5를 이용한 미디어 갤러리, SVG를 이용한 지도와 통계 자료 표시 등을 다뤘다.

그리고 브라우저별 지원 여부를 별도로 표기해 다양한 브라우저에서 직접 테스트해보지 않아도 사용 여부를 알 수 있다. 이 책의 모든 예제는 인터넷 익스플로러 8 이상에서 동작하며, 브라우저 지원 여부에 따라 인터넷 익스플로러, 크롬, 사파리, 파이어폭스, 오페라의 버전을 명시했으며, 아이폰, 안드로이드폰, 갤럭시 탭, 아이패드에서 테스트했다. 또한 레티나 디스플레이를 탑재한 새로운 아이패드를 위한 웹 페이지 제작 방법까지 빠짐없이 수록했다.

이밖에 HTML5와 CSS3의 주요 태그와 속성을 한 번에 찾아볼 수 있는 일람표를 특별 부록으로 수록하여 편의를 더했다. 이는 한빛미디어 웹 사이트에서도 내려받을 수 있다.

특히, 이 책은 CSS3의 주요 특징인 2차원, 3차원 웹 디자인 구성과 애니메이션 효과 적용법 소개와 데스크톱, 스마트폰, 태블릿 PC를 위한 웹 페이지 레이아웃 구성법과 반응형 웹 디자인 구성 방법을 소개하고 있다.

마지막으로 학습로드맵을 안내하면 다음과 같다.
 
첫 번째 『모던 웹 디자인을 위한 HTML5 CSS3 입문, 개정판』
두 번째 『모던 웹을 위한 JavaScript jQuery 입문, 개정판』
세 번째 『모던 웹을 위한 Node.js 프로그래밍, 개정판』
네 번째 『모던 웹을 위한 HTML5 프로그래밍』

■이 책은 크게 열두 부분으로 나뉜다

ㆍHTML5 개요
ㆍHTML5 태그 기본
ㆍCSS3 선택자 기본
ㆍCSS3 스타일 속성 기본
ㆍ웹 페이지 레이아웃
ㆍ스마트폰 레이아웃
ㆍ태블릿 PC 레이아웃
ㆍ소셜커머스 메인 페이지
ㆍCSS3 변형과 애니메이션
ㆍCSS3 변환
ㆍCSS 추가 규칙과 반응형 웹
ㆍ그리드 시스템

■ 이 책을 꼭 읽어야 하는 독자는 아래와 같다

ㆍ웹 디자인을 처음 배우지만, HTML5와 CSS3까지 한 번에 배우고 싶은 학생이나 초보자
ㆍ웹 디자인을 알지만, HTML5와 CSS3를 학습하려는 디자이너나 개발자
ㆍ태블릿, 모바일 웹 사이트 디자인과 반응형 웹 디자인을 해보고 싶은 독자

저자서문

『모던 웹을 위한 JavaScript jQuery 입문 개정판』 (한빛미디어, 2013)과 『모던 웹을 위한 Node.js 프로그래밍 개정판』 (한빛미디어, 2013)에 이어 모던 웹 시리즈 중 세 번째인 『모던 웹 디자인을 위한 HTML5 CSS3 입문』도 개정하게 되었습니다. 처음 개정을 하겠다고 했을 때 사실 출판사에서 "개정할 내용 별로 없잖아요?"하고 개정을 말렸습니다. 하지만 "2년 주기로 개정하기로 약속했단 말이에요!"라는 말을 지키고 싶었고, 2014년 10월 말 HTML5 권고안이 발표되면서 반드시 개정할 필요성이 생기게 되었습니다.

일단 이전 판을 보셨던 분께서 반드시 알아야 하는 변경 내역은 다음과 같습니다.

ㆍHTML5 권고안에 따른 명세 수정(hgroup 태그 제거 등등)
ㆍ미세하게 수정된 CSS3 명세 수정(그레이디언트 적용 방식 등등)
ㆍ웹 브라우저 버전의 업그레이드로 변화한 내용 수정(벤더 프리픽스 등등)

책방이나, 옆의 사람 책을 뺏어서 이전 판과 비교해보세요. 이 부분만 확인하시면 새로운 책을 사실 필요가 없습니다.

추가적으로 다음과 같은 부분이 새로운 플러그인과 라이브러리로 변경되었습니다.

ㆍ더 이상 지원하지 않는 것을 새로운 것으로 대체(1140 CSS Grid 플러그인 등등)
ㆍ버전이 오래된 경우 새로운 버전으로 변경(부트스트랩 등등)

이외에도 코드와 경로 같은 자잘한 부분도 많이 수정되기는 했습니다. 2년 동안 마이크로소프트의 웹 브라우저 강제 업데이트 정책 등에 의해서 HTML5를 지원하지 않는 웹 브라우저보다 지원하는 웹 브라우저가 훨씬 많아졌습니다. 앞으로도 HTML5는 다양한 곳에 사용되리라 믿습니다.

이 책의 내용은 대부분 제가 웹 관련 공부를 시작하면서 적었던 공부 일기를 옮긴 것입니다. 책을 모두 집필하고 읽으니 어릴 적 사건들이 떠오르더군요. 개인적으로 하늘색과 관련된 사연이 많아서 뭔가 노력을 기울이고 누군가에게 인정을 받고 싶은 결과물에는 하늘색 딱지를 붙이는 습관이 있는데요. 이 책의 표지를 출간 일주일 전에 보았답니다. 그리고 표지 글자가 하늘색임을 확인하고 기분 좋아했답니다.

저자소개

윤인성
SF 영화를 즐겨보며, 그 안에서 나오는 미래적인 컴퓨터 요소에 열광하고, 어떻게 하면 그것을 구현할 수 있을 지 생각하는 평범한 개발자. 프로그래밍과 관련된 지식을 나누는 것을 좋아하여 블로그를 운영하고 있다. 취미는 기타와 피아노 연주다.

저서로는 『모던 웹을 위한 JavaScript jQuery 입문, 개정판』 (한빛미디어 2013), 『모던 웹을 위한 Node.js 프로그래밍, 개정판』 (한빛미디어, 2013), 『모던 웹을 위한 HTML5 프로그래밍』 (한빛미디어, 2013), 『IT Cookbook HTML5 웹 프로그래밍 입문』 (한빛미디어, 2013)이 있다.

역서로는 『TopCoder 탑코더 알고리즘 트레이닝』 (한빛미디어, 2013), 『자바퍼즐러』 (한빛미디어, 2014)가 있다.