HTML5, CSS3, JavaScript, jQuery를 한 권으로!
실전 프로젝트를 통하여 반응형 웹사이트를 직접 구현해 본다!

이 책은 ‘웹 표준이라는 약속’에 대한 이야기를 바탕으로, 누구나 쉽게 단계적으로 따라갈 수 있도록 HTML5, CSS3, Javascript와 jQuery까지 표준형 웹 제작을 위한 모든 도구들을 기본부터 활용까지 리드하도록 만들어졌습니다.

누구나 쉽게 웹 표준에 맞는 페이지를 제작할 수 있도록 도구들의 기본부터 활용까지 다루되, PC와 스마트폰, 태블릿 등 사용자의 기기에 따라 유연하게 구현되는 차세대 웹 기술 ‘반응형 웹’을 소재로 하여 가장 최근에 이슈화되는 소재를 통하여 직접 웹 페이지를 제작하는 모든 독자분들께 실제적인 도움을 줍니다.

HTML5, CSS3, JavaScript, jQuery를 한 권으로!
실전 프로젝트를 통하여 반응형 웹사이트를 직접 구현해 본다!



이 책은 ‘웹 표준이라는 약속’에 대한 이야기를 바탕으로, 누구나 쉽게 단계적으로 따라갈 수 있도록 HTML5, CSS3, Javascript와 jQuery까지 표준형 웹 제작을 위한 모든 도구들을 기본부터 활용까지 리드하도록 만들어졌습니다.



누구나 쉽게 웹 표준에 맞는 페이지를 제작할 수 있도록 도구들의 기본부터 활용까지 다루되, PC와 스마트폰, 태블릿 등 사용자의 기기에 따라 유연하게 구현되는 차세대 웹 기술 ‘반응형 웹’을 소재로 하여 가장 최근에 이슈화되는 소재를 통하여 직접 웹 페이지를 제작하는 모든 독자분들께 실제적인 도움을 줍니다.



HTML5와 CSS3에 대한 지식이 있다면 간단한 반응형 웹페이지를 제작하는 일은 그리 어려운 일은 아니지만 실제 다양한 디바이스와 디스플레이 환경을 고려한 반응형 웹을 구현하는 것은 결코 쉬운 일만은 아닐 것입니다. 이것은 아마도 반응형 웹에 대한 이론적인 지식만으로는 해결하기 힘든 부분이기 있어서가 아닐까 생각합니다. 반응형 웹 제작에 필요한 이론적인 정보들은 쉽게 찾아볼 수 있지만 이론을 활용한 실제 반응형 웹퍼블리싱에 대한 정보는 찾아보기 힘든 것이 현실입니다.



이 책은 꼭 반응형 웹이 아니더라도 웹퍼블리싱에 관심이 있는 입문자나 데스크탑 PC, 모바일 웹페이지에 대한 제작 경험은 있으나 반응형 웹 제작에 어려움을 겪고 있는 분들에게 도움이 될 것이라 생각합니다. 웹퍼블리싱 분야에 입문하는 분들에게는 웹퍼블리싱의 필수 기술인 HTML5, CSS3, Javascript, jQuery에서 꼭 알고 있어야 하는 내용들을 각 섹션별로 정리해 놓았으며 특히, 마지막 섹션인 반응형 웹 프로젝트에서는 반응형 웹 예제를 통하여 단순히 예제를 따라해 보는 것에 그치는 것이 아니라 HTML5, CSS3, Javascript, jQuery 기술을 활용하여 반응형 메인페이지와 회원가입, 게시판 등 다양한 서브페이지들을 어떤 방법으로 퍼블리싱 해야 되는지에 대해 충분히 경험해 볼 수 있도록 구성하였습니다.

머리말
실습에 필요한 기본 프로그램 안내
반응형 프로젝트 미리보기

CHAPTER 1 HTML5
1.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-shadow
2.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 opacity
2.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 background
2.6 BOX MODEL
01 width, height
02 padding
03 margin
04 border
05 outline
06 box-sizing
07 box-shadow
08 resize
09 appearance
2.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

02 @media
03 media query를 흉내내는 script
2.11 그 밖의 layout
01 flex layout
02 grid layout

CHAPTER 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 jQuery
4.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 DATEPICKER
4.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 프로그램 소개의 더보기/접기 작동

찾아보기