신간소개 2011. 9. 22. 02:48




l  저자: 양용석

  l  페이지: 448

  l  판형: 4x6배변형(190x244)

  l  도수: 2

  l  정가: 25,000

  l 발행일: 2011104

  l  ISBN: 978-89-966598-3-9

강의자료 요청하기 
chief@roadbook.co.kr

[이 책은 개정판이 출간되었습니다]
개정판 바로가기

[강컴] [교보] [리브로] [반디] [11번가] [알라딘] [예스24] [인터파크]


sample.pdf


_
도서 내용

이 책은 HTML5 CSS3의 새로운 점에 포커스를 맞추고 있지는 않습니다. 웹 표준의 핵심 철학인 "구조와 디자인의 분리"라는 관점에 맞게 달라진 웹 개발 방식을 제대로 배울 수 있도록 하는 것이 이 책의 주목적입니다.

이 책으로 학습하는 독자가 HTML5로 구조를 제대로 설계할 수 있고 CSS3로 정밀하고 자유자재로 디자인을 컨트롤할 수 있는 정도의 수준까지 될 수 있도록 구성하였습니다.

특히, 3부에서는 최신의 브라우저를 기준으로 HTML5 CSS3를 이용하여 가상이지만 대표할 만한 기업의 웹 표준 사이트를 구축해봅니다. 이 실습 프로젝트를 통해 웹 표준 개발 방식에 충분히 익숙해질 수 있을 것으로 기대합니다.

실전 웹 표준 사이트 살펴보기 css3.zerois.net

_대상 독자

HTML 태그로 아직도 디자인을 하고 있는 현업 웹 디자이너

CSS를 쓰고 있어도 리뉴얼도, 유지보수도 힘든 결과를 내고 있는 웹 디자이너

웹 디자이너나 개발자가 되기 위해 공부하고 있는 학생

웹 디자이너와 협업을 해야 하는 웹 기획자나 개발자

 _목차

1부 웹 표준과 HTML & CSS의 기초

01장 웹 표준이란

   Section 1 웹 표준의 등장 배경

   Section 2 웹 접근성을 높여주는 웹 표준

   Section 3 환경을 보호하는 웹 표준

   Section 4 사이트 개발 기간의 단축과 유지 보수의 용이성

   Section 5 정밀하게 제어할 수 있는 사이트 디자인

02 HTML5 소개

   Section 1 DOCTYPE 정의하기

   Section 2 HTML 문서의 기본 구조

   Section 3 HTML5 XHTML1.0의 차이점

   Section 4 HTML5에서 추가된 태그

   Section 5 HTML5에서 사라진 태그

03장 웹사이트 구조 설계를 통해 살펴 본 HTML5의 장점

   Section 1 HTML 문서의 구조 설계

   Section 2 HTML5를 이용한 HTML 문서 구조 잡기

04 CSS 기본 지식 익히기

   Section 1 캐스케이딩 스타일 시트(CSS) 이해하기

   Section 2 CSS HTML의 상호작용 원리

   Section 3 CSS 일반 규칙과 CSS3에서 추가된 속성

05장 간단 예제로 배우는 HTML5의 멀티미디어 태그

   Section 1 video 태그 활용하기

   Section 2 audio 태그 활용하기

   Section 3 embed 태그 활용하기

   Section 4 canvas 태그 맛보기



_
주요 내용

웹 표준 시대의 NEW 웹 개발을 생각한다

과거의 웹 개발 방식은 깡그리 잊자!

아직도 테이블 태그로 디자인 레이아웃을 만들고 있습니까? 여전히 HTML 코드에 디자인 속성을 덕지덕지 붙이고 있습니까? 웹 디자이너가 이제나저제나 디자인만 해주기를 기다리고 있는 웹 개발자입니까? 유지보수 문제로 매일 밤을 지새우고 있지는 않나요? 웹 디자이너로 웹 개발자로 구인을 해야 하는데 무엇을 가장 먼저 준비해야 할지 모른다고요?

지금 당장 웹 표준 공부를 시작하십시오.

HTML5 CSS3는 새로운 것이 아닙니다. 과거의 버전에 새로운 철학(구조와 표현의 분리)이 만나 새로운 시대적 요구에 맞게 없앨 것은 없애고 필요한 것은 새로 추가한 것입니다. 그렇기 때문에 무엇보다 웹 표준의 개발 방식을 익히는 것이 중요합니다.

새로운 태그나 문법이 중요한 게 아닙니다. 구조와 표현을 분리하여 사이트를 설계하고 사용하는 능력이 중요합니다. 이 책이 지향하는 가장 중요한 목표입니다.

처음 시작하는 초보자도 볼 수 있습니다.

웹 표준에 익숙하지 않은 개발자나 디자이너도 볼 수 있습니다.

이 책으로?

HTML은 구조만 잡는 데 사용할 수 있도록 간단히!!!

CSS로 디자인을 정밀하게 제어할 수 있도록 자세히!!!

실전 웹사이트 제작으로 실전 능력까지 한방에!!!.


_
편집자 코멘트

이 책의 집필을 시작할 즈음에 저자는 두바이에서 어느 유명 호텔의 웹사이트 개발 프로젝트를 완료한 상태였습니다. 당시에는 XHTML1.0 기준으로 CSS로 사이트 디자인을 제어하는 웹 표준 개발 방식이었습니다. 그런데 집필이 완료된 즈음에 웹사이트 리뉴얼을 했다는 얘기를 듣고 사이트를 방문해보았는데, 편집자인 저는 놀라지 않을 수 없었습니다. 어떻게 이렇게 짧은 시간에 완전히 다른 사이트 같이 리뉴얼을 해놓았을까? 바로 새로운 웹 개발 방식의 힘이라는 것을 깨달았습니다. 웹 표준의 개발 방식? 이제는 대세입니다.

_저자 소개

양용석 ugpapa@gmail.com

두산정보통신 인터넷 사업팀에서 첫 직장생활을 시작으로, 두산 그룹, 국제 유도연맹, 두산 베어스 등의 웹사이트를 개발했다. 그 후 다양한 인터넷 회사에서 웹사이트를 개발하였고 지금은 프리랜서로 활동하고 있다. 최근 두바이 아시아나 호텔 사이트를 개발했다.

제주대학교에서 정보공학(현 컴퓨터공학)을 전공했으며, 현재 제주도에서 아내와 두 딸 그리고 아들과 함께 살고 있다.

                                                                                                _

posted by 로드북
:
오탈자 정보 2011. 9. 18. 23:20

(오탈자 신고: chief@roadbook.co.kr 또는 댓글로 남겨주세요)

2012년 2월 5일 현재

-----P.9(목차 마지막 부분)(1쇄)---
(여원아빠님 감사합니다)
오자: 부록A.....451

수정: 부록A.....421

----------------------------

-----P.34(박스 안 아래에서 5째줄)(1쇄)---
(스마일넷님 감사합니다) 
오자: strcit.dtd

수정: strict.dtd

----------------------------

-----P.35(첫 단락 6째줄)(1쇄)---
(스마일넷님 감사합니다)
오자: 또한 frameset 자체를 인정하기 않기 때문에

수정: 
또한 frameset 자체를 인정하지 않기 때문에 
----------------------------
 
----
P.43(9째줄)(1쇄)---
오자: <br/>

수정: 
<br />
-----------------------------------
 

----
P.49(아래 3째줄)(1쇄)---
오자: inuput type

수정: input type

-----------------------------------
 
 
-----P.59(예제 3-1 소스코드 마지막줄)(1쇄)---
(여원아빠님 감사합니다)

오자: <div id="footer"></footer>

수정: 
<div id="footer"></div>
-----------------------------------


-----P.79(예제 4-1 캡션)(1쇄)---
(이지연님 감사합니다)

오자: [예제 4-1] [그림 4-3]의 소스코드

수정: 
[예제 4-1] [그림 4-4]의 소스코드
-----------------------------------


-----P.91(5장 소개글 4째줄)(1쇄)---
(왕초보님 감사합니다)

오자: 그리면 canvas 태그는

수정: 그러면 canvas 태그는

-----------------------------------


-----P.98(그림 아래 2째줄)(2쇄)---
(김종호님 감사합니다)

오자: 올려놓고 왼쪽 버튼

수정: 올려놓고 오른쪽 버튼

-----------------------------------
 

-----P.128(스타일시트 지정 부분)(2쇄)---
오자: 
h1{size:24px; color:#06f; font-family;'돋움';}
수정: h1{font-size:24px; color:#06f; font-family;'돋움';}
-----------------------------------

-----P.133(9째줄)(1쇄)---
오자: 
<linkhref=”...
수정: 
<link href=”...
-----------------------------------


-----P.143(13째줄)(1쇄)---
오자: 
1부에서는 HTML 태그에서도 블록 태그와 인라인 태그로 구분된다고 설명하였습니다.
수정: 
HTML 태그에서도 블록 태그와 인라인 태그가 있습니다. 대표적으로 <p> …</p>는 블록 태그이고, <img > 태그는 인라인 태그입니다.
-----------------------------------
 

-----P.148(예제에서)(2쇄)---
(류소현님 제공)
오자: 
또한 사용자 편의를 위해서 이전 버전에 비해 많은 부분이 보강되었습니다. 
수정: 
<span class="txt1">또한 사용자 편의를 위해서 이전 버전에 비해 많은 부분이 보강되었습니다.</span>
-----------------------------------
  

-----P.158(소스 링크 부분)(1쇄)---
오자: source/ch06/ex6-13_1.html, 
source/ch06/ex6-13_2.html 
수정: 
source/ch06/pic6-13_1.html,  source/ch06/pic6-13_2.html 
-----------------------------------
  

-----P.183(여기서잠깐 마지막줄)(1쇄)---
오자: 
이것은 3부 사이트 제작 실습에서 음수 값을 이용해서 레이아웃을 잡을 때 설명하겠습니다.
수정: 제거

 -------------------------------------------

-----P.190(마지막줄)(1쇄)---
오자: 
(주의: IE는 IE9을 제외하고는 border-radius를 적용하는 방법이 없습니다.)
수정:
 (주의: IE는 IE9을 제외하고는 border-radius를 적용하는 방법이 없습니다. 단, 편법적인 방법은 존재합니다.) 
 ------------------------------------------- 

 -----P.194(예제 7-5 별색 볼드 부분)(1쇄)---
(전성희님 감사합니다)

오자: box-shadow 2px 2px 5px :
#999;
수정: box-shadow: 2px 2px 5px #999;
-----------------------------------

-----P.230(소스코드에서 10째줄)(1쇄)---
오자: 
src: local(‘?’)
수정: src: local(‘☺‘)
-----------------------------------

-----P.243(예제 코드 .shadow1 중에서)(1쇄)---
(이지연님 감사합니다)

오자: 
#999999c
수정: 
#999999
-----------------------------------


-----P.282(그림 10-7 캡션)(1쇄)---
(이지연님 감사합니다)

오자: [그림 10-7] PNG와 GIF 파일 비교

수정: 
[그림 10-7] GIF와 PNG 파일 비교
-----------------------------------

-----P.128(위에서 7째줄)(2쇄)---
(박민수님 감사합니다)

오자: <style type="test/ccs" ... 

수정: 
<style type="test/css" ...
-----------------------------------

-----P.128(위에서 7째줄)(2쇄)---
(박민수님 감사합니다)

오자: <style type="test/ccs" ... 

수정: 
<style type="test/css" ...
-----------------------------------

-----P.135(그림 6-5 바로 위)(2쇄)---
(박민수님 감사합니다)

오자: 불러오게 할도 있습니다.

수정: 불러오게 할 수도 있습니다.

-----------------------------------
 

-----P.342(첫째쭐)(2쇄)---
(양남원님 감사합니다)

오자: 3
0픽셀을 줄 예정인데
수정: 20픽셀을 줄 예정인데
-----------------------------------
 

-----P.369(박스 안 소스 4째줄)(1쇄)---
(신고님 감사합니다)

오자: a herf="3">

수정: 
a herf="#">
-----------------------------------

-----P.374(2째줄)(1쇄)---
(신고님 감사합니다)

오자: center란 폴더에

수정: 
member란 폴더에
-----------------------------------
 



posted by 로드북
:
자료실 2011. 9. 8. 04:23
본문 예제소스               다운로드 
3부 실전예제 전체소스   다운로드

10장 서브페이지 PSD     다운로드

10장 메인페이지 PSD    

실전예제 프론트.psd


posted by 로드북
: