책소개
HTML5, CSS3, JavaScript, jQuery를 한 권으로!실전 프로젝트를 통하여 반응형 웹사이트를 직접 구현해 본다!이 책은 ‘웹 표준이라는 약속’에 대한 이야기를 바탕으로, 누구나 쉽게 단계적으로 따라갈 수 있도록 HTML5, CSS3, Javascript와 jQuery까지 표준형 웹 제작을 위한 모든 도구들을 기본부터 활용까지 리드하도록 만들어졌다. 누구나 쉽게 웹 표준에 맞는 페이지를 제작할 수 있도록 도구들의 기본부터 활용까지 다루되, PC와 스마트폰, 태블릿 등 사용자의 기기에 따라 유연하게 구현되는 차세대 웹 기술 ‘반응형 웹’을 소재로 하여 가장 최근에 이슈화되는 소재를 통하여 직접 웹 페이지를 제작하는 모든 독자분들께 실제적인 도움을 준다.
저자소개
EIT 웹 개발 총괄, 삼성인재개발원 차장을 역임하였으며, 주요 저서로는 실전프로젝트 반응형 웹퍼블리싱, 자바스크립트+jQuery 마스터 등이 있다.
목차
머리말실습에 필요한 기본 프로그램 안내반응형 프로젝트 미리보기CHAPTER 1 HTML51.1 HTML5 기본 문서 01 HTML5 기본 구성 02 W3C validator 03 마크업 기본 문법 규칙1.2 시멘틱 마크업과 논리적인 순서 마크업 01 시멘틱 마크업(Semantic markup) 02 논리적 순서 마크업(Logical sequence markup)1.3 블록 레벨 요소와 인라인요소 01 블록 레벨 요소(Block-level Elements) 02 인라인 요소(inline Element) 03 블록 레벨 요소와 인라인 요소의 특성1.4 기본 요소 01 제목 [h1]~[h6] 02 문단 [p] 03 주소 [address] 04 링크 [a] 05 이미지 [img]1.5 텍스트 관련 요소 01 [em],[strong],[mark],[b],[small],[sub],[sup]1.6 목록 관련 요소 01 순서 목록 [ol] 02 비순서 목록 [ul] 03 설명 목록 [dl]1.7 표 관련 요소 및 속성 01 표 생성 [table], [tr], [td], [th], [thead], [tbody], [tfoot], [colgroup] 02 셀 합치기 colspan 속성, rowspan 속성 03 표 접근성 [caption], scope 속성1.8 폼 관련 요소 및 주요 속성 01 폼 [form], [fieldset] 02 한줄 입력 요소 [input], type 속성 03 여러 줄 입력 요소, 선택 요소 [textarea], [select] 04 폼 접근성 label 속성 05 주요 입력 속성1.9 그룹 요소 01 [div] 02 [span]1.10 구조 관련 요소 01 [header], [section], [footer], [nav], [article], [aside]1.11 미디어 요소 01 [audio] 02 [video]CHAPTER 2 CSS (CSS5)2.1 CSS 기본 문법 01 내부 스타일시트 02 외부 스타일시트 03 @import 04 인라인 스타일(inline style)2.2 선택자(selector) 01 type 선택자 02 id 선택자 03 class 선택자 04 전체 선택자 05 하위 선택자 06 자식 선택자 07 인접 선택자 08 형제 선택자 09 그룹 선택자 10 속성 선택자 11 가상클래스 선택자 12 가상요소 선택자 13 종속 선택자 14 선택자의 우선순위2.3 문자 관련 스타일 01 font-family 02 font-size, 단위의 고찰 03 font-weight 04 font-style 05 font-variant 06 line-height 07 font 08 웹폰트 09 color, 색상 코드 고찰 10 letter-spacing, word-spacing 11 text-decoration 12 text-transform 13 text-shadow2.4 문단(paragraph) 관련 스타일 01 text-align 02 vertical-align 03 text-indent 04 word-wrap 05 word-break 06 white-space 07 text-overflow 08 display 09 visibility 10 overflow 11 opacity2.5 배경(background) 01 background-color 02 background-image 03 background-repeat 04 background-position 05 background-attachment 06 background-size 07 background-origin 08 background-clip 09 Image Sprite 10 배경에 gradient 적용하기 11 multiple background2.6 BOX MODEL 01 width, height 02 padding 03 margin 04 border 05 outline 06 box-sizing 07 box-shadow 08 resize 09 appearance2.7 기타 CSS3 속성 01 이차원 변형(2D transform) 02 속성전환(transitions) 03 애니메이션(animation) 04 다단편집(multi-column)2.8 레이아웃Ⅰ: float 01 float 02 clear 03 그 외 float 해제하는 몇 가지 방법2.9 레이아웃Ⅱ : position 01 position 02 left, right, top, bottom 03 z-index 04 float과 position으로 레이아웃 만들기 05 position 응용 예제2.10 미디어쿼리(media query) 01 [link ~ media=””] 02 @media 03 media query를 흉내내는 script2.11 그 밖의 layout 01 flex layout 02 grid layoutCHAPTER 3 자바스크립트3.1 자바스크립트 기본 형식 및 적용 방법 01 자바스크립트의 기본 형식 02 기본 규칙 03 적용 방법 04 적용 위치 05 기본 명령어3.2 변수와 상수 01 변수 선언(var, let) 02 상수 선언(const) 03 데이터 타입(Data Type)3.3 연산자 01 산술 연산자 02 대입 연산자 03 비교 연산자 04 논리 연산자 05 비트 연산자 06 삼항 연산자3.4 제어문 01 조건문 02 반복문 03 중지, 건너뛰기3.5 함수 01 선언적 함수 02 익명 함수 03 return, 매개변수 04 전역 변수와 지역 변수 05 재귀 함수 06 내장 함수3.6 객체 01 사용자 정의 객체 02 내장 객체3.7 이벤트 01 주요 이벤트 02 이벤트 연결 03 이벤트 객체3.8 BOM (Bowser Object Model) 01 window 객체 02 location 객체 03 screen 객체 04 history 객체 05 navigator 객체3.9 DOM (Document Object Model) 01 요소 선택 02 요소와 속성의 생성 및 삭제 03 스타일 04 form 객체CHAPTER 4 jQuery4.1 jQuery 연결 방법 01 Download 방식 02 CDN 방식 03 jQuery Migrate Plugin 04 jQuery 기본 형식4.2 jQuery 선택자 01 기본 선택자 02 속성 선택자 03 필터 선택자 04 탐색 선택자4.3 jQuery 주요 메서드 01 배열 관련 메서드 02 요소 관련 메서드 03 클래스 관련 메서드 04 속성 관련 메서드 05 스타일 관련 메서드 06 삽입 관련 메서드 07 스크롤 관련 메서드 08 삭제 관련 메서드 09 복사 및 감싸기 관련 메서드4.4 jQuery 이벤트 01 이벤트 종류 02 이벤트 연결 03 이벤트 객체4.5 jQuery 효과 01 기본 효과 02 Custom 효과4.6. jQuery 플러그인 사용 방법 01 SWIPER 02 DATEPICKER4.7 jQuery 충돌 방지와 JSON 파일 불러오기 01 $.noConflict() 메서드 02 $.ajax() 메서드CHAPTER 5 반응형 프로젝트 실무5.1 메인 페이지의 시안 점검 01 메인 페이지 PC 시안 02 메인 페이지 태블릿 시안 03 메인 페이지 모바일 시안 04 메인 페이지에 필요한 기타 시안 05 코딩용으로 잘라낸 이미지들5.2 메인 페이지의 마크업 01 index.html의 시작 부분 02 건너뛰기 링크 & 내부 링크 03 header 부분 04 본문 내용 부분 05 footer 부분 06 퀵 메뉴 부분 07 레이어 팝업 부분5.3 메인 페이지의 CSS (common.css) 01 기본 스타일 02 버튼 스타일 설정 03 header 부분 04 footer 부분 05 메인 롤링 부분 06 인기 여행지 부분 07 상담 및 최근 게시물 부분 08 퀵 메뉴 부분 09 팝업 부분5.4 메인 페이지의 스크립트 (common.js) 01 gnb의 작동 02 모바일 메뉴 띄우기 03 top 버튼 스크롤 04 PC브라우저에서 gnb 사라짐 방지5.5 서브 페이지의 시안 점검 01 회원가입 페이지 시안 02 프로그램 소개 페이지 시안 03 공지사항 목록 페이지 시안 04 로그인 페이지 시안 05 코딩용으로 잘라낸 이미지들5.6 서브 페이지의 마크업과 CSS 01 서브 페이지 공통 부분 02 회원가입 페이지 03 프로그램 소개 페이지 04 공지사항 목록 페이지 05 로그인 페이지5.7 서브 페이지의 스크립트 01 프로그램 소개의 더보기/접기 작동찾아보기
