Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

웹표준&Html5

1,835 views

Published on

웹표준과 HTML5 강의에 사용했던

Published in: Technology, Design
  • Be the first to comment

웹표준&Html5

  1. 1. 정동일의 정보창고(www.han21.net) 정동일 (현) SMF 포럼 IT전문위원 (현) 엠통 마케팅&기획이사(CMO) SBS 사내 전문강사 쿠니렉 온라인 강사 호주 iae EduNet IT 팀장 한글과컴퓨터 공인강사 무림전자통신 전산팀장 홈캐스트 부설연구소 연구원 정동일의 정보창고(www.han21.net) 엑셀 2002 길라잡이(정보문화사) 외 다 수 집필
  2. 2. 정동일의 정보창고(www.han21.net) “The power of the web is in it’s universality. Access by everyone regardless of disability is an essential aspect.” 팀 버너스 리 Timothy John Berners Lee “웹의 힘은 보편성에 있다. 불리한 조건에 관계없이 접근하는 것은 누 구에게나 필수적인 측면이다.”
  3. 3. 정동일의 정보창고(www.han21.net) Web Standard Web Accessibility 웹 표준 웹 접근성
  4. 4. 정동일의 정보창고(www.han21.net)
  5. 5. 정동일의 정보창고(www.han21.net)
  6. 6. 정동일의 정보창고(www.han21.net) 검색엔진 최적화(SEO, Search Engine Optimization) 검색엔진 마케팅(SEM, Search Engine Marketing)
  7. 7. 정동일의 정보창고(www.han21.net) 1991
  8. 8. 정동일의 정보창고(www.han21.net) HTML 4.01 HTML 1,2 HTML 3 HTML 4 XHTML 1 HTML 5 1989 - 1991 1995 1998 1999 2000 2009 단순한 HTML 시대 브라우저 전쟁 구조(HTML)와 표 현(CSS)이 분리 현재 가장 많이 사용하는 HTML
  9. 9. 정동일의 정보창고(www.han21.net)
  10. 10. 정동일의 정보창고(www.han21.net)
  11. 11. 정동일의 정보창고(www.han21.net) 유효성 검사 (Markup Validation) VS 아웃라인 알고리즘 (Outline Algorithm)
  12. 12. 정동일의 정보창고(www.han21.net) http://book.coforward.com/sample/sta ndard/standardSample01.html http://book.coforward.com/sample/stand ard/standardSample02.html
  13. 13. 정동일의 정보창고(www.han21.net) css Zen Garden | www.csszengarden.com
  14. 14. 정동일의 정보창고(www.han21.net) CSS Lounge | www.css-lounge.com
  15. 15. 정동일의 정보창고(www.han21.net) CJ제일제당 | www.cj.co.kr
  16. 16. 정동일의 정보창고(www.han21.net) Social LG전자 | social.lge.co.kr
  17. 17. 정동일의 정보창고(www.han21.net) 현대자동차 기업문화홍보 | pr.hyundai.com
  18. 18. 정동일의 정보창고(www.han21.net) HTML JavaScrip CSS t
  19. 19. 정동일의 정보창고(www.han21.net)
  20. 20. 정동일의 정보창고(www.han21.net) <div>
  21. 21. 정동일의 정보창고(www.han21.net) HTML5
  22. 22. 정동일의 정보창고(www.han21.net)
  23. 23. 정동일의 정보창고(www.han21.net) <!DOCTYPE html>
  24. 24. 정동일의 정보창고(www.han21.net)
  25. 25. 정동일의 정보창고(www.han21.net) <!DOCTYPE html> <html> <head> <title></title> <script> </script> </head> <body> <header> <hgroup> </hgroup> <nav> </nav> <article> </article> </header> <section> <header> </header> <section> <article> <footer> </footer> </article> </section> </section> <footer> </footer> </body> </html>
  26. 26. 정동일의 정보창고(www.han21.net) FindMeByIP | fmbip.com fmbip.com/litmus
  27. 27. 정동일의 정보창고(www.han21.net) somag | http://somag.nemostudio.net/somagWeb/mobile/main.act
  28. 28. 정동일의 정보창고(www.han21.net) contenteditable draggable contextmenu hidden Data- spellcheck role itemscope
  29. 29. 정동일의 정보창고(www.han21.net) border color background content text opacity web font media box transformation
  30. 30. 정동일의 정보창고(www.han21.net) 라이브 캔버스 스케치판 | sketchpan.com
  31. 31. 정동일의 정보창고(www.han21.net) Reference sites http://www.w3.org/History/19921103- hypertext/hypertext/WWW/TheProject.html http://www.w3.org/ http://www.w3c.or.kr/ http://www.csszengarden.com/ http://validator.w3.org/ http://css-lounge.com/ http://www.cj.co.kr/ http://social.lge.co.kr/ http://www.wah.or.kr/ http://somag.nemostudio.net/somagWeb/mobile/main.act http://jquery.com/ http://jqueryui.com/ http://mezzoblue.com/css/cribsheet/

×