메뉴 바로가기 검색 및 카테고리 바로가기 본문 바로가기

한빛출판네트워크

한빛랩스 - 지식에 가능성을 머지하다 / 강의 콘텐츠 무료로 수강하시고 피드백을 남겨주세요. ▶︎

만들면서 배우는 HTML5+CSS3+jQuery

한빛미디어

집필서

절판

  • 저자 : 야무(지훈)
  • 출간 : 2012-03-12
  • 페이지 : 416 쪽
  • ISBN : 9788979149104
  • 물류코드 :1910
  • 초급 초중급 중급 중고급 고급
4.3점 (15명)
좋아요 : 49
HTML5+CSS3+jQuery(제이쿼리)! 만들면 쉽다, 만들면 재밌다, 만들면 놀랍다

웹 프로그래밍 언어를 배울 때 가장 쉽게, 가장 재미있게, 가장 확실히 배울 수 있는 방법은 뭔가를 직접 만들어보는 것입니다. 만들어보는 예제가 실무에서 쓰일 법한 예제라면 더 없이 좋습니다. 기초 예제 1개와 실무 예제 9개를 만들어보면서 HTML5, CSS3, jQuery를 확실히 익혀보세요.

차세대 웹 디자인 트렌드를 만날 수 있다
HTML5, CSS3, 제이쿼리는 기본, Modernizr, LESS, PIE, 클라우드 웹 폰트까지 최신 웹 표준 기술을 한 권으로 익힐 수 있습니다. 최신 기술을 통해 쉽고 편하게 UI를 구현해보세요.

모던 웹 UI 디자인의 모든 것
애니메이션 버튼, 배너, 말 풍선, 탭, 내비게이션, 3D 슬라이딩 갤러리, 폼, 비디오 플레이어, 반응형 웹 사이트 디자인까지 실무에서 바로 쓸 수 있는 예제를 만들 수 있습니다.

데모 사이트
책 속의 예제를 미리 체험할 수 있는 데모 사이트
http://www.hanb.co.kr/demo/1910/
야무(지훈) 저자

야무(지훈)

웹을 사랑하는 비주얼 디자이너로 웹 표준과 웹 그래픽 관련 강의를 하고 있습니다. 전공인 비주얼 디자인뿐만 아니라 프론트-앤드 프로그래밍에도 관심이 많습니다. 웹 표준 플랫폼 테크닉을 활용하여 UI를 구현하는 것을 즐거워하며, 늘 새롭고 놀라운 것을 익히기를 좋아합니다. 아카데미 정글을 비롯 신한은행, 매일유업, 한국인터넷전문가협회(Kipfa)에서 웹 디자인/표준 강의를 진행했으며 현재는 모노디(monod.co.kr)에서 교육 기획/운영을 하고 있습니다.

홈페이지_ yamoo9.com
커뮤니티_cafe.naver.com/webstandardproject
SNS_ facebook.com/yamoo9

1장 웹 서비스 환경 만들기
  클라이언트 vs 호스트
  웹 클라이언트 테스트 환경 만들기
  웹 저작 도구 고르기와 설치하기 
  웹 호스트 환경 만들기
  콘텐트 관리도구(CMS) 고르기
 
2장 HTML5, CSS3, jQuery 기초
  구조 언어, HTML5 기초 작성법
  - HTML5 기본 문서 만들기
  - 본문 요소 작성하기 : 목록
  - HTML5 아웃라인과 Section 요소
  표현 언어, CSS3 기초 작성법
  - 본문(body) 스타일링
  - 제목(h1, h2) 스타일링
  - 본문 배경&글꼴 스타일링
  동작 언어, JavaScript 기초 작성법
  JavaScript Library, jQuery 기초 작성법
 
3장 움직이는 배너 디자인
  HTML5 배너 구조 작성
  - 배너를 클릭했을 때, 연결할 웹사이트 주소 입력하기
  - class를 이용해 요소에 식별자 설정하기
  CSS3 배너 스타일링
  - body 기본 스타일링
  - 배너 전체 영역 스타일링
  - 배너에 배경 이미지 넣기
  - 배너 로고 이미지 배치하기
  - 배너 텍스트에 한글 웹 폰트 적용하기
  - 배너 텍스트 위치 바로잡고 색 적용하기 
  - 마우스 포인터가 올라가기 전 상태 디자인하기
  jQuery로 배너에 소리 넣기
  브라우저 호환성 검사
 
4장 페이드인/아웃 말풍선 디자인
  HTML5 링크 갤러리 구조 작성
  CSS3 링크 갤러리 스타일링
  - body 기본 스타일링
  - 제목을 영문 웹 폰트로 스타일링
  - 사진 영역 스타일링
  - 말풍선 스타일링 1: 기본
  - 말풍선 스타일링 2: 위치
  - 말풍선 스타일링 3: 모서리가 둥근 테두리, 말 풍선 꼬리
  - 말풍선 스타일링 4: 트랜지션 설정
  jQuery 구형 브라우저에서 페이드인/아웃 구현
  - CSS3 트랜지션 지원 여부 확인하기
  - jQuery로 페인드인/아웃 구현하기
 
5장 라바 램프 내비게이션 디자인
  HTML5 내비게이션 구조 작성
  CSS3 라바 램프 스타일 내비게이션 스타일링
  - body 기본 스타일링
  - 제목 스타일링: 영문 웹 폰트
  - 내비게이션 틀 스타일링
  - 내비게이션 항목 스타일링 
  - 내비게이션 움직이는 바 스타일링: 그레이디언트 
  - 활성화된 아이템 표시 유지 스타일링
  jQuery 라바 램프 내비게이션 스크립팅
  - 변수 선언
  - 라바 스타일링
  - 라바 위치 지정
  - 라바 그레이디언트 적용하기
  - 라바 위치 조절하기
  - 이벤트 감지와 구현하기
  - 네임스페이스 만들기
  - 플러그인 만들기
 
6장 공기 방울 애니메이션 버튼 디자인
  HTML5 버튼 구조 작성
  CSS3 버튼 및 확장 클래스 스타일링
  - body 기본 스타일링
  - body 추가 스타일링 : 무지개 색 그레이디언트
  - CSS 코드에서 반복되는 부분을 LESS 툴로 동적으로 만들기
  - LESS 함수 만들기
  - buttons_wrap 스타일링
  jQuery 버튼에 사운드 플러그인 적용
  - LESS와 SimpLESS 설치하고 이용하기
 
7장 탭 메뉴 애니메이션 디자인 
  HTML5 탭 메뉴 구조 작성
  - 인터넷 익스플로러 8 이하 브라우저의 호환성을 고려한 코드
  - 웹 폰트 적용하기와 외부 파일 호출하기
  - 기본 구조 짜기
  CSS3 & LESS 탭 메뉴 스타일링
  - 기본 스타일링
  - 디자인 전체 영역과 제목 스타일링
  - 탭 메뉴 스타일링
  - 탭 콘텐츠 스타일링 1 : 자바스크립트가 지원되지 않는 상황
  - 탭 콘텐츠 스타일링 2 : 자바스크립트가 지원되는 상황
  jQuery 탭 메뉴 플러그인 작성
  - 플러그인을 사용할 파일 작성하기
  - 플러그인 만들기
 
8장 CSS3 애니메이션 폼 디자인
  HTML5 폼 구조 작성
  - 기본 구조 짜기
  - 폼 구성 요소 구조 짜기
  CSS3 & LESS 폼 스타일링
  - 기본 스타일링
  - 폼 전체 영역(컨테이너 요소) 스타일링
  - 제목 요소 스타일링
  - 폼 요소 스타일링 1 : 레이블&입력 상자
  - 폼 요소 스타일링 2 : "이용 약관, 정보 수집"
  - 폼 요소 스타일링 3 : 입력 상자 안에 보여질 스프라이트 배경 이미지
  - 폼 요소 스타일링 4 : 가입하기 버튼
  jQuery 폼 디자인 작성
 
9장 HTML5 비디오 플레이어 디자인
  HTML5 비디오 구조 작성
  - HTML 기본 코드 작성하기
  - 자바스크립트가 자동으로 만들어주는 코드 만들기
  jQuery 비디오 플레이어 플러그인 작성
  - 플러그인 연결&초기 옵션 설정하기
  - 대상 객체 참조& 비디오 컨테이너 내부에 클래스 추가하기
  - 동적으로 비디오 컨트롤 구조 만들기
  - 비디오 컨트롤 버튼 설정하기
  - 비디오 컨트롤러 탐색 바 설정하기
  - 탐색 바 내부 슬라이더 만들기
  - 탐색 바와 타이머 내용을 바꿀 함수 만들기
  - 볼륨 슬라이더 만들기
  - 음소거/음소거 해제 버튼에 연결할 함수 만들기
  CSS3 & LESS 비디오 플레이어 스타일링
  - 기본 스타일링
  - 비디오 전체 영역(비디오 컨테이너) 스타일링
  - 비디오 컨트롤러 스타일링 1: 전체
  - 비디오 컨트롤러 스타일링 2: 재생 버튼
  - 비디오 컨트롤러 스타일링 3: 탐색 바
  - 비디오 컨트롤러 스타일링 4: 타이머
  - 비디오 컨트롤러 스타일링 5: 볼륨 박스
  - 비디오 컨트롤러 스타일링 6: 볼륨 슬라이더
  유지 보수 슬라이드 바를 비디오 안쪽에 넣고 색 바꾸기
 
10장 트랜스포머처럼 변신하는 반응형 웹 디자인
  HTML5 웹 문서 구조 작성
  - header(브랜드&내비게이션 영역)와 header bar(헤더 바 영역) 구조화
  - contents 영역 구조화
  CSS3 & LESS 반응형 웹 디자인 스타일링
  - 기본 환경 설정하기(normalize.css 다운로드, Less 사용하기)
  - response.css 프레임워크 만들기
  - 데스크톱 스타일링 1 : 기본
  - 데스크톱 스타일링 2 : header
  - 데스크톱 스타일링 3 : header bar
  - 데스크톱 스타일링 4 : contents
  - 데스크톱 스타일링 5 : footer
  - 데스크톱 스타일링 6 : 드래그한 영역 색과 글자 색 
  - 태블릿 환경 스타일링 
  - 스마트폰 환경 스타일링 
  jQuery 스크롤 고정 내비게이션 플러그인 작성
 
[동영상] 3D 슬라이딩 갤러리 디자인

자세한 그림과 설명들 이해하기 쉽게 되어있어서 처음 배우는데
이해하기 쉽고 재미있게 배웠다! ^^

다운로드 다 되고 나서 안 받아지네요^^;

책을 보며 따라하다보면 안되는게 있는거 같네요.

css파일의 selector도 안맞는거 같고...

책에나온 html소스랑 다운받은 예제 소스랑 다른게 많이 있는거 같아서

결과부터 보고 하나하나 참고하는 식으로 공부하고있네요.

책124page를 공부하던중 제목에서 처럼"본문예제/ex_03/begin/css폴더에 tooltip.css파일이없어" 더이상 진도를 못나가고 있습니다.
확인하셔서 답변부탁드립니다

맥에서 소스 다운 받았는데..
폴더 열면 .. 소스 열면 빈폴더만 있습니다.
mac os x버전 확인 부탁드립니다.

기본기부터 다지고 한글자 하나씩 빠짐없이 보고 해 보시길

Begin파일에서

이거 추가하고 이거 추가하면
요까지 되었죠?
라는 식으로 알려주는데 방법은 좋다만

"요까지 안되는데요?"

3장부터 진짜 저자는 자신이 기술한 대로
따라하면서 검증하고 오탈자를 대거 수정해야 할 것이다.
아마 오탈자 정도로 안될 것임.

이 책... 너무 쉬워서 싫다..ㅠ

어떻게 이렇게 쉽게 설명한건지 이해 할 수 없다.

개인적으로 웹프로그래머 경력 3년차인 내가 접하기에는 정말 억울하기 짝이 없다. 내가 html과 jquery를 어떻게 배웠는데... 이 책을 왜 이제야 나왔더란 말인가... 차라리 지금 배울껄...

웹개발자를 위한 책이라기보다는 웹디자이너에게 어울리는 그래픽적인 요소들이 많이 가미되어 있는 책이다. 물론 책 표지만 보더라도 디자이너를 위한 책 처럼 보인다.

그래서 인가... 재밌다...ㅠ 뭔가를 얻기위해 보게된 책을 아니지만 얻은게 있다.
css와 jquery에 대한 재미!! 사실 웹프로그래밍 업무를 하다보면 주로 서버측 언어나 아니면 DB를 많이 쓰게 되고 jquery나 css쪽은 등한시 하는 경우가 많다. 나역시도 개발자 이다보니 필요할때만 잠깐씩 찾아보는 정도에 그쳤다. 그런데 이 책이 나에게 새로운 길을 열어 주었다. 재밌게 마치 레고를 처음 책을 보면서 만들었던 때가 기억이 난다.

책보며 코딩을 따라치는걸 별로 안좋아 하는 나에게 쳐보고 싶게끔 만든 책이다.
뭔가 하나씩 나올때면 별거 아닌데도 뭔가 해낸 기분이고 빨리 다른곳에 적용해 보고 싶어 안달이 났다.

그래, 이 책은 달다. 근데 너무 달다.

html공부를 할까 해서 여러 서적을 보던중에
만들면서 배우는 HTML5+CSS3+jQuery를 보게 되었습니다.
깔끔한 흰색 표지에 텍스트만으로 디자인이 되어있었는데
모양도 보기 좋고 담백한 느낌이 들더군요.
요즘 j쿼리를 배우는 사람들이 많길래 공부하려고 준비했었는데 이 책을 차근차근 따라하다 보니 어느덧 이해가 쏙쏙 됐었습니다.
단순히 코드만 알려주는 것이 아닌 디자인의 장점을 살리는방법
좀 더 효과를 줄 수 있는 기능들만 핵심적으로 설명해 주셔서 쉽고 편리하게 다가온 듯 합니다.
기존 HTML과는 어떻게 다른지 알 수 있는 계기가 된 것 같습니다.
한가지 단점을 꼽자면... 중간중간 이미지가 틀린 이미지가 들어 간 것 같아서.. 뭐 이건.. 곧 오탈자 수정 하실테니.. 큰 문제는 되진 않겠죠?^^
오탈자 등록 몇개 했는데 언눙 수정하셔서 다음 분들에게는 좀 더 완벽한 참고서를 제공했으면 좋겠네요...^^

책 자체도 그렇고, 내용도 정말 컬러풀하고 알록달록 재미있게 꾸며져 있는 책입니다. 디자이너가 만든 책이라 그런지, 이게 정말 프로그래밍 관련 책인가? 라는 생각 될 정도로, 예쁘게 꾸며져 있다.
아주 초보자들을 위한 책으로, 처음부터 따라하기만 하면, 책이 끝날즈음에는 나도 어엿한 웹프로그램을 만들고 있게 되는, 참 신기한 책이다. 그리고, 웹의 중요한 점인 비쥬얼적인 부분도, 디자이너의 눈으로 바라보니, 전혀 새롭게 보이는 것 같았다. 같은 문법을 써도 이렇게 예쁘게 나오는구나 라는 감탄을 하게 된다.
아만 아쉬운 점은 요즘 맥 유저가 많이 늘고 있고, 저도 맥을 쓰지만, 거의 대부분이 윈도우 위주라 조금 아쉬웠다. 물론 웹이라는게 표준이 있어서, 그 표준을 따르면, 어디나서 구현이 되지만, 익스플로러와 다른 브라우저의 차이는 분명히 있다. 그리고 APM 이라는 프로그램을 사용하였는데, 맥에는 APM이라는것이 없어서, 고민하다가 MAPM 이라는 것을 찾았다. 맥을 쓰시는 분들이라면, 저 프로그램을 이용하시면 좋을 것 같다.

상대적으로 웹 프로그래밍을 등한시 했던 제가

웹 프로그래밍을 처음 시작하기 위해 선택한 책입니다.

기술저인 요소와 함께 눈이 즐거운 감성적인

디자인을 만들수 있는 방법까지 수록되어 있어 책을 따라

결과물을 산출해 내다보면 뿌듯함이 느껴지던군요.

또한 저 같이 웹 프로그래밍을 처음 시작하려는 사람들이

보기 좋게 목차들이 잘 나누어져 있습니다.

실무에 바로 적용하고 싶은 초보 웹프로그래머 여러분들이

접하시기에 가장 안성맞춤의 책이 아닐까 생각합니다.

지금까지의 수많은 html, css 관련 서적들은 단순히 기본개념설명, 예제 등으로 끝이였다. 이 서적 또한 그저 html5 와 css3, jQuery 의 사용법을 조금씩 살펴보는 책일줄 알았지만 기존의 서적들과는 달랐다.

디자이너가 전해주는, 그렇다고 디자인책이아닌 개발책이다.


목차에서부터 알 수 있듯이, 처음입문자를위한 환경구축, 기초적인 문법, 표현법, 설명을 2장까지 끝내고, 단순한 예제가아닌 움직인은 배너디자인, 탭메뉴 에니메이션, 에니메이션 회원가입 폼 등 실제로 써먹을 수있는 고퀄리티를 실습하며 따라가다보면 큰 성취감을 느낄수 있다.

중간중간 서적의 분량으로인해 자세한 설명이 힘든부분에서는 동영상강의를 제공해주어, 유익한내용을 더 많이, 쉽게 알려주고싶은 저자의 진심이 느낄 수 있었다. 또한 개인적으로 맥유저이다보니 맥환경에서 진행된 설명이 친숙하고 몰랐던 좋은 툴들을 알 수 있었다. 브라우저별 호환, 비호환의 분류와 그에따른 처리방법또한 꼼꼼히 알려주어 참고할 수 있었다.

html5, css3의 새로운 기능들, 이제는 필수가‰瑩嗤

소스자료를 받아 압축을 푸는데 Viking 바이러스 100개가 걸려 있더군요.
이런~~

시작부분에는

웹서비스 환경으로

호스트와 클라이언트가 바라보는 창 구성으로 간단한 소개


그후

각각의 언어별 설명이 나와있으며,

html , css3 , jquery 를 소개하면서

간단한 기본 작업부터, 요소

스타일링부터, 글꼴, 배경 등 기초적인 부분을 다루며

확장된 html 구조들이 나오게 됩니다.


움직이는 배너의 경우에는 실제 소스코드로서 만들어 나가는 과정이 재미있습니다.

그뒤로, 링크를 통한 방법들,

말풍선에 대한 스타일등

레이아웃, 아웃라인, 등등 설정 부분에 초점이 맞춰져 있으며


장을 넘어갈수록

이제 세가지 언어들을 활용하는 부분이 나오게 됩니다.

내비게이션 디자인의 경우는

스타일링이 주를 이루지만,

변수부터, 라바를 사용하는 , 적용시키는 구성등이 나옵니다.

각장마다.

본격적으로 디자인하는 작업들이 나오면서

웹에서 보던 디자인들을 스타일링 할 수 있으나,

조금씩 어렵기도 하며, 난해하다가도,

순서에 맞춰 해나가다 보면 어느새 만들어진 결과물에 보람있죠.


이제 에니메이션의 구성들도 나오게 되는데요

각각의 코드별, 콘텐츠별 스타일링이 되고

예외의 경우나, 웹상의 적용되지 않는 상황도 소개 됩니다.

계속해서, 폼에 대한 스타일링 부터,

비디오 플레이어까지 디자인등을 소개하며

비디오의 경우에는 컨트롤러부터, 슬라이더

각각의 구성등이 돋보입니다.


마지막 장의 경우에는 반응을 통한 디자인부터

지금껏 배워온 요소들을 모두 사용하거나 활용하게 되어

요즘 부각되는 많은 디자인이나, 웹에서 보이는

웹디자인들을 모두다 다뤄볼 수 있습니다.


초보자의 경우 조금 헤맬수도 있지만,

각 장마다 이론이나, 예제가 각각 다른 부분으로서

구성이 아주 잘되어 있습니다.

물론 신간이기도 해서 최신 트렌드에 맞는 활용 예제가 돋보이며

올 컬러의 산뜻함과 읽기 편한 레이아웃등은 강추입니다.!

전반부에 이론, 후반부에 예제 구성이 아닌

각 장마다 필요한 이론을 설명해주고 예제를 통해

실습해보며 공부할 수 있는 아주 좋은구성입니다.

기본문법부터 최신트렌드까지 어디하나 건너뛸 곳이 없는

좋은책이네요^^

결제하기
• 문화비 소득공제 가능
• 배송료 : 2,000원배송료란?

배송료 안내

  • 20,000원 이상 구매시 도서 배송 무료
  • 브론즈, 실버, 골드회원이 주문하신 경우 무료배송

무료배송 상품을 포함하여 주문하신 경우에는 구매금액에 관계없이 무료로 배송해 드립니다.

닫기

리뷰쓰기

닫기
* 상품명 :
만들면서 배우는 HTML5+CSS3+jQuery
* 제목 :
* 별점평가
* 내용 :

* 리뷰 작성시 유의사항

글이나 이미지/사진 저작권 등 다른 사람의 권리를 침해하거나 명예를 훼손하는 게시물은 이용약관 및 관련법률에 의해 제재를 받을 수 있습니다.

1. 특히 뉴스/언론사 기사를 전문 또는 부분적으로 '허락없이' 갖고 와서는 안됩니다 (출처를 밝히는 경우에도 안됨).
2. 저작권자의 허락을 받지 않은 콘텐츠의 무단 사용은 저작권자의 권리를 침해하는 행위로, 이에 대한 법적 책임을 지게 될 수 있습니다.

오탈자 등록

닫기
* 도서명 :
만들면서 배우는 HTML5+CSS3+jQuery
* 구분 :
* 상품 버전
종이책 PDF ePub
* 페이지 :
* 위치정보 :
* 내용 :

도서 인증

닫기
도서명*
만들면서 배우는 HTML5+CSS3+jQuery
구입처*
구입일*
부가기호*
부가기호 안내

* 온라인 또는 오프라인 서점에서 구입한 도서를 인증하면 마일리지 500점을 드립니다.

* 도서인증은 일 3권, 월 10권, 년 50권으로 제한되며 절판도서, eBook 등 일부 도서는 인증이 제한됩니다.

* 구입하지 않고, 허위로 도서 인증을 한 것으로 판단되면 웹사이트 이용이 제한될 수 있습니다.

닫기

해당 상품을 장바구니에 담았습니다.이미 장바구니에 추가된 상품입니다.
장바구니로 이동하시겠습니까?

자료실

최근 본 상품1