http://fromyou.tistory.com/581 (2307)
안녕하세요, 현재 성공회대학교 소프트웨어공학과 외래교수로 강의중인 원철연입니다.
얼마 전 HTML5, CSS and Javascript 책 한 권 분량(500 페이지, A4 기준)을 모두 본 블로그에 공개했습니다.
전체 목차가 일목요연하게 정리된 게 없어서 스스로 학습하는데 조금 어려움이 있을 것 같아서 엑셀 파일에 전체 리스트를 다음과 같이 만들었습니다.
필요하신 분들을 보시고 학습에 조금이라도 도움이 되시기 바랍니다.
---------------------------------------------------------
좋은 책 한권이 블로그에 올라와 있어 소개합니다. (위에 내용은 링크된 블로그 원작자분 글입니다)
아래는 목차입니다.
1 HTML5 등장 배경 및 표준화 현황
2 1. HTM5의 구조 및 기본 지식 익히기
3 1.2 웹 브라우저(Browser)의 기능과 한계
4 1.3 HTM5의 구조(Structure)
5 1.3.1 HTML5의 요소(Element) 작성 방법
6 1.3.2 HTML5에서 요소(Element)의 속성(Attribute) 작성 방법
7 1.4 환경설정 및 기본 편집기
8 2. metadata Elements
9 2.2 meta 요소(Elements)
10 3. Section Elements, 3.1 nav, header 요소(Element)를 이용한 구성
11 3.2 section, header, nav 요소(Element)를 이용한 좌측면 구성
12 3.3 section, header, footer, article, aside 요소(Element)를 이용한 우측면 구성
13 3.4 footer 요소(Element)를 이용한 꼬리말 구성
14 4. Group Content Elements, 4.1 p, hr, pre 요소(Element)
15 4.2 blockquote 요소(Element)
16 4.3 li, ol, ul 요소(Element)
17 4.4 dl, dt, dd 요소(Element)
18 4.5 figure, figcaption요소(Element)
19 4.6 div 요소(Element)
20 5. Text-level Elements, 5.1 a, em, strong 요소(Element)
21 5.2 code 요소(Element)
22 5.3 samp 요소(Element)
23 5.4 kdb, dfn 요소(Element)
24 5.5 abbr 요소(Element)
25 5.6 var, cite 요소(Element)
26 5.7 q 요소(Element)
27 5.8 sub, sup 요소(Element)
28 5.9 time 요소(Element)
29 5.10 s 요소(Element)
30 5.11 small 요소(Element)
31 5.12 i, b, u, mark 요소(Element)
32 5.13 ruby, rt, rp 요소(Element)
33 5.14 bdi, bdo 요소(Element)
34 5.15 span, br, wbr 요소(Element)
35 6. Edit Elements, 6.1 ins 요소(Element)
36 6.2 del 요소(Element)
37 7. Embedded Content Elements, 7.1 img 요소(Element)
38 7.2 map, area 요소(Element)
39 7.3 object, param 요소(Element)
40 7.4 PDF 파일을 embed 요소(Element)를 이용하여 임베딩
41 7.5 iframe 요소(Element)
42 7.6 math 요소(Element)
43 7.7 svg 요소(Element)
44 8. Tabular Data Elements, 8.1 caption 요소를 이용하여 표(table) 제목을 나타내기
45 8.2 tbody, thead, tfoot 요소를 이용한 머리말, 본문, 맺음말 형태 만들기
46 8.3 col, colgroup 요소를 이용하여 다수의 칼럼(열)에 스타일 적용
47 8.4 셀 합치기
48 8.5 여백 주기
49 8.6 셀 내부 정렬하기
50 9. Form-related Elements, 9.1 form 요소(Element)
51 9.2 fieldset, legend 요소(Element)
52 9.3 lable 요소(Element)
53 9.4 input 요소(Element)
54 HTML5에 새롭게 추가된 input 요소의 type 속성값들
55 9.5 button 요소(Element)
56 9.6 select 요소(Element)
57 9.7 datalist 요소(Element)
58 9.8 option, optgroup 요소(Element)
59 9.9 textarea 요소(Element)
60 9.10 keygen 요소(Element)
61 9.11 output 요소(Element)
62 9.12 progress 요소(Element)
63 9.13 meter 요소(Element)
64 10. Interactive Elements, 10.1 details 요소
65 10.2 summary 요소
66 10.3 command 요소
67 10.4 menu 요소
68 11. Global Attributes, 11.1 accessKey, title, tabindex 속성
69 11.2 class, id, style 속성
70 2장 CSS3
71 1. CSS의 구조와 선택자(selector), 1.1 요소 이름을 이용한 선택자(Selector) 구성과 규칙(Rule) 만들기
72 1.2 id를 이용한 선택자(Selector) 구성과 규칙(Rule) 만들기
73 1.3 class를 이용한 선택자(Selector) 구성과 규칙(Rule) 만들기
74 1.4 속성(Attribute)을 이용한 선택자(Selector) 구성과 규칙(Rule) 만들기, 1.4.1 “[속성]”의 경우
75 1.4.2 “[속성=속성값]”의 경우, 1.4.3 “[속성~=속성값]”의 경우
76 1.4.4 “[속성|=속성값]”의 경우
77 1.4.5 “[속성^=속성값]”의 경우, 1.4.6 “[속성$=속성값]”의 경우
78 1.4.7 “[속성*=속성값]”의 경우
79 1.5 의사 클래스(pseudo-class)를 이용한 선택자(Selector) 구성과 규칙(Rule) 만들기
80 1.5.1 동적(dynamic) pseudo-class
81 1.5.2 target pseudo-class
82 1.5.3 언어(lang) pseudo-class
83 1.5.4 UI element state pseudo-class
84 1.5.5 구조적(structural) pseudo-class
85 nth-of-type, nth-last-of-type
86 first-child, last-child, first-of-type, last-of-type
87 only-child, only-of-type, empty
88 1.5.6 부정(negation) pseudo-class
89 1.6 의사-요소(pseudo-element)를 이용한 선택자(Selector) 구성과 규칙(Rule) 만들기
90 1.7 combinator를 이용한 선택자 구성과 규칙 만들기, 1.7.1 자손(Descendant) combinatory
91 1.7.2 자식(Child) combinatory
92 1.7.3 인접 형제(Adjacent Sibling) combinatory
93 1.7.4 일반적인 형제(General Sibling) combinatory
94 1.8 모든 요소(Element)를 포함하는 선택자(Selector) 구성과 규칙(Rule) 만들기
95 2. CSS를 이용하는 방법 3 가지, 2.1 <head> 태그 블록 내에 CSS 코드 입력 방법
96 2.2 필요한 HTML 태그 내에 직접 CSS 코드 입력 방법, 2.3 외부 파일(.css) 형태로 외부 파일에 CSS 코드 입력 방법
97 3. CSS 적용 우선 순위
98 4. CSS에서 사용되는 수치(Measurements)
99 5. 색(Color), 5.1 색(Color) 관련 속성(Property)
100 5.2 색(Color)을 표현하는 방법
101 6. 폰트(Font), 6.1 font-family 속성을 이용하여 사용할 글꼴을 설정하기
102 6.2 font-weight 속성을 이용하여 글자 가늘고 굵게 만들기
103 6.3 font-stretch 속성을 이용한 글자를 좁게 넓게 나타내기,6.4 font-style 속성을 이용한 글자를 기울이기
104 6.5 font-size 속성을 이용하여 글자의 크기를 설정하기, 6.6 font 속성을 이용한 font 설정
105 7. 텍스트(Text), 7.1 대소문자로 변형(Transforming)하기, 7.2 문장 내 간격(Spacing) 처리하기
106 7.3 줄 바꿈(Line Breaking)과 단어 내 줄 바꿈(Word Boundaries)
107 7.4 텍스트 정렬(Alignment)과 맞추기(Justification)
108 7.5 문장 내 간격(Spacing) 처리하기
109 7.6 text-indent 속성을 이용한 들여쓰기
110 7.7 Text Decoration
111 8. 배경(Background)과 경계(Border), 여백
112 8.1.4 background-attachment 속성
113 8.2 내부 여백인 padding, 경계(border), 그리고 외부여백(margin)
114 3장 JavaScript
115 1. JavaScript의 데이터 타입, 변수, 1.1 데이터 타입(Data Type)
116 1.2 변수(Variable)
117 2. 연산자(Operators)와 변환(Convert)
118 2.8 변환(Conversion)
119 3. 흐름 제어(Flow Control)
120 3.4 switch … case 문, 3.5 for 문,3.6 for … in 문, 3.7 while문
121 4. 함수(Function),4.1 함수의 정의(선언),4.2 선언된 함수의 호출(call)
122 4.3 다른 함수로부터 함수 호출
123 5. 객체(Object), 5.1 객체(object)의 생성, 5.1.1 Object() 생성자를 이용하여 객체 생성
124 5.1.2 생성자 함수(constructor function)를 잉요하여 객체 정의하고 생성하기
125 5.1.3 object 표기 방법인 {}을 이용한 객체 생성
126 대괄호(square bracket)를 이용한 속성(Property) 접근 및 디버깅
127 6. 배열(Array), 6.1 배열(array)의 생성
128 6.2 생성된 배열(array)에 저장된 데이터 접근 및 출력
129 6.3 배열(Array)의 속성(Property)
130 6.4 배열(Array)의 주요 메서드(Method), 6.4.1 concat(), push(), unshift() 메서드를 이용한 데이터 추가
131 6.4.2 pop(), shift() 메서드를 이용한 데이터 삭제
132 6.4.3 slice(), splice() 메서드를 이용한 데이터 추출
133 6.4.4 join(), toString() 메서드를 이용한 배열을 문자열로 바꾸기
134 6.5 이차원 배열
135 6.6 해쉬 테이블(HashTable)
136 7. 이벤트(Event)와 이벤트 핸들러(EventHandler),7.1 이벤트 핸들러 속성을 이용한 이벤트 처리
137 7.1.1 window와 관련된 이벤트 핸들러 속성
138 7.1.2 마우스(Mouse)와 관련된 이벤트 핸들러 속성
139 7.1.3 키보드(Keyboard)와 관련된 이벤트 핸들러 속성
140 7.1.4 폼(Form)과 관련된 이벤트 핸들러 속성
141 7.2 Event Method를 이용한 이벤트 처리
142 8. DOM(Document Object Model), 8.1 Node의 주요 속성, 8.2 Node의 주요 메서드를 이용한 추가, 수정, 삭제
143 8.2.2 replaceChild() 메서드를 이용한 기존 노드의 교체
144 8.2.3 removeChild() 메서드를 이용한 노드의 삭제
145 8.3 getElementById(), getElementByTagName() 메서드를 이용한 접근
146 4장 Canvas, 1. Canvas를 사용하기 위한 기본적인 준비작업
147 1.3 색상(color)과 스타일(style)
148 2. 사각형(Rectangle) 그리기
149 3. 경로(Path)
150 4. 직선(Line) 그리기
151 5. 호(arc), 원(circle) 그리고 곡선 그리기
152 5.2 arcTo() 메서드를 이용한 둥근 모서리 그리기
153 5.3 quadraticCurveTo() 메서드를 이용한 2차 곡선 그리기
154 5.4 bezierCurveTo() 메서드를 이용한 3차 곡선 그리기
155 6. Text
156 7. 그림자 효과(Shadow Effect)와 색상의 점진적 변화주기(Gradient)
157 8. context의 상태 저장 및 불러오기
158 9. 캔버스(canvas) 내용을 이미지로 저장
159 10. 변환(Transformation)
160 11. 이미지(Image)
161 11.2 픽셀(pixel)에 기반한 이미지 가공(Manipulation), 11.3 슬라이드 쇼 보기
162 1. Audio
163 2. Video
164 6장 Drag and Drop
165 7장 Web Storage, 1.localStorage
166 2. sessionStorage
167 Box Model을 이용한 게시판 형태 만들기
168 칼라 이미지를 Grayscale 이미지로 나타내기
169 차트(Chart) 만들기 - 막대 그래프
170 파이 차트(Pie Chart) 만들기
'프로그램개발 > HTML5(웹앱,모바일웹,하이브리드웹)' 카테고리의 다른 글
| 유투브도 html5 video 태그적용? (0) | 2013.11.28 |
|---|---|
| 부트스트랩 한글사이트 (0) | 2013.09.25 |
| 네이버에서 공개한 자바스크립트 라이브러리 "콜리(Collie)" (0) | 2013.08.27 |
| Insert PhoneGap Data in MySQL Database (0) | 2013.08.27 |
| jQuery 플러그인 Demo 예제 사이트 모음 (0) | 2013.08.23 |