Your SlideShare is downloading. ×
0
정동일의 정보창고(www.han21.net)                           정동일                           (현) SMF 포럼 IT전문위원                        ...
정동일의 정보창고(www.han21.net)              “The power of the web is in               it’s universality. Access by              ...
정동일의 정보창고(www.han21.net)        Web Standard       Web Accessibility        웹 표준               웹 접근성
정동일의 정보창고(www.han21.net)
정동일의 정보창고(www.han21.net)
정동일의 정보창고(www.han21.net)  검색엔진 최적화(SEO, Search Engine Optimization)  검색엔진 마케팅(SEM, Search Engine Marketing)
정동일의 정보창고(www.han21.net)                           1991
정동일의 정보창고(www.han21.net)                                         HTML 4.01         HTML 1,2     HTML 3    HTML 4          ...
정동일의 정보창고(www.han21.net)
정동일의 정보창고(www.han21.net)
정동일의 정보창고(www.han21.net)        유효성 검사        (Markup Validation)                           VS                            ...
정동일의 정보창고(www.han21.net)  http://book.coforward.com/sample/sta  ndard/standardSample01.html                               ...
정동일의 정보창고(www.han21.net)  css Zen Garden | www.csszengarden.com
정동일의 정보창고(www.han21.net)  CSS Lounge | www.css-lounge.com
정동일의 정보창고(www.han21.net)  CJ제일제당 | www.cj.co.kr
정동일의 정보창고(www.han21.net)  Social LG전자 | social.lge.co.kr
정동일의 정보창고(www.han21.net)  현대자동차 기업문화홍보 | pr.hyundai.com
정동일의 정보창고(www.han21.net)                                 HTML                                   JavaScrip                 ...
정동일의 정보창고(www.han21.net)
정동일의 정보창고(www.han21.net)                       <div>
정동일의 정보창고(www.han21.net)                     HTML5
정동일의 정보창고(www.han21.net)
정동일의 정보창고(www.han21.net)                <!DOCTYPE html>
정동일의 정보창고(www.han21.net)
정동일의 정보창고(www.han21.net)  <!DOCTYPE html>  <html>  <head>          <title></title>          <script>          </script>  <...
정동일의 정보창고(www.han21.net)  FindMeByIP | fmbip.com fmbip.com/litmus
정동일의 정보창고(www.han21.net)  somag | http://somag.nemostudio.net/somagWeb/mobile/main.act
정동일의 정보창고(www.han21.net)          contenteditable                     draggable                            contextmenu    ...
정동일의 정보창고(www.han21.net)           border                                    color                             background ...
정동일의 정보창고(www.han21.net)  라이브 캔버스 스케치판 | sketchpan.com
정동일의 정보창고(www.han21.net)  Reference sites     http://www.w3.org/History/19921103-     hypertext/hypertext/WWW/TheProject.h...
웹표준&Html5
Upcoming SlideShare
Loading in...5
×

웹표준&Html5

1,458

Published on

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

Published in: Technology, Design
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
1,458
On Slideshare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
32
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Transcript of "웹표준&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/
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×