• 따라 하면서 배우는 HTML5 CSS3 jQuery JavaScript 실무 활용 14가지

  • 정성하, 한미래, 안민수, 유민정, 김부윤, 김세환, 백국경, 김도윤, 임병철, 김춘경 지음

  • 웹동네 시리즈 _ 02
  • ISBN: 9788998139230
  • 30,000원 | 2013년 06월 10일 발행 | 548쪽



HTML5 CSS3 jQuery JavaScript를 활용한 다양한 웹 콘텐츠 제작 방법을 알려드립니다.

이 책은 재미없는 문법 설명서가 아닌 실무에서 바로 활용할 수 있는 14가지 웹 콘텐츠를 만들 수 있는 실무 활용집입니다. 예제를 작은 조각으로 나눠 하나씩 따라하며 실무를 배울 수 있게 구성돼있어, 구현 원리부터 제작 과정까지 단계별로 학습할 수 있습니다.

HTML5, CSS3, jQuery를 배우긴 했지만 정작 실무에서 활용을 못하시는 분! 또는 멋진 실무예제를 만들고 싶지만 무엇부터 어떻게 해야 할지 몰라서 발만 동동 구르고 있었던 분들을 위한 좋은 지침서가 될 것입니다.

★ 이 책에서 다루는 예제 ★

  • 그림자 있는 배너
  • 아쿠아 버튼
  • 배너 슬라이더
  • 탭 레이아웃
  • 원형 회전 텍스트 메뉴
  • 대각선 메뉴
  • 폴라로이드 사진게시판
  • 풀 스스크린 전자액자
  • 도넛 메뉴
  • SVG를 이요한 룰렛
  • 그리드 배너
  • 3D로 펼쳐지는 효가
  • Canvas 활용한 복권 긁기
  • 모바일 웹 페이지

 

책속으로

실무에서 바로 사용할 수 있는 예제를 하나씩 따라 하며 실무를 배울 수 있게 만들었습니다.

초보자도 손쉽게 배울 수 있게 HTML5, CSS3, jQuery를 활용한 실전 활용 예제를 만든 후 이를 작은 조각으로 나눠 하나씩 따라 하는 과정에서 실무를 배울 수 있게 구성했습니다. 일명 “단계별 학습법”이라고 이름을 정했습니다. 이후 10명은 지금까지 웹 표준 기술로는 만들고 싶어도 만들 수 없었던 웹 콘텐츠를 HTML5, CSS3, jQuery를 활용해 만든 후 단계별 학습법을 적용해 책을 집필하기 시작했습니다.

실무에서 바로 사용할 수 있는 다양한 실무 예제가 무려 14개!

이 책을 집필하기 시작한 후 5개월이 지난 지금, 드디어 이 책이 세상 밖으로 나오게 됐습니다. 예제는 크게 웹디자인 콘텐츠, 웹퍼블리싱 콘텐츠, 웹개발 콘텐츠 분야로 나눠 HTML5, CSS3, jQuery를 다양하게 활용했습니다. 즉, 이 책은 HTML5, CSS3, jQuery를 배우긴 했지만 정작 실무에서 활용하지 못하는 분! 또는 멋진 실무예제를 만들고 싶지만 어디서부터 어떻게 시작해야 할지 몰라서 발만 동동 구르고 있었던 분들을 위한 실무 활용 지침서입니다.

-- 저자 서문 중에서

정성하

웹 디자이너로 시작해 현재는 웹 퍼블리셔로 활동 중입니다. 웹표준 마크업, HTML5, JavaScript, 모바일 웹 앱(반응형 웹 디자인)에 관심을 두고 꾸준히 공부하고 있습니다.

한미래

시각디자인과를 졸업하고 웹디자이너로 일하다 퍼블리싱에 관심을 가지고 웹디자인과 퍼블리싱을 병행하며 일하고 있습니다. 디자인뿐 아니라 프론트엔드 개발에도 관심이 많고 웹디자인과 퍼블리싱과의 작업 효율에 대해 많이 고민합니다. 현재는 모바일 위주의 프로젝트를 진행하면서 HTML5/CSS3와 jQuery Mobile에 시간을 많이 쏟고 있습니다.

안민수

이른 아침 수영으로 하루를 시작하는 웹 퍼블리셔입니다. 현재는 웹 퍼블리셔로 일하고 있으며, 네이버 카페 ‘웹앱을 만드는 사람들의 모임’의 부운영자로 활동 중입니다. 정적인 것보다 동적이고, 인터랙티브한 콘텐츠에 관심이 많아서 HTML5, CSS3에 자연스럽게 관심을 가지고 공부하게 됐고, 앞으로 공부한 내용을 토대로 다양하고 재미있는 작업을 해 보려고 합니다.

유민정

숙명여자대학교 회화과 서양화를 전공하고 2000년도에 웹디자인을 시작해 KTD, 한국기술산업, 레디벅을 거쳐 현재 KT 계열사인 (주)앤써즈에서 디자이너로 일하고 있습니다. 교육, 포탈, 쇼핑몰, SNS, 모바일웹, 앱 등의 프로젝트를 진행해왔습니다. UI/UX, 웹표준 마크업, 모바일웹/앱, HTML5에 관심이 있고, 새로운 기술을 공부하고 업무에 적용하는 것을 즐거워합니다. 가장 행복해하는 것은 그림 그리기입니다.

김부윤

대학에서 영상디자인을 전공하고 플래시 개발을 시작으로 UI/게임/RIA/하이브리드앱 등 다양한 프로젝트를 경험해왔습니다. 현재 (주)바이널 컨버전스 AD그룹에서 프론트엔드 개발자로 근무하며, 웹동네 운영진으로도 활동하고 있습니다.

김세환

온라인에이전시 Media4th One에서 전문 프론트엔드 개발자로 근무 중입니다. 플래시로 웹에 입문한 후 자바스크립트로 영역을 넓히며, 신한카드, 에르고다음다이렉트 손해보험, 르노삼성, 롯데건설, KT&G, 씨디네트웍스 및 다수의 웹사이트와 인터랙티브 콘텐츠를 제작했습니다. 웹동네에서 활동하며, 개발자 스터디와 커뮤니티 활동에도 전력을 다하고 있습니다.

백국경

기업용 하이브리드 솔루션인 모피어스를 개발한 (주)유라클 기술연구소에서 UI 프레임워크 개발 및 개발자 교육을 담당하고 있습니다. 웹디자이너로 입문해 플래시 액션스크립터를 거쳐 HTML5 기반의 하이브리드 프레임워크를 개발하고 있습니다. 다양한 브라우저와 OS, 모바일 디바이스의 제한된 환경에서 크로스 브라우징과 성능에 대한 연구를 활발히 진행하고 있습니다.

김도윤

현재 액션스크립터로 재직 중이며, 스마트폰의 등장과 함께 다양한 언어를 익히는 즐거움(?)을 알아가는 IT 주변인입니다.

임병철

이전에는 불가능했던 많은 것들을 가능케 하는 HTML5에 흥미를 느끼고 땀 흘려 배우는 데 정진 중인 자칭 동안 개발자입니다.

김춘경

웹동네 분야 중 주로 프론트엔드 개발과 웹앱 및 모바일 웹앱을 개발하는 프리랜서로 활동하고 있으며, 책 집필 및 IT학원에서 웹 기술과 관련된 강의를 하고 있습니다. 네이버 카페 ‘웹앱을 만드는 사람들의 모임(http://cafe.naver.com/webappdev)’과 ‘웹동네(http://www.webdongne.com)’ 사이트를 운영하고 있습니다.

  • ▣ 01장: 그림자 있는 배너
    •  01. 분석하기
      • 용어 정리
      • 출력 효과 정의
    •  02. 스터디
      • 그림자 효과가 적용된 배너를 만드는 데 필요한 CSS 속성
      • 모서리가 둥근 배너를 만드는 원리
      • 배너에 그림자를 입히는 원리
      • 배너에 색상과 광택 효과를 입히는 원리
      • 배너와 그림자의 순서(위치)를 정하는 원리
      • 그림자의 모양만 변형하기 위한 원리
    •  03. 구현하기
      • 진행 순서(단계 나누기)
      • 구현 시작
      • 제작을 마치며
    •  
  • ▣ 02장: 아쿠아 버튼
    •  01. 분석하기
      • 용어 정리
      • 동작 효과 정의
    •  02. 스터디
      • 아쿠아 버튼을 만드는 데 필요한 CSS 속성
      • 버튼틀을 만들 때 사용하는 CSS 속성
      • 글자에 입체감을 주기 위한 CSS 속성
      • 버튼을 동적으로 만들어주는 CSS 속성
    •  03. 구현하기
      • 진행순서(단계 나누기)
      • 구현 시작
      • 제작을 마치며
    •  
  • ▣ 03장: 배너 슬라이더
    •  01. 분석하기
      • 용어 정리
      • 동작 효과 정의
    •  02. 스터디
      • 배너슬라이드를 만드는 데 필요한 CSS 속성
      • CSS3 선택자
      • transition
      • animation
      • @Keyframes
    •  03. 구현하기
      • 인터랙티브를 위한 구조 잡기
      • 진행 순서(단계나누기)
      • 제작을 마치며
    •  
  • ▣ 04장: 탭 레이아웃
    •  01. 분석하기
      • 용어 정리
      • 출력 효과 정의
      • 동작 효과 정의
    •  02. 스터디
      • 탭 레이아웃을 만드는 데 필요한 CSS 속성
      • 사선 탭을 만드는 원리
      • 자연스러운 그림자 효과를 만드는 원리
      • 가상 선택자
      • 박스 크기에 padding을 주어도 원래 크기로 보이게 하기
    •  03. 구현하기
      • 진행 순서(단계 나누기)
      • 제작을 마치며
    •  
  • ▣ 05장: 원형 회전 텍스트 메뉴
    •  01. 분석하기
      • 출력 효과 정의
      • 동작 효과 정의
    •  02. 스터디
      • 원형 회전 텍스트 메뉴를 만드는 데 필요한 CSS 속성 소개
      • 텍스트 메뉴를 회전시키는 원리
      • 회전 기준점 변경
    •  03. 구현하기
      • 진행 순서(단계 나누기)
      • 제작을 마치며
    •  
  • ▣ 06장: 대각선 메뉴
    •  01. 분석하기
      • 용어 정리
      • 출력 효과 정의
      • 동작 효과 정의
    •  02. 스터디
      • 대각선 메뉴를 만드는 데 필요한 CSS 속성
      • 비틀어진 메뉴를 만드는 원리
    •  03. 구현하기
      • 진행 순서(단계 나누기)
      • 제작을 마치며
    •  
  • ▣ 07장: 폴라로이드 사진 게시판
    •  01. 분석하기
      • 용어 정리
      • 출력 효과 정의
      • 동작 효과 정의
    •  02. 스터디
      • 폴라로이드 사진 게시판을 만드는 데 필요한 CSS 속성
      • 아이템을 임의의 각도로 회전 시키는 원리
      • 임의의 각도를 만드는 원리
      • 아이템 등장 효과의 원리
    •  03. 구현하기
      • 진행 순서(단계 나누기)
      • 구현시작
      • 제작을 마치며
    •  
  • ▣ 08장: 풀 스크린 전자액자
    •  01. 분석하기
      • 용어 정리
      • 출력 효과 정의
      • 동작 효과 정의
    •  02. 스터디
      • 풀 스크린 슬라이더를 만드는 데 필요한 CSS 속성
      • 이미지를 풀 스크린으로 출력하는 원리
      • 아이템 애니메이션 전환 효과의 원리
      • 음악 재생 기능
    •  03. 구현하기
      • 진행 순서(단계 나누기)
      • 구현 시작
      • 제작을 마치며
    •  
  • ▣ 09장: 도넛 메뉴
    •  01. 분석하기
      • 용어 정리
      • 출력 효과 정의
      • 동작 효과 정의
    •  02. 스터디
      • 도넛 메뉴를 만드는 데 필요한 CSS 속성
      • 애니메이션 기획
      • position
      • transition
      • mask-box-image
      • 사용자 정의 속성(data-*)
    •  03. 구현하기
      • 진행 순서 (단계 나누기)
      • 구현 시작
      • 제작을 마치며
    •  
  • ▣ 10장: SVG를 이용한 룰렛
    •  01. 분석하기
      • 용어 정리
      • 출력 화면 정의
      • 동작 효과 정의
    •  02. 스터디
      • SVG 룰렛 제작을 위한 스터디 항목
      • SVG 기초
      • 룰렛을 만드는 데 필요한 CSS3 속성
    •  03. 구현하기
      • 진행순서(단계 나누기)
      • 구현 시작
      • 제작을 마치며
    •  
  • ▣ 11장: 그리드 배너
    •  01. 분석하기
      • 용어 정리
      • 출력 효과 정의
      • 동작 효과 정의
    •  02. 스터디
      • 그리드 아이템의 3D 회전 효과
      • 그리드 아이템 슬라이드 효과
      • 슬라이드 배너의 자동 롤링
    •  03. 구현하기
      • 진행 순서(단계 나누기)
      • 구현 시작
      • 제작을 마치며
    •  
  • ▣ 12장: 3D로 펼쳐지는 효과
    •  01. 분석하기
      • 용어 정리
      • 출력 효과 정의
    •  02. 스터디
      •  3.로 펼쳐지는 효과를 만드는 데 필요한 CSS 속성
      •  3. transform
      • transition-origin
      • webkit-gradient
      • IK
    •  03. 구현하기
      • 진행 순서 (단계 나누기)
      • 구현 시작
      • 제작을 마치며
    •  
  • ▣ 13장: Canvas를 활용한 복권 긁기
    •  01. 분석하기
      • 용어 정리
    •  02. 스터디
      • 캔버스 사용준비
      • 복권 긁기 자국 만들기
      • 결과 이미지를 가리는 커버 이미지 그리기
      • 복권 긁기 효과 만들기
      • 복권 긁기 진행률 알아내기
    •  03. 구현하기
      • 진행 순서(단계 나누기)
      • 구현 시작
      • 제작을 마치며
    •  
  • ▣ 14장: 모바일 웹 페이지
    •  01. 분석하기
      • 용어 정리
      • 출력 효과 정의
      • 동작 효과 정의
    •  02. 스터디
      • 모바일 웹 페이지를 만드는 데 필요한 배경지식 및 CSS 속성
      • 모바일 웹 화면은 크기를 어떻게 만들어야 하나?
      • box-flex 태그
      • gradient, shadow, border-radius
    •  03. 구현하기
      • 진행 순서(단계 나누기)
      • 구현 시작
      • 제작을 마치며

예제 코드 다운로드 사이트

예제 코드 다운로드 사이트

관련 글