책이 세상을 바꾼다

안녕하세요.

도서 2종에 대해 독자 리뷰 이벤트를 합니다.

[이벤트 주요 내용]

1. 해당 도서

 이제 실전이다, HTML5&CSS3 사이트 제작의 모든 것

 IT 아키텍트가 하지 말아야 할 128가지

2. 신청 방법

  이메일 신청: chief@roadbook.co.kr

  이름, 직업, 성별, 나이, 간단한 신청동기를 써주세요. 

3. 선정 인원

  도서당 5명(총 10명) 

4. 마감일과 당첨자 발표

   마감일은 5월 5일이며 조기에 마감될 수 있습니다.

   이메일로 개별 통보합니다.

감사합니다. 

  ● 저자: 양용석

  ● 페이지: 464

  ● 판형: 4X6배 변형(190 x 244)

  ● 도수: 2도

  ● 정가: 25,000원

  ● 발행일: 2012년 4월 20일

  ● ISBN: 978-89-966598-9-1 93560

[절판된 도서입니다]

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

sample.pdf

_도서 내용

HTML5와 CSS3로 다양한 레이아웃 디자인을 해보는 것부터 시작합니다. 실전 첫 단계로 레스토랑 체인점 사이트를 제작해보고 바로 리뉴얼까지 해보면서 CSS의 강력한 기능을 체험할 수 있습니다.

쇼핑몰 웹사이트 디자인은 이 책의 하이라이트입니다. 쇼핑몰은 수많은 디자인 기법들이 적용되기 때문에 아주 많은 고급 기법을 직접 체득할 수 있습니다.

모바일 시대에 각종 기기에 최적화한 사이트를 만드는 능력은 당연히 필수겠죠? CSS의 미디어 쿼리 기술로 태블릿이나 스마트폰 등 다양한 기기에서 맞춘 사이트를 만들어봅니다. 모르면 힘들지만, 알고 나면 정말 쉽고 강력하다는 것을 느낄 겁니다.

그리고 가변길이 사이트까지 섭렵하면, 여러 분은 웹 표준 디자인 전문가로서 큰 자신감을 얻을 수 있을 것입니다.

_대상 독자

아직도 CSS가 익숙지 않아서 매일 디자인 버그에 시달리고 있는 웹 디자이너

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

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

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

_목차

1장 HTML5와 CSS3 소개

Section 1 HTML5에서 추가된 새로운 태그

Section 2 CSS3의 새로운 기능

Section 3 HTML5와 CSS3를 이용하여 다양한 레이아웃 만들기

Section 4 포토샵을 이용한 웹 이미지 최적화(GIF, JPG, PNG)

Section 5 드림위버를 사용해 좀 더 편리하게 사이트 작업하기

2장 실전 웹사이트 제작 

Section 1 웹사이트 제작에 들어가기 전 기획 및 설계

Section 2 디자인(레이아웃) 작업 프로세스

Section 3 페이지 제작에 앞서 해야 할 준비 작업

Section 4 사이트의 구조 확인 및 HTML 태그 작업

Section 5 헤더(header)와 메인 메뉴(nav) 부분 처리

Section 6 본문(article)과 푸터(footer) 부분 처리

Section 7 프론트 페이지 정리 및 jQuery를 이용한 슬라이드 효과

Section 8 jQuery를 이용한 드롭다운 메뉴의 추가

Section 9 서브 페이지 제작

Section 10 브라우저 호환성 확인

_주요 내용

웹 표준 디자인 전문가로 가는 길을 제시한다!

실전! HTML5 & CSS3 웹 디자인의 모든 것

레스토랑 체인점 웹사이트 개발

HTML5 사이트의 구조를 어떻게 만드는지, 그에 따른 디자인 처리는 CSS3로 어떻게 하는지 자세하게 설명합니다.

빠르고 쉽게 웹사이트를 리뉴얼한다!

기본적인 HTML 구조는 거의 유지한 상태에서 CSS를 이용하여 사이트를 리뉴얼하는 과정을 상세하게 배울 수 있습니다.

쇼핑몰 웹사이트 제작을 통한 다양한 기법 습득

쇼핑몰 사이트 요소에 다양한 기법이 적용되기 때문에 웹 표준 디자인에 대한 전문적인 스킬을 배울 수 있어 자신감을 높일 수 있습니다.

미디어 쿼리를 이용한 모바일 및 가변길이 사이트 제작

미디어 쿼리를 이용하여 앞서 개발한 쇼핑몰 사이트를 모바일 기기에 최적화하는 방법을 소개합니다. CSS를 이용하여 PC, 태블릿, 스마트폰에서 볼 때 각각 다른 사이트로 만들 수 있는 기법이 소개됩니다.

Q&A 사이트를 운영하여 언제든지 궁금한 점을 물어볼 수 있고 빠르게 답해드립니다.

http://roadbook.zerois.net/qna

_편집자 코멘트

이 책은 제목 그대로 “실전 감각”을 익히는 책입니다. HTML5와 CSS3로 다양한 레이아웃 디자인을 해보는 것부터 시작합니다. 이후 실전 첫 단계로 레스토랑 체인점 사이트를 디자인해봅니다. 그리고 이 사이트의 리뉴얼을 해보면서 CSS의 강력한 기능을 체험할 수 있습니다.

쇼핑몰 웹사이트 제작 부분이 압권입니다. 쇼핑몰은 복잡한 것 같지만, 사실 구조는 간단합니다. 하지만 CSS로 디자인을 제어할 수 있는 수많은 기법들이 적용되기 때문에 아주 많은 고급 기법을 직접 체득하고 내 디자인 능력으로 만들 수 있습니다.

모바일 시대에 각종 기기에 최적화한 사이트를 만드는 능력은 당연히 필수겠죠? CSS의 미디어 쿼리 기술로 태블릿이나 스마트폰 등 다양한 기기에서 맞춘 사이트를 만들어봅니다. 모르면 힘들지만, 알고 나면 정말 쉽고 강력하다는 것을 느낄 겁니다.

그리고 가변길이 사이트까지 섭렵하면, 여러 분은 웹 표준 디자인 전문가로서 큰 자신감을 얻을 수 있을 것입니다.

_상세 이미지

HTML5로 사이트 구조 설계를 어떻게 하고 CSS로 디자인을 어떻게 제어하는지 확실하게 연습할 수 있습니다.

웹 표준 사이트는 어떻게 리뉴얼을 할까요? CSS만 바꾸어도 사이트는 확실하게 달라질 수 있습니다.

쇼핑몰 디자인? 어렵지 않아요~. 복잡해 보이지만, 사실 무척 간단합니다. 스티키 윈도우도 한 번 구현해볼까요? 쇼핑몰 사이트 디자인을 잘 배워두면 어떤 복잡한 웹 디자인도 거뜬히 해낼 수 있을 것 같은데요~.

어떤 다른 모양의 모바일 디바이스에서건 웹사이트가 잘 보여야겠죠? 가변길이 사이트도 아주 자세히 설명해드립니다.

“다양한 웹 제작 툴도 소개합니다. 워드프레스나 제로보드도 소개합니다. 개발 환경에 관한 전체적인 그림을 그릴 수 있도록 도움을 드립니다.” 

_저자 소개

양용석 ugpapa@gmail.com

아름다운 섬 제주도에서 프리랜서로 활동하고 있다. IT 관련 강의 및 집필 활동을 하고 있으며 다양한 웹사이트 제작을 하고 있다.

<처음부터 다시 배우는 HTML5&CSS3>(로드북)을 집필하였으며, 최근에 제작한 사이트로는 두바이 아시아나호텔(www.asianahoteldubai.com), 스마트북스(www.smartbooks.so) 등이 있으며, 지금까지 30여 개가 넘는 다양한 사이트를 개발하였다.

HTML5와 CSS3 그리고 jQuery에 많은 관심이 있으며, 전세계 인터넷 트렌드에 발 빠르게 대응하려 노력하고 있다. 또한 사진 및 사진 장비(DSLR)에 대해서도 열정적이며 제주의 풍경을 즐겨 촬영하고 있다.

개인 블로그(ugpapa.tistory.com)에서도 저자를 만날 수 있다.

현재 두 딸과 아들 그리고 아내와 함께 살고 있다.

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

(2012년 8월 8일 현재)

-----p.29(중간 부분)-------------------------------------------

(bokhanb님 제공)

오류: http://goo.gl/kAn11 

수정: http://css3pie.com/

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

-----p.46(소스 마지막 주석)----

(박상도님 제공)

오자: 폰트 사이트

수정: 폰트 사이즈

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

-----p.56(3째줄)-------------------------------------------

( bokhanb님 제공)

오류: "</nav>과 <article> 사이에 있는 <div class="clear"></div>는 제거해 주기 바랍니다."

수정: "</nav>과 <article> 사이에 있는 <div class="clear"></div>과 </article>과 <footer> 사이에 있는 <div class="clear"></div> 부분을 제거해주시기 바랍니다.

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

-----p.56(그림1.3-20 오른쪽 float:left 두 개)----

(zooo님 제공)

오자: float:left

수정: float:right

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

-----p.62-------------------------------------------

(bokhanb님 제공)

오류: Ctrl+Alt+s

수정: Crtl+Alt+Shift+s

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

 -----p.71(아래에서 3째줄)----

(zooo님 제공)

오자: 주는 ㅌ것이

수정: 주는 것이

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

-----p.69, 73, 85, 79------------------------------

(zooo님 제공)

오자: WISIWYG, WYSYWIG

수정: WYSIWYG

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

-----p.104(그림 2.3-5)-------------------------------------------

(bokhanb님 제공)

둥근 넘버링 10번이 가르키는 곳은 "웹 URL" 부분으로 수정되어야 합니다.

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

-----p.110-------------------------------------------

(bokhanb님 제공)

body부분의 background-color:#FFF; 부분의 그림도 추가되어야 합니다.

아래 그림 참고하세요.

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

-----p.137(아래에서 2번째)-------------------------------

오류: article #front_box.box1 { border-right:none; }

수정: article #front_box .box1 { border-right:none; }

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

-----p.144(박스 안 코드 마지막 li 태그 부분)-------------------------------

(bokhanb님 제공)

오류: <li><img src="images/slide2.jpg" width"900" height="496"></li>

수정: <li><img src="images/slide3.jpg" width"900" height="496"></li>

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

-----p.197(소스 중복)---------------------------------------------------

오류: nav ul.menu li a 중복

수정: 처음 나오는 nav ul.menu li a { } 제거

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

-----p.212(소스 2~3번째줄)----

(대막리지님 제공)

오자: 소스 2째줄 (padding:0 5px;)

수정: 제거해야 함

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

2012년 4월 출간 예정도서를 소개합니다.

<처음부터 다시 배우는 HTML5&CSS3>의 실전편으로 준비하였습니다. 구구절절 설명보다는 짧은 제목과 관련 이미지만 포스팅하겠습니다.

HTML5로 사이트 구조 설계를 어떻게 하고 CSS로 디자인을 어떻게 제어하는지 확실하게 연습할 수 있습니다.

기존의 사이트는 어떻게 리뉴얼을 할까요? CSS만 바꾸어도 사이트는 확실하게 달라질 수 있습니다.

쇼핑몰 디자인? 어렵지 않아요~~~. 복잡해보이지만, 사실 아주아주 간단합니다. 스티키 윈도우도 한번 구현해볼까요? 쇼핑몰 사이트 디자인을 잘 배워두면 어떤 복잡한 웹 디자인도 거뜬히 해낼 수 있을 것 같은데요~~~.

모바일에서는 어떤 다른 모양의 디바이스에서건 웹사이트가 잘 보여야겠죠? 가변길이 사이트도 아주 자세히 설명해드립니다.

다양한 웹 저작 툴도 소개합니다. 워드프레스나 제로보드도 소개합니다. 개발환경에 관한 전체적인 그림을 그릴 수 있는 데 도움을 얻을 수 있습니다.

아~~ 그런데, 표지가 너무 어려워요? 1번? 2번? 어떤 게 좋을까요?

-------------------- 1번 ------------------- 

-------------------- 2번 -------------------

-------------------- 3번 -------------------

처음부터 다시 배우는 HTML5 & CSS3 : 실전 웹 표준 사이트 제작까지' 란 책을 참고하면서 코딩을 진행하였습니다. 

왠지 모르게 이 책을 사서 독학을 시작한 후 부터 CSS 코딩에 재미를 붙였으며 홈페이지에도 작지않은 변화가(?) 발생한거 같습니다.