HTML 5 CSS 3(올인원웹실무가이드)

앞서 가는 웹 제작자를 위한 웹 표준 활용서

-차세대 웹 표준의 모든 것,

-HTML 5로 제작된 모바일 웹 사이트(http://coforward.com) 구축 사례 수록



* 이 책의 특징

- 차세대 웹 표준 기술인 HTML 5에 대한 상세한 설명

- HTML 5 및 CSS 3, SVG, CANVAS에 대한 실전 예제와 해설

- HTML 5를 이용한 모바일 대응 프로젝트 실전 사례 수록

- 지속적인 정보 업데이트를 위한 지원 사이트 운영



* 이 책은 누가 봐야 할까요?

-올바른 정보 구조를 설계하고자 하는 기획자

-웹의 표현 범위를 넓히고자 하는 디자이너

-차세대 웹 기술을 익히고자 하는 개발자

-N Screen 시대를 준비하고자 하는 모든 웹 제작자



이 책 한 권에 차세대 웹 표준에 관한 모든 내용을 담았다. 우선 HTML 5로 제작하여 운영 중인 사이트(http://coforward.com)를 예제로 사용했고, 실제 작업 단계인 기획부터 디자인, 설계까지의 과정을 담았다. 현재 웹 표준인 XHTML 1.0&CSS 2부터 차세대 웹 표준인 HTML 5&CSS 3까지 총 정리하여 구성했고, 또한 SVG, CANVAS, API를 한번에 익힐 수 있도록 더 상세하게 소개했다. 그리고, 웹 사이트와 모바일 웹 사이트를 실습할 수 있는 내용을 실전 예제 파트에서 다뤘다.

지원 사이트(http://book.coforward.com)를 통해 이 책의 모든 예제를 직접 확인할 수 있으며, 독자 여러분과 의견을 교환할 수 있는 게시판을 운영하고 있다.

Chapter 01. 웹 표준(Web Standard)

Section 01. 인터넷 환경의 변화와 변하지 않는 웹의 목적

1. 웹 환경의 변화

2. 웹(Web)과 앱(Apps)의 차이점

1) 앱

2) 웹

3) 모바일 환경에서 웹과 앱의 특징 비교

3. 변하지 않는 웹의 목적

Section 02. 다양한 환경에 대응하기 위한 설계와 기술

1. 정보를 설계하는 방법-HTML

1) XHTML 1.0

2) XHTML 1.0 기본 사항

3) 「head」 영역의 요소

4) 「body」 영역의 요소

5) 웹 표준은 「div」+CSS 디자인?

2. 환경별 UI의 구성-CSS : 사용자 환경별로 다른 표현 방식

1) CSS의 기본적 특징

2) CSS 선택자

3) CSS Combinator-CSS 결합자

4) Group of Selector-선택자 그룹

5) CSS의 값과 단위

6) CSS 속성-Box Model과 관련된 속성

7) CSS 속성-Inline Box와 관련된 속성

8) CSS 속성-보이는 위치와 형태에 관련된 속성

9) CSS 속성-색상과 배경에 관련된 속성

10) CSS 속성-Font와 관련된 속성

11) CSS 속성-Text와 관련된 속성

12) CSS 속성-사용자 인터페이스와 관련된 속성

13) CSS 속성-테이블 요소 전용 속성

14) CSS 속성-리스트 요소 전용 속성

15) CSS 속성-프린트에 관련된 속성

3. 웹의 애플리케이션화-자바스크립트 : 사용자 측의 동적 요소의 구현

1) 자바스크립트의 역할

2) Document Object Model(DOM)

3) 자바스크립트의 기본 사용 방법

4) 자바스크립트로 요소 선택하기

5) 선택된 요소에 자바스크립트로 스타일 지정하기

6) 자바스크립트를 이용한 요소의 추가 삭제



Chapter 02. 차세대 웹 표준(Next Web Standard)

Section 03. 웹의 진화 - HTML 5/CSS 3

1. HTML 5-더 명확한 정보 구조를 위한 진화

1) HTML 5의 요소 성격의 구분 Contents Model

2) HTML 5의 DOCTYPE

3) HTML 5의 공통 속성

4) HTML 5의 요소

5) 섹션 요소들과 아웃라인 알고리즘-명확해진 정보의 구조화

6) 텍스트 의미 요소의 강화-텍스트 시멘틱 요소

7) 사용자의 입력을 검증하고 도와주는 서식 요소-Form

8) 새로운 정보 형태-「video」, 「audio」, 「canvas」, 「svg」

9) SVG-HTML 5로 다시 주목받는 벡터 방식 그래픽 요소

2. HTML 5 API-문서에서 응용 프로그램으로의 진화

1) canvas API

2) Cache Manifest

3) Web Storage

4) geolocation

3. CSS 3-정보 구조를 돋보이게 하는 표현 요소

1) 「style」의 자체 속성과 확장 접두사

2) 색상 관련 속성

3) border 관련 속성

4) background 관련 속성

5) font와 text 관련 속성

6) 사용자 환경에 관련된 속성

7) 콘텐츠 배치에 관한 속성

8) 요소의 형태 변화와 애니메이션 관련 속성



Chapter 03. 실전 예제(Web & Mobile Web Project)

Section 04. HTML 5와 CSS 3를 이용한 웹 사이트 제작

1. 웹 사이트 구축 준비

1) 팀 웹 사이트를 위한 초기 기획회의

2) 공통 부분의 작성

2. 페이지별 구성

1) 메인 페이지

2) 인사말 페이지

3) 구성원 소개 페이지

4) 제작 방식 페이지

5) 뉴스 리스트 페이지

6) Color 페이지

7) Contact 페이지



Section 05. 모바일 웹 사이트 제작

1. 모바일 웹 사이트 작성 시 고려할 점

1) W3C Mobile Web Best Practice

2) Mobile Web 2.0 Forum의 moblie ok

3) 모바일 웹의 현실적인 고려

2. 모바일 대응 방안의 선정

1) 대응하지 않기

2) 데이터 레벨에서의 분리

3) 구조 레벨에서의 분리

4) 표현 레벨에서의 분리

3. coForward 사이트 모바일 대응 기획

1) 대응 방안의 선정

2) 콘텐츠의 점검

3) 디자인 방안

4. 모바일 대응 사이트 구성

1) 환경의 구성

2) 모바일 환경의 특징과 구성

3) 모바일용 CSS의 적용과 추가적인 작업



HTML 4/HTML 5 태그 비교표

찾아보기

나인환 저자 나인환은 coForward 내 역할 : 기획/설계/PM. ETC : PMP(Project Management Professional)