한빛출판네트워크

HTML5 권고안과 최신 웹 브라우저에 맞춰 개정한 웹 디자인 교과서
2014년 10월 확정된 HTML5 권고안과 최신 웹 브라우저에 맞춰 개정한 웹 디자인 교과서다. 이제는 대세가 된 HTML5와 CSS3에 맞춰 웹 디자인 경험이 없어도 바로 웹 디자인을 시작할 수 있도록 구성했다. 웹 디자인은 이 한 권으로 끝낸다!

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

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

다양한 보완 기술 설명

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

430여 개의 코드와 580여 개의 이미지로 이해를 돕는다
HTML5의 다양한 태그와 CSS3의 스타일 속성, 복잡한 CSS3 선택자에 대해 코드와 이미지를 함께 보여줘서 시각적으로 바로 이해하는 구성으로 되어 있다. 직접 실습해보지 않아도 코드와 결과를 바로 확인할 수 있게 했다. 또한, 브라우저별 지원 여부를 별도로 표기해 다양한 브라우저에서 직접 테스트해보지 않아도 사용 여부를 알 수 있다. 이 책의 모든 예제는 인터넷 익스플로러 8 이상에서 동작하며, 브라우저 지원 여부에 따라 인터넷 익스플로러, 크롬, 사파리, 파이어폭스, 오페라의 버전을 명시했으며, 아이폰, 안드로이드폰, 갤럭시 탭, 아이패드에서 테스트했다. 또한 레티나 디스플레이를 탑재한 새로운 아이패드를 위한 웹 페이지 제작 방법까지 빠짐없이 수록했다.

학습 로드맵
『모던 웹 디자인을 위한 HTML5+CSS3 입문, 개정판』 - 『모던 웹을 위한 JavaScript + jQuery 입문, 개정판』 - 『모던 웹을 위한 Node.js 프로그래밍, 개정판』 - 『모던 웹을 위한 HTML5 프로그래밍』

CHAPTER 1 HTML5 개요
    1.1 웹의 역사
    1.2 HTML5 추가 기능
    1.3 HTML5를 공부해야 하는 이유
    1.4 Visual Studio 2013 Express for Web 설치
    1.5 HTML 페이지 생성
    1.6 구글 크롬 설치
    1.7 구글 크롬 개발자 도구
    1.8 IE Tester 설치

CHAPTER 2 HTML5 태그 기본
    2.1 HTML5 기본 용어 정리
    2.2 HTML5 페이지 구조
    2.3 글자 태그
    2.4 목록 태그
    2.5 테이블 태그
    2.6 이미지 태그
    2.7 오디오 태그
    2.8 비디오 태그
    2.9 입력 양식 태그
    2.10 공간 분할 태그

CHAPTER 3 CSS3 선택자 기본
    3.1 선택자 종류 개요
    3.2 전체 선택자
    3.3 태그 선택자
    3.4 아이디 선택자와 클래스 선택자
    3.5 속성 선택자
    3.6 후손 선택자와 자손 선택자
    3.7 동위 선택자
    3.8 반응 선택자
    3.9 상태 선택자
    3.10 구조 선택자
    3.11 문자 선택자
    3.12 링크 선택자
    3.13 부정 선택자

CHAPTER 4 CSS3 스타일 속성 기본
    4.1 CSS3 단위
    4.2 가시 속성
    4.3 박스 속성
    4.4 테두리 속성
    4.5 배경 속성
    4.6 폰트 속성
    4.7 위치 속성
    4.8 float 속성
    4.9 그림자 속성
    4.10 벤더 프리픽스
    4.11 그레이디언트

CHAPTER 5 웹 페이지 레이아웃
    5.1 웹 페이지 개요
    5.2 레이아웃 구분
    5.3 초기화
    5.4 헤더 구조 작성
    5.5 웹 폰트
    5.6 수평 메뉴
    5.7 콘텐츠 구성
    5.8 본문 구성
    5.9 사이드 탭바 구성
    5.10 목록 구성
    5.11 푸터 구성
    5.12 정리

CHAPTER 6 스마트폰 레이아웃
    6.1 스마트폰 개요
    6.2 모바일 웹 개발 주의사항
    6.3 뷰포트 meta 태그
    6.4 초기화
    6.5 헤더 구조 구성
    6.6 스프라이트 이미지
    6.7 토글 목록 구성
    6.8 내비게이션 구성(1)
    6.9 내비게이션 구성(2)
    6.10 본문 구성
    6.11 푸터 구성
    6.12 정리
    6.13 전체화면
    6.14 글자 감추기

CHAPTER 7 태블릿 PC 레이아웃
    7.1 초기화
    7.2 헤더 구성
    7.3 내비게이션 구성
    7.4 콘텐츠 구성
    7.5 수직 목록 구성
    7.6 본문 구성
    7.7 푸터 구성
    7.8 정리
    7.9 고정 바

CHAPTER 8 소셜커머스 메인 페이지
    8.1 초기화
    8.2 헤더 구성
    8.3 사이드 구성
    8.4 내비게이션 구성(1)
    8.5 내비게이션 구성(2)
    8.6 목록 구성
    8.7 콘텐츠 구성
    8.8 최종 정리

CHAPTER 9 CSS3 변형과 애니메이션
    9.1 변형 속성 기본
    9.2 변형 속성
    9.3 키 프레임과 애니메이션 속성

CHAPTER 10 CSS3 변환
    10.1 2차원 변환
    10.2 3차원 변환
    10.3 원근법
    10.4 회전 목마

CHAPTER 11 CSS 추가 규칙과 반응형 웹
    11.1 @import 규칙
    11.2 @font-face 규칙
    11.3 @media 규칙
    11.4 반응형 웹
    11.5 화면 방향 전환

CHAPTER 12 그리드 시스템
    12.1 960 Grid System 플러그인
    12.2 정적 그리드 시스템
    12.3 동적 그리드 시스템
    12.4 반응형 그리드 시스템

부록 A 인터넷 익스플로러 보완 방법
    A.1 시작하기 전에
    A.2 인터넷 익스플로러 - 조건부 주석
    A.3 인터넷 익스플로러 - 스타일시트 핵
    A.4 HTML5 지원 - HTML5 Shiv
    A.5 HTML5 지원 - IE9.js
    A.6 CSS3 속성 - CSS3 Pie
    A.7 CSS3 미디어 쿼리 - CSS3 MediaQueries.js 플러그인
    A.8 CSS3 초기화 - normalize.css 플러그인

부록 B 부트스트랩
    B.1 설정
    B.2 레이아웃
    B.3 툴바
    B.4 툴바 버튼
    B.5 다단 레이아웃
    B.6 수직 목록
    B.7 아이콘
    B.8 정리

부록 C Less 스타일시트
    C.1 개요
    C.2 Less 컴파일러
    C.3 기본
    C.4 서버를 사용한 변환

부록 D HTML5를 사용한 플래시 웹 페이지 개발
    D.1 HTML5의 플래시 대체 가능 범위
    D.2 회전 이미지 갤러리
    D.3 영화 소개 페이지

부록 E SVG 태그
    E.1 기본

찾아보기