신간소개 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 로드북
:
편집자노트 2011. 9. 4. 22:46
책이란 무엇인가에 대해 많은 생각이 드는 요즘이다. 분야마다 편집자의 역할 그리고 범위가 많이 다르기는 하지만, 분명 책이 갖추어야 할 기본적인 요소는 있는 듯하다. 내맘대로 생각이지만, 한 번 정리해본다.

책이 갖추어야 할 요소는 크게 내용과 형식 두 가지 측면으로 분류해볼 수 있다. 형식적인 측면은 제껴두고 책의 가치(혹은 무게감)에 가장 크게 영향을 미치는 내용적인 측면을 생각해보았다.

1. 분명한 컨셉
편집자라면 누구나 가장 힘들어 하는 부분이 컨셉 정의와 구현일 것이다. 컨셉 도출과 구현 능력이야말로 편집자의 내공 차이를 확연하게 드러나게 해준다.
출판은 컨셉으로 시작해서 컨셉으로 끝난다고 해도 과언이 아니다. 책이 전하고자 하는 메시지를 한 줄로 설명할 수 있을 때, 그 한줄을 보통 컨셉이라고 일컫는다.
그리고 그 한 줄의 메시지를 1페이지부터 끝까지 일관되게 관통할 수 있도록 유지하는 게 책이 갖추어야 할 요소 중 가장 중요한 제1요소라고 생각한다.
블루오션의 새로운 주제를 개척하든, 레드오션의 경쟁적 주제에 뛰어들든 컨셉을 제대로 설정하는 것이야말로 혹 실패를 하더라도 배울 수 있고 성장할 수 있기에 정말로 중요하다.

2. 목표를 향한 논리적 전개
논리적이어야 한다. 목표점이 있어야 하고, 그 목표점을 향해 중간중간 길을 잃지 않아야 한다. 강은 지류를 많이 만나면 만날수록 본류가 넓어지고 커지지만, 책은 지류가 많을수록 본류가 흐트러지거나 목적지를 잃어버리고 막힐 가능성이 크다. 지류는 특히 그 깊이(depth)와 양을 조절하여 삼천포로 빠지지 않게 하는 것이 중요하다. 무엇보다 논리성을 강화하기 위해서는 지류에 대한 관리가 중요하다.
이를 위해서는 지속적으로 스토리 요약을 해봐야 한다. 목차만 갖고는 책의 논리적 구성력을 파악하기 힘들다. 별도로 짧은 문장으로 요약을 해나가면서 허점을 보완해야 한다.

 3. 추정이 아닌 실험과 경험을 통한 정확한 정보
책에서 정확한 정보의 전달이야말로 굉장히 중요하다. 추정에 의해 서술하는 것이 정확성을 해치는 가장 큰 적이라고 할 수 있다. 그리고 인용으로만 가득찬 원고는 저작권 침해 가능성뿐만 아니라 논리적 전개를 막는 가장 큰 원인이다.
정확한 정보를 위해서는 끊임없이 실험하고 확인해야 하는 것이다.
사실, 책의 저술 기간을 가장 많이 잡아먹는 요소가 정확한 정보를 가져야 하는 책의 특성 때문이 아닌가 싶다.

4. 독창성
여기서의 독창성은 서술적 전개의 독창성을 일컫는다. 수많은 출판사가 같은 주제의 책을 지속적으로 경쟁적으로 출간한다. 특히 시장이 큰 주제의 경우는 그 정도가 심하다. 독창성을 유지해야 한다는 것은 저작권 문제에 대한 이유도 있지만, 무엇보다 독창성에 근거해야 독자에게 쉽게 전달할 수 있기 때문이다.
독창성을 높이기 위해서는 연구와 집필을 완전하게 분리하는 것이다. 아무리 전문가라 하더라도 다른 도서나 참고자료의 연구 없이 집필하는 것은 불가능하다. 하지만, 연구와 집필을 병행하게 되면 참고했던 자료의 지식을 그대로 베껴쓰기할 가능성이 농후하다.
가장 좋은 방법은 저자의 지식 한도내에서 집필을 해나가되, 막히는 부분은 <연구필요> <참고 필요> <확인 필요> 등으로 메모해놓고 나중에 한번 더 그 부분을 연구하고 참고자료를 살펴본 후에 다시 한번 백지 상태에서 저술을 시작하는 것이 좋다. 하지만, 불가피하게 서술시에 비슷하게 인용해야 한다면 반드시 그 출처를 밝히는 게 좋다.
편집자도 독창성의 관점에서 항상 살펴봐야 한다. 독창성은 논리적 전개라는 관점에 보면 쉽게 점검할 수 있는 영역이다.

5. 흥미 유발
책은 논문과 그 성격이 판이하게 다르다. 잡지와 같은 일회성 지식 전달 매체와도 확연히 다르다. 독자에게 포기하지 않고 원하는 것을 얻을 수 있도록 하는 것이 중요하다. 그러기 위해서는 흥미를 북돋는 것이 반드시 필요하다. 그러나 흥미 유발이 주가 되어서는 안 된다. 핵심을 놓쳐버린 흥미유발은 독자에게 짜증만 불러온다. 

6. 장인정신이 들어가야
나의 멘토였던 분께서 책에 들어갈 그래프 하나 찾기 위해 하루 온종일 광활한 인터넷을 뒤졌다는 에피소드를 얘기해준 적이 있다. 바로 이런 게 장인정신이 아닌가 싶다. 적절한 용어를 찾고 적절한 표현을 찾고 적절한 그림을 생각해내고 적절한 도표를 만들어내기 위해 치열하게 찾고 연구하는 열정, 그게 곧 장인정신이라고 본다.
모든 책을 장인정신으로 만들 필요는 없다고 본다. 어떤 책은 저자 중심의 책이 될 수도 있고 어떤 책은 타이밍 때문에 빠른 정보전달을 위해 소소한 것을 포기할 수도 있다. 하지만, 지속적으로 일정 비율로 중요한 주제들을 선정하고 장인정신을 갖고 책을 만들 필요가 있다. 

책이 갖추어야 할 요소를 정리해보았지만, 참으로 힘든 영역이다. 시장, 타이밍, 독자성향 등등 수많은 요인이 복합적으로 작동하는 게 출판이라는 시장이다보니 더욱 그러하다.
제목에 ver0.5라고 한 이유는 나중에 이 글을 한번 더 갱신하고 픈 이유 때문이다.
posted by 로드북
: