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

목차 (Table of Contents)

• 목차
• 1장 웹 서비스 환경 만들기 = 17
• 클라이언트 vs 호스트 = 18
• 웹 클라이언트 테스트 환경 만들기 = 20
• 웹 저작 도구 고르기와 설치하기 = 27
• 웹 호스트 환경 만들기 = 30
• 콘텐트 관리도구(CMS) 고르기 = 35
• 2장 HTML5, CSS3, jQuery 기초 = 37
• 구조 언어, HTML5 기초 작성법 = 38
• HTML5 기본 문서 만들기 = 38
• 본문 요소 작성하기 : 목록 = 43
• HTML5 아웃라인과 Section 요소 = 44
• 표현 언어, CSS3 기초 작성법 = 49
• 본문(body) 스타일링 = 50
• 제목(h1, h2) 스타일링 = 52
• 본문 배경＆글꼴 스타일링 = 53
• 동작 언어, JavaScript 기초 작성법 = 59
• JavaScript Library, jQuery 기초 작성법 = 77
• 3장 움직이는 배너 디자인 = 85
• HTML5 배너 구조 작성 = 88
• 배너를 클릭했을 때, 연결할 웹사이트 주소 입력하기 = 89
• 배너에 이미지와 텍스트 배치하기 = 89
• class를 이용해 요소에 식별자 설정하기 = 90
• CSS3 배너 스타일링 = 92
• body 기본 스타일링 = 92
• 배너 전체 영역 스타일링 = 92
• 배너에 배경 이미지 넣기 = 94
• 배너 로고 이미지 배치하기 = 95
• 배너 텍스트에 한글 웹 폰트 적용하기 = 98
• 배너 텍스트 위치 바로잡고 색 적용하기 = 100
• 마우스 포인터가 올라가기 전 상태 디자인하기 = 101
• jQuery로 배너에 소리 넣기 = 109
• 브라우저 호환성 검사 = 114
• 4장 페이드인／아웃 말풍선 디자인 = 117
• HTML5 링크 갤러리 구조 작성 = 120
• CSS3 링크 갤러리 스타일링 = 124
• body 기본 스타일링 = 124
• 제목을 영문 웹 폰트로 스타일링 = 125
• 사진 영역 스타일링 = 127
• 말풍선 스타일링 1 : 기본 = 132
• 말풍선 스타일링 2 : 위치 = 133
• 말풍선 스타일링 3 : 모서리가 둥근 테두리, 말 풍선 꼬리 = 135
• 말풍선 스타일링 4 : 트랜지션 설정 = 137
• jQuery 구형 브라우저에서 페이드인／아웃 구현 = 142
• CSS3 트랜지션 지원 여부 확인하기 = 143
• jQuery로 페인드인／아웃 구현하기 = 145
• 5장 라바 램프 내비게이션 디자인 = 155
• HTML5 내비게이션 구조 작성 = 158
• CSS3 라바 램프 스타일 내비게이션 스타일링 = 162
• body 기본 스타일링 = 162
• 제목 스타일링 : 영문 웹 폰트 = 162
• 내비게이션 틀 스타일링 = 164
• 내비게이션 항목 스타일링 = 167
• 내비게이션 움직이는 바 스타일링 : 그레이디언트 = 169
• 활성화된 아이템 표시 유지 스타일링 = 172
• jQuery 라바 램프 내비게이션 스크립팅 = 173
• 변수 선언 및 문서 객체 참조 = 174
• 라바 스타일링 = 178
• 라바 위치 지정 = 179
• 라바 그레이디언트 적용하기 = 181
• 라바 위치 조절하기 = 182
• 이벤트 감지와 구현하기 = 184
• 네임스페이스 만들기 = 189
• 플러그인 만들기 = 191
• 6장 공기 방울 애니메이션 버튼 디자인 = 197
• HTML5 버튼 구조 작성 = 200
• CSS3 버튼 및 확장 클래스 스타일링 = 204
• body 기본 스타일링 = 204
• body 추가 스타일링 : 무지개 색 그레이디언트 = 205
• CSS 코드에서 반복되는 부분을 LESS 툴로 동적으로 만들기 = 210
• LESS 함수 만들기 = 212
• buttons_wrap 스타일링 = 215
• jQuery 버튼에 사운드 플러그인 적용 = 232
• 7장 탭 메뉴 애니메이션 디자인 = 243
• HTML5 탭 메뉴 구조 작성 = 246
• IE 8 이하 웹 브라우저의 호환성을 고려한 코드 = 246
• 웹 폰트 적용하기와 외부 파일 호출하기 = 249
• 기본 구조 짜기 = 250
• CSS3＆LESS 탭 메뉴 스타일링 = 255
• 기본 스타일링 = 256
• 디자인 전체 영역과 제목 스타일링 = 257
• 탭 메뉴 스타일링 = 258
• 탭 콘텐츠 스타일링 1 : 자바스크립트가 지원되지 않는 상황 = 262
• 탭 콘텐츠 스타일링 2 : 자바스크립트가 지원되는 상황 = 263
• jQuery 탭 메뉴 플러그인 작성 = 265
• 플러그인을 사용할 파일 작성하기 = 265
• 플러그인 만들기 = 266
• 8장 CSS3 애니메이션 폼 디자인 = 277
• HTML5 폼 구조 작성 = 280
• 기본 구조 짜기 = 280
• 폼 구성 요소 구조 짜기 = 282
• CSS3＆LESS 폼 스타일링 = 287
• 기본 스타일링 = 288
• 폼 전체 영역(컨테이너 요소) 스타일링 = 289
• 제목 요소 스타일링 = 294
• 폼 요소 스타일링 1 : 레이블＆입력 상자 = 295
• 폼 요소 스타일링 2 : '이용 약관, 정보 수집' = 296
• 폼 요소 스타일링 3 : 입력 상자 안에 보여질 스프라이트 배경 이미지 = 297
• 폼 요소 스타일링 4 : 가입하기 버튼 = 300
• jQuery 폼 디자인 작성 = 304
• 9장 HTML5 비디오 플레이어 디자인 = 311
• HTML5 비디오 구조 작성 = 314
• HTML 기본 코드 작성하기 = 315
• 자바스크립트가 자동으로 만들어주는 코드 만들기 = 321
• jQuery 비디오 플레이어 플러그인 작성 = 323
• 플러그인 연결＆초기 옵션 설정하기 = 324
• 대상 객체 참조＆ 비디오 컨테이너 내부에 클래스 추가하기 = 325
• 동적으로 비디오 컨트롤 구조 만들기 = 328
• 비디오 컨트롤 버튼 설정하기 = 331
• 비디오 컨트롤러 탐색 바 설정하기 = 334
• 탐색 바 내부 슬라이더 만들기 = 335
• 탐색 바와 타이머 내용을 바꿀 함수 만들기 = 338
• 볼륨 슬라이더 만들기 = 340
• 음소거／음소거 해제 버튼에 연결할 함수 만들기 = 340
• CSS3＆LESS 비디오 플레이어 스타일링 = 343
• 기본 스타일링 = 345
• 비디오 전체 영역(비디오 컨테이너) 스타일링 = 348
• 비디오 컨트롤러 스타일링 1 : 전체 = 350
• 비디오 컨트롤러 스타일링 2 : 재생 버튼 = 351
• 비디오 컨트롤러 스타일링 3 : 탐색 바 = 353
• 비디오 컨트롤러 스타일링 4 : 타이머 = 355
• 비디오 컨트롤러 스타일링 5 : 볼륨 박스 = 356
• 비디오 컨트롤러 스타일링 6 : 볼륨 슬라이더 = 357
• 슬라이드 바를 비디오 안쪽에 넣고 색 바꾸기 = 360
• 10장 트랜스포머처럼 변신하는 반응형 웹 디자인 = 367
• HTML5 웹 문서 구조 작성 = 370
• header(브랜드＆내비게이션 영역)와 header bar(헤더 바 영역) 구조화 = 372
• contents 영역 구조화 = 373
• CSS3＆LESS 반응형 웹 디자인 스타일링 = 377
• 기본 환경 설정하기(normalize.css 다운로드, LESS 사용하기) = 377
• response.css 프레임워크 만들기 = 379
• 데스크톱 스타일링 1 : 기본 = 383
• 데스크톱 스타일링 2 : header = 384
• 데스크톱 스타일링 3 : header bar = 391
• 데스크톱 스타일링 4 : contents = 394
• 데스크톱 스타일링 5 : footer = 397
• 데스크톱 스타일링 6 : 드래그한 영역 색과 글자 색 = 398
• 태블릿 환경 스타일링 = 400
• 스마트폰 환경 스타일링 = 401
• jQuery 스크롤 고정 내비게이션 플러그인 작성 = 403
• 동영상 : 3D 슬라이딩 갤러리 디자인