(만들면서 배우는) HTML5 + CSS3 + jQuery [전자책]

목차 (Table of Contents)

• 자료제공 :
• 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 슬라이딩 갤러리 디자인