앞서가는 디자이너와 퍼블리셔를 위한 HTML5&CSS3

HTML5 & CSS3 입문을 위한 간결하고 쉬운 지침서

송종식 저

HTML5는 기존의 보여주기만 하던 정적인 마크업을 넘어서 동적인 마크업으로 발전했다. HTML5가 가지고 있는 다양한 API와 추가된 폼 요소들은 훨씬 더 액티브한 웹페이지를 만들 수 있도록 도와줄 것이며, 외부 플러그인 없이 다양한 멀티미디어와 기능들을 지원할 수 있게 되었다. CSS3는 이전의 CSS2.1보다 한층 향상된 속성들을 제공하며 외부의 플러그인 없이 애니메이션을 만들 수 있다. 그래픽 툴을 쓰지 않고도 다양한 그래픽 효과를 사용할 수 있다.


도서 상세

분야: [웹프로그래밍, 프로그래밍 언어]

출간일: Feb 26, 2011

페이지: 468

도서정가: 26,000 원

ISBN: 9788993827323

부가 정보


관련 도서

출판사 서평

차세대 웹표준이니 마크업의 혁명이니 하는 거창한 수식어가 붙어있지만 HTML5와 CSS3를 이해하는 것은 그리 어려운 일이 아닙니다.

HTML5는 기존의 보여주기만 하던 정적인 마크업을 넘어서 동적인 마크업으로 발전했습니다. HTML5가 가지고 있는 다양한 API와 추가된 폼 요소들은 훨씬 더 액티브한 웹페이지를 만들 수 있도록 도와줄 것이며, 외부 플러그인 없이 다양한 멀티미디어와 기능들을 지원할 수 있게 되었습니다.

□ CSS3는 이전의 CSS2.1보다 한층 향상된 속성들을 제공합니다. 
□ 외부의 플러그인 없이 애니메이션을 만들 수 있습니다.
□ 그래픽 툴을 쓰지 않고도 다양한 그래픽 효과를 사용할 수 있습니다.

HTML5와 CSS3는 한층 향상된 기능도 돋보이지만, 웹이 모든 기기의 플랫폼이 되는 데 필요한 시간을 앞당길 것입니다.
또한 모바일 기기용 웹 앱을 만드는데 필수도구로 자리 잡게 될 것입니다.

이 책은 HTML5와 CSS3에 입문하는 웹 디자이너와 웹 퍼블리셔를 위한 책 입니다.

저자 소개

송종식 : 오랫동안 웹디자이너와 기획자로 일했다. 현재는 골프존에서 UI개발자로 일하고 있으며, 번역서로는 ‘스타일링 CSS’가 있다.

CHAPTER 01 공부를 시작하기 전에…
01 | 작업 환경 준비 
텍스트 에디터 준비 
웹브라우저 준비 
02 | 기초지식부터 쌓고 시작합시다 
HTML5 배경지식 쌓기 
CSS3 배경지식 쌓기 

CHAPTER 02 HTML5 마크업
01 | 마크업 기본 규칙 
HTML5 기본 코딩 규칙과 문법 
HTML5 템플릿 
콘텐츠의 흐름, 블록레벨 요소와 인라인 요소 
HTML5 문서 계층 구조 
HTML5에 추가된 글로벌 속성 
02 | 더 시맨틱하게… 
아웃라인 구성과 문서의 구조를 지키는 마크업 
의미를 부여받은 특별한 텍스트 
상호작용을 위한 요소 
03 | 무엇이든 그려내는 Canvas 요소 
Canvas 기본 사용법 
Canvas를 이용해서 그림 그리기 준비 
Canvas에 사각형 그리기 
패스를 이용해서 선 긋기, 선 스타일 지정하기 
요소 합성하기 
원, 호 구현하기 
텍스트 구현하기 
그림자와 그라데이션 구현하기 
외부 이미지 삽입하기 
Canvas 샘플로 살펴보는 무궁무진한 가능성 
04 | SVG 
SVG 소개 
간단한 SVG 이용 방법 
05 | 쉽고 강력해진 HTML5 웹 폼 
새로 추가된 인풋 타입 
인풋 요소에 새로 추가된 속성 
자바스크립트 정규표현식 
추가된 요소 
06 | 액티브엑스가 필요 없는 내장 미디어 
사운드 재생을 위한 오디오 요소 
비디오 재생을 위한 비디오 요소 
스크립트를 이용한 내장 미디어 컨트롤 
07 | 구형 익스플로러를 위한 대비책 
익스플로러에서 아웃라인 태그 인식시키기 
익스플로러에서 「canvas」 사용하기 
익스플로러에서 CSS3 인기 속성 적용하기 
HTML5 API를 익스플로러에서 쓸 수 있을까 

CHAPTER 03 HTML5 자바스크립트 API
01 | 현재 위치를 알려 주는 Geolocation 
Geolocation의 기본 사용법 
구글맵과 연동해 보기 
02 | 클라이언트에 데이터를 저장하는 웹 스토리지 
정보를 클라이언트측에 기억해 주는 로컬 스토리지와 세션 스토리지 
간단한 메모지 만들어 보기 
03 | 웹SQL데이터베이스 
데이터베이스의 생성과 접근 
웹SQL데이터베이스의 기본 사용법 
04 | 조금 더 편리한 인터페이스를 위한 드래그앤드롭 
드래그앤드롭 API 사용을 위해 필요한 것 
드래그앤드롭 이용을 위한 기본 개념 
간단하게 만들어 보는‘박스에 국기 옮기기’예제 
05 | 빠르고 능률적인 웹워커 
웹워커 소개 
간단한 웹워커 사용법 
06 | 실시간 양방향 웹을 위한 웹소켓 
웹소켓, 어디에 쓰는 걸까요? 
간단한 사용 예 
07 | 오프라인 웹 애플리케이션 
애플리케이션 캐시를 위한 매니페스트 파일 작성 
온오프라인 이벤트 
08 | 기타 API와 편리한 요소 
임베디드 CSS를 특정 요소에만 적용하기 
async와 defer 속성을 이용해서 페이지 퍼포먼스 향상시키기 
프레임셋은 사라지고 iframe은 강화되고… 
마이크로데이터 
DOM 선택을 위한 새로운 기능 
09 | HTML5 API 소개를 마치며… 
HTML5 스펙에서 일부 API의 제외 논의 
디자이너나 퍼블리셔가 HTML5 API까지 알 필요가 있을까요? 
소개하지 못한 API 

CHAPTER 04 CSS3 따라잡기
01 | HTML 문서에 CSS를 적용하는 3가지 방법 
태그에 직접 스타일을 주는 방법 
「style」 요소를 활용하여 HTML 내에서 사용하는 방법 
외부의 CSS 파일을 링크하는 방법 
방법별 스타일을 적용하는 우선순위 
02 | CSS 문장의 기본 구조 
03 | 선택자 
가장 기본적인 태그 선택자 
클래스, 아이디 선택자 
특수 선택자 
가상 클래스 
가상 요소 
04 | 상속과 계단식 정보 전달 
상속 
계단식 정보 전달 
05 | 박스모델 
박스모델 개념 잡기 
박스 모서리를 둥글리기 
박스에 그림자 적용하기 
다양해진 박스 테두리 스타일 
배경이미지를 다루는 더 많아진 방법 
06 | 다단 레이아웃을 위해 추가된 CSS3 속성 
CSS3의 유연한 박스모델 레이아웃 
다단 레이아웃을 위해 추가된 Column 속성 
레이아웃을 위한 전통적인 Float와 Position 
07 | 텍스트와 컬러 
텍스트를 더 스타일리시하게… 
CSS3의 컬러 시스템 
08 | 움직임 컨트롤 
트랜지션 속성으로 간단한 움직임 조작하기 
요소의 형태를 마음대로 조작하는 트랜스폼 속성 
조금 더 세밀한 움직임을 위한 애니메이션 속성 

CHAPTER 05 예제로 배우는 HTML5와 CSS3
01 | CSS3를 이용하여 아쿠아 버튼 만들기 
02 | 초간단 오에카기 만들기 
03 | 피자 주문 페이지 레이아웃 만들기 
웹폰트 사용하기 
두 개의 배경이미지 사용하기 
CSS3로 구성한 레이아웃 디자인 

CHAPTER 06 계속 지켜야 할 웹표준과 웹접근성
01 | 웹표준 
웹표준을 준수하려면 어떻게 해야 할까요? 
웹표준을 준수하면 어떤 점이 좋을까요? 
02 | 웹접근성 
웹접근성이란 도대체 뭘까요? 
실무에서 웹접근성을 준수하기 위퇇 몇 가지 방법 
웹접근성 관련 국내법 
정부 사이트들도 이미 … 
웹표준과 웹접근성을 지켜서 얻는 궁극적인 목표 

APPENDIX 부록
01 | HTML5 마크업 요소 정리표 
02 | CSS3 속성 정리표 
03 | CSS3 미디어쿼리 

에필로그