::: 정보문화사 :: IT 도서의 표준

실력이 탐나는 HTML5+CSS3

크게보기 l 차례보기

ㆍ저 자	신미영
ㆍ역 자
ㆍ구 분	국내서
ㆍ발행일	2012년 09월 17일
ㆍ정 가	25,000원
ㆍ페이지	580 페이지
ㆍISBN	978-89-5674-576-3
ㆍ난이도	초급.중급
ㆍ출판사	정보문화사

“다양한 디바이스에서 펼쳐지는 새로운 웹 표준의 세상”

HTML5는 웹 문서를 만들기 위한 기본 프로그래밍 언어인 ‘HTML(Hyper Text Markup Language)’의 최신 규격입니다. HTML5는 엑티브X를 설치하지 않아도 동일한 기능을 구현할 수 있고, 특히 플래시나 실버라이트, 자바FX 없이도 웹브라우저에서 화려한 그래픽 효과를 낼 수 있다는 큰 장점을 지닙니다.

HTML에서 지원하지 못했던 타이포그래피, 레이아웃, 배경 이미지와 같은 디자인을 구현할 수 있는 용도로 사용되는 CSS는 웹페이지 제작에 있어서 HTML과 함께 중요한 마크업 언어입니다. 특히, CSS3는 기존의 CSS2가 갖지 못했던 포토샵과 자바스크립트 기술에만 의존하던 다양한 영역의 기술을 구현할 수 있게 되었습니다.

HTML5가 처음 나왔을 때 많은 개발자와 웹 제작 종사자는 예전과는 다른 놀라운 확장 기능에 환호성을 질렀고, HTML에서는 구현하기 까다로웠던 다채로운 디자인과 CSS3만을 이용하여 레이아웃을 해결할 수 있음에 감동했습니다. 실력이 탐나는 HTML5+CSS3는 이처럼 웹페이지 제작에 필수 기능을 수행하는 HTML5과 CSS3를 체계적으로 학습할 수 있게 하는 지침서입니다. 웹에 처음 접근하는 초보자의 입장을 고려하여 중도에 포기하지 않고 탄탄히, 그리고 쉽게 익힐 수 있도록 체계적인 구성과 세심한 실습 예제를 기반으로 설명합니다.

독자 타깃

HTML5과 CSS3를 처음 배우는 사람

웹 제작 업무에 종사하는 사람

구성 특징
웹 표준 문서 제작에 필요한 HTML5와 CSS3의 완벽 학습을 위한 체계적인 구성!
HTML5가 처음 나왔을 때 많은 개발자와 웹 제작 종사자는 예전과는 다른 놀라운 확장 기능에 환호성을 질렀고, HTML에서는 구현하기 까다로웠던 다채로운 디자인과 CSS3만을 이용하여 레이아웃을 해결할 수 있음에 감동했습니다. <실력이 탐나는 HTML5+CSS3>는 이처럼 웹페이지 제작에 필수 기능을 수행하는 HTML5과 CSS3를 체계적으로 학습할 수 있게 하는 지침서입니다. 웹에 처음 접근하는 초보자의 입장을 고려하여 중도에 포기하지 않고 탄탄히, 그리고 쉽게 익힐 수 있도록 체계적인 구성과 세심한 실습 예제를 기반으로 설명합니다.

HTML5+CSS3, 미디어 쿼리를 이용한 반응형 웹디자인의 구현, 웹사이트 실전 제작법 공개!
본문 마지막 장에서는 HTML5를 기반으로 한 구조를 마크업하고 CSS3로 레이아웃 디자인을 하여 템플릿 페이지를 구성해 하나의 웹사이트를 제작하는 실전 기법을 소개합니다. 기본 레이아웃이 구성되면 해상도에 따라 변경되도록 미디어 쿼리 기능을 사용하여 반응형 웹디자인을 구현해 봅니다.

이론과 예제로 익힌 기능을 바로 내 것으로 만드는 활용 문제와 해설 파일 제공!
이론도 익히고 예제도 따라 해보지만 HTML5와 CSS3를 자유자재로 구사하기는 쉽지 않습니다. 그래서 <실력이 탐나는 HTML5+CSS3>에서는 학습한 내용을 확실하게 내 것으로 만들 수 있도록 각 장이 끝날 때마다 활용 문제를 배치했습니다. 간략한 힌트만으로 활용 문제를 풀어보며 익힌 내용을 복습하고, 별도로 제공되는 해설 파일로 결과를 확인할 수 있습니다.

장별 요약
Chapter 01. HTML5과 CSS3 시작하기
Chapter 01에서는 HTML5와 CSS3를 이용하여 본격적으로 마크업하기 전 준비 사항과 함께 대략적인 마크업 언어의 특징들에 대해 알아봅니다. Chapter 02부터 진행되는 실습 예제를 위해서는 여기에서의 진행 과정이 필요하므로 HTML이나 CSS가 처음이거나 익숙하지 않은 사용자는 꼭 전반적인 진행 사항을 이해하고 준비하도록 합니다.

Chapter 02. HTML5 마크업 시작하기
웹 문서 제작에서 HTML5는 이전 버전의 HTML4 및 XHTML에서 사용되던 요소를 표준화시키면서 mark, ruby, header, navi, aside, section과 같이 웹 표준과 웹 접근성 향상을 위한 새로운 요소를 추가하였습니다. Chapter 02에서는 HTML5의 마크업 규칙을 바탕으로 이루어진 구성 요소, 텍스트에 관련된 문단 요소 및 시맨틱 웹을 위한 구조화 요소에 대해 알아보고 직접 마크업합니다.

Chapter 03. HTML5의 임베디드 요소 알아보고 하이퍼링크 지정하기
이미지, 비디오, 오디오와 같이 별도 파일로 구성된 개체를 특정 위치에 삽입하는 임베디드 요소인 img, audio, video와 함께 문서와 문서를 서로 연결해주는 하이퍼링크, 이미지맵, 네임앵커, 인라인 프레임에 관련된 마크업 요소에 대해 알아봅니다. 특히 HTML5에서 새로 추가된 audio, video 요소는 별도의 플러그인 없이 오디오와 비디오를 재생하므로 웹페이지 콘텐츠에 다양하게 활용할 수 있습니다.

Chapter 04. 구조화된 테이블과 폼 만들기
데이터를 행과 열의 조합으로 정리해주는 테이블과 관련된 요소에 대해 알아봅니다. 또한, 로그인 페이지, 회원가입 페이지, 설문 페이지, 주문서 페이지, 게시판, 검색 기능 등에서 사용되는 폼과 관련된 다양한 요소에 대해서도 살펴봅니다.

Chapter 05. CSS 마크업 시작하기
CSS는 HTML에서 지원하지 못했던 타이포그래피, 배경 이미지, 레이아웃, 테이블 속성을 다양하게 지원하고 있습니다. CSS의 특징과 함께 다양한 삽입 방법, 웹브라우저에서 CSS3 디자인을 위해 제공하는 벤더 프리픽스에 대해 알아봅니다.

Chapter 06. CSS의 다양한 선택자 활용하기
선택자는 CSS 속성과 값을 지정할 대상 영역을 지정하는 역할을 합니다. 문서에 삽입된 태그 전체나 사용자 이름으로 지정한 특정 영역을 지정하는 선택자도 있고, 마우스 포인터의 움직임에 따라 상태를 변화시키는 선택자도 있습니다. Chapter 06에서는 이러한 선택자의 다양한 특성을 이해하고 상황에 맞춰 사용하는 방법에 대해 알아봅니다.

Chapter 07. CSS에서 제공하는 다양한 속성 알아보기
정의한 선택자의 디자인을 결정하는 타이포그래피, 목록, 박스 모델의 크기, 여백, 테두리, 아우트라인, 배경 이미지, 그림자 효과, 투명도와 같은 CSS의 다양한 속성을 분야별로 알아봅니다. 특히 CSS3부터는 다중 배경 이미지 사용, 그림자 효과, 요소의 투명도, 둥근 모서리 처리와 같이 포토샵 등의 전문 그래픽 프로그램으로 구현할 수 있었던 기능들이 대폭 추가되었습니다.

Chapter 08. CSS 레이아웃과 CSS 애니메이션 구현하기
과거 테이블 구조를 이용해야만 했던 웹페이지의 레이아웃은 CSS의 출현 이후 float, position, display와 같은 다양한 속성을 이용하여 좀 더 유연하게 레이아웃을 구현할 수 있게 되었습니다. 특히 CSS3의 다단 칼럼 기능이나 박스에 관련된 속성을 이용하면 편집 디자인에서 사용했던 레이아웃을 직관적이며 유동적으로 구현할 수 있습니다. Chapter 08에서는 다양한 레이아웃을 구현해 보고 요소를 변형하고 애니메이션을 적용할 수 있는 동적 CSS 속성도 함께 알아봅니다.

Chapter 09. 테마별 활용 팁과 미디어 쿼리 알아보기
Chapter 09에서는 앞에서 학습했던 CSS 선택자, 다양한 속성을 이용하여 롤오버 이미지, 갤러리, 웹 스티커, 폼, 테이블과 같은 테마로 종합적인 예제를 만들어 봅니다. 이와 함께 CSS3에서 더욱 강력해진 그라데이션 효과와 모바일과 같은 디바이스 화면이나 인쇄물과 같이 다양한 환경에 따라 서로 다른 디자인으로 표시되는 미디어 쿼리 기능에 대해서도 알아봅니다.

Chapter 10. HTML5와 CSS3 기반의 실전 웹사이트 만들기
Chapter 10은 앞에서 다루어왔던 HTML5와 CSS3를 이용하여 템플릿 페이지를 만들고 문서와 문서를 연결해 하나의 웹사이트를 제작합니다. 특히 기본 레이아웃이 구성되면 해상도에 따라 변경되도록 미디어 쿼리 기능을 사용하여 반응형 웹디자인을 구현해 봅니다.

지은이 | 신미영

십 수 년 간 현장에서 쌓은 웹디자인의 노하우와 테크닉을 후배들에게 전수하고 소통하는 것을 큰 기쁨으로 여기며 다수의 책을 집필하고 강의를 해왔습니다. 웹이란 공간에 첫 발을 디디는 사람들이 어떻게 하면 좀 더 빠르고 효율적으로 웹을 이해하고 운용할 수 있을지에 대해 지금도 끊임없이 고민하고 연구하고 있습니다.

강의 경력
- 아카데미정글 웹사이트 제작 워크샵 강의
- 인천여성의광장 웹디자인 강의
- 서일대학 산업 디자인 웹디자인 강의
- 정보통신 대학교 교육원 웹디자인 강의
- 평화 아카데미 웹디자인 강의

대표 저서
- 할수있다! HTML+자바스크립트 쉽게 배우기, 영진닷컴
- 누구나 쓸 수 있는 Javascript+CSS 필살기, 뉴런
- 할수있다! 드림위버 CS3 쉽게 배우기, 영진닷컴
- 독하게 배워 바로 써먹는 드림위버 CS4, 북앤라이프
- 실력이 탐나는 드림위버 CS5, 정보문화사