HTML5 & CSS 살펴보기

1,301 views

Published on

0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
1,301
On SlideShare
0
From Embeds
0
Number of Embeds
46
Actions
Shares
0
Downloads
9
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

HTML5 & CSS 살펴보기

  1. 1. HTML5 & CSS3 1장이수안(inch772@nhn.com)
  2. 2. 출처 : http://www.webtrendset.com/2010/12/13/`28-html5-features-tips-and-techniques-you-must-know/HTML5 특성
  3. 3. 더 분명한 마크업 HTML5 이전버전HTMLhttp://html5demos.com/ 소스 http://andstudy.com 소스
  4. 4. 플러그인에 덜 의존하는 멀티미디어http://www.ro.me/
  5. 5. 기타 좋아진 점• 더 나은 애플리케이션 – 문서간 데이터 교환 – 웹 소켓 – 클라이언트 측 스토리지• 더 좋은 인터페이스 – 더 좋은 폼 – 향상된 접근성 – 개선된 선택자 – 시각 효과
  6. 6. HTML5 의 현재• 회사들의 이해 관계 – 표준에 대해서 주장하는 바가 다름 – Audio 태그의 서로 다른 지원 • http://www.jplayer.org/HTML5.Audio.Support/• HTML5와 CSS3는 진행 중인 명세 – http://dev.w3.org/html5/spec/Overview.html
  7. 7. 하위 호환성• 독 타입 이란? – 사용한 HTML 문서 종류를 선언하는 부분 – 종류 • http://www.w3.org/QA/2002/04/valid-dtd-list.html – 독 타입에 따라 브라우저 랜더링 방식이 달라짐• 접근성 – CSS제거하면?• 폐기된 태그들 – http://www.w3.org/TR/html5-diff/
  8. 8. 출처 : http://www.webdesignfromscratch.com/html-css/how-html-css-js-work-together/기초지식
  9. 9. HTML– 문서의 구조와 정의를 표기 하는 법– http://www.w3schools.com/html/default.asp
  10. 10. CSS– 요소들이 어떻게 표기 되어야 되는지 지정하는 서식– http://www.w3schools.com/css/default.asp
  11. 11. JavaScript– 브라우저에 지원하는 스크립트 언어– 폼내용을 검증/통신/DOM을 이용 요소 추가/삭 제/변경 지원– http://www.w3schools.com/js/default.asp
  12. 12. DOM– HTML 문서의 요소를 접근 할 수 있는 표준 접 근법– http://www.w3schools.com/htmldom/default.as p
  13. 13. JQuery– http://jquery.com/– JavaScript 대표적 라이브러리– JavaScript 함수 확정하여 문서 요소 접근/변경 을 쉽게 하도록 해 줌– http://www.w3schools.com/jquery/default.asp
  14. 14. 개발자 도구• 개발자 도구란? – DOM 탐색 – 스크립트 디버깅 – 런타임성능측정/네트워크 모니터링• 개발자 도구 실행법 – IE - F12 – 크롬 – Ctrl +Shift +I – Safari – Ctrl + Alt + I – FF – Firebug Extension
  15. 15. 정리• HTML5는 기존보다 분명한 마크업 구조를 지 원한다.• HTML5은 미디어 재생 등에 별로 플러그인을 이용하지 않고도 멀티미디어 재생 가능• HTML 5는 현재도 진행 중인 명세이며 각 밴더 별로 구현의 차이가 발생됨• HTML/CSS/JavaScript/DOM/Jquery들의 기술 을 이용해 웹페이지를 구성/제어할 수 있다.• 최신 브라우저에서 제공하는 개발자 도구를 제공한다.

×