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

한빛출판네트워크

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

  • 저자 : 야무(지훈)
  • 출간 : 2012-03-12
  • 페이지 : 416 쪽
  • ISBN : 9788979149104
  • 물류코드 :1910
TAG :
초급 초중급 중급 중고급 고급
4.3점 (15명)
좋아요 : 42
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 슬라이딩 갤러리 디자인

부록/예제소스
자료명 등록일 다운로드
DOWNLOAD 예제소스 2019-05-30 다운로드
결재하기
• 문화비 소득공제 가능
• 배송료 : 0원배송료란?

배송료 안내

  • 책, 아이템 등 상품을 3만원 이상 구매시 무료배송
  • 브론즈, 실버, 골드회원이 주문하신 경우 무료배송

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

닫기

리뷰쓰기

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

* 리뷰 작성시 유의사항

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

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

오탈자 등록

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

도서 인증

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

* 회원가입후 도서인증을 하시면 마일리지 500점을 드립니다.

* 한빛 웹사이트에서 구입한 도서는 자동 인증됩니다.

* 도서인증은 일 3권, 월 10권, 년 50권으로 제한됩니다.

* 절판도서, eBook 등 일부 도서는 도서인증이 제한됩니다.

닫기

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

자료실