애프터스킬 반응형 웹 실전 프로젝트 가이드

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

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

찾아보기