1. HTML5 & CSS3
1장
이수안(inch772@nhn.com)

2. 출처 : http://www.webtrendset.com/2010/12/13/`28-html5-features-tips-and-techniques-you-must-know/
HTML5 특성

3. 더 분명한 마크업
HTML5 이전버전HTML
http://html5demos.com/ 소스 http://andstudy.com 소스

4. 플러그인에 덜 의존하는 멀티미디어
http://www.ro.me/

5. 기타 좋아진 점
• 더 나은 애플리케이션
– 문서간 데이터 교환
– 웹 소켓
– 클라이언트 측 스토리지
• 더 좋은 인터페이스
– 더 좋은 폼
– 향상된 접근성
– 개선된 선택자
– 시각 효과

6. HTML5 의 현재
• 회사들의 이해 관계
– 표준에 대해서 주장하는 바가 다름
– Audio 태그의 서로 다른 지원
• http://www.jplayer.org/HTML5.Audio.Support/
• HTML5와 CSS3는 진행 중인 명세
– http://dev.w3.org/html5/spec/Overview.html

7. 하위 호환성
• 독 타입 이란?
– 사용한 HTML 문서 종류를 선언하는 부분
– 종류
• http://www.w3.org/QA/2002/04/valid-dtd-list.html
– 독 타입에 따라 브라우저 랜더링 방식이 달라짐
• 접근성
– CSS제거하면?
• 폐기된 태그들
– http://www.w3.org/TR/html5-diff/

8. 출처 : http://www.webdesignfromscratch.com/html-css/how-html-css-js-work-together/
기초지식

9. HTML
– 문서의 구조와 정의를 표기 하는 법
– http://www.w3schools.com/html/default.asp

10. CSS
– 요소들이 어떻게 표기 되어야 되는지 지정하는
서식
– http://www.w3schools.com/css/default.asp

11. JavaScript
– 브라우저에 지원하는 스크립트 언어
– 폼내용을 검증/통신/DOM을 이용 요소 추가/삭
제/변경 지원
– http://www.w3schools.com/js/default.asp

12. DOM
– HTML 문서의 요소를 접근 할 수 있는 표준 접
근법
– http://www.w3schools.com/htmldom/default.as
p

13. JQuery
– http://jquery.com/
– JavaScript 대표적 라이브러리
– JavaScript 함수 확정하여 문서 요소 접근/변경
을 쉽게 하도록 해 줌
– http://www.w3schools.com/jquery/default.asp

14. 개발자 도구
• 개발자 도구란?
– DOM 탐색
– 스크립트 디버깅
– 런타임성능측정/네트워크 모니터링
• 개발자 도구 실행법
– IE - F12
– 크롬 – Ctrl +Shift +I
– Safari – Ctrl + Alt + I
– FF – Firebug Extension

15. 정리
• HTML5는 기존보다 분명한 마크업 구조를 지
원한다.
• HTML5은 미디어 재생 등에 별로 플러그인을
이용하지 않고도 멀티미디어 재생 가능
• HTML 5는 현재도 진행 중인 명세이며 각 밴더
별로 구현의 차이가 발생됨
• HTML/CSS/JavaScript/DOM/Jquery들의 기술
을 이용해 웹페이지를 구성/제어할 수 있다.
• 최신 브라우저에서 제공하는 개발자 도구를
제공한다.