오늘 당장 시작하는 HTML5
•
39 likes•6,371 views
오늘 당장 적용해 볼 수 있는 HTML5 기능과 자바스크립트 플러그인 소개. 오래된 브라우저에서도 지원되거나 혹은 아무 일도 일어나지 않는 안전한(?) 기능만 소개합니다.
Recommended
More Related Content
What's hot
What's hot (20)
Viewers also liked
Viewers also liked (17)
Similar to 오늘 당장 시작하는 HTML5
Similar to 오늘 당장 시작하는 HTML5 (20)
Recently uploaded
Recently uploaded (6)
오늘 당장 시작하는 HTML5
- 1. 오늘당장 시작하는 HTML5 김태곤 Photo by n-ino / CC BY-NC-SA
- 2. 없어도 괜찮지만 사용하면 꽤 유용한 기능들 Photo by seandreilinger / CC BY-NC-SA 오래된 브라우저는 모르는 이야기
- 6. HTML5 Photo by aaronguyleroux / CC BY-NC-SA Animation Timing File API CSS3 XHR
- 8. 2014년 3월 현재 국내 브라우저 점유율 18.9% 77.3% from StatCounter 인터넷 익스플로러
- 9. 무제 1 IE 11 IE 10 IE 9 IE 8 2014년 3월 현재 국내 IE 점유율 from StatCounter
- 10. 브라우저별 HTML5 지원 현황 from caniuse.com
- 13. <!DOCTYPE html> - 짧다. (겨우 15글자!) - 오래된 IE에서 써도 표준모드로 렌더링 - XHTML에 비해 덜 엄격한 DTD = 유효성 검사시에도 이득 Photo by reidab / CC BY-NC-SA
- 14. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> <html> <head> ... <script type="text/javascript"> <!-- alert('Hello, world'); //--> </script> <style type="text/css"> ... </style> </head> <body> <img src="/img/a.png" /> <input type="checkbox" name="c" checked="checked" /> </body> </html> 생략하면
- 15. 기본값
- 16. 적용 문자열에
- 17. 엄격하지
- 18. 않아
- 19. 생략가능 닫는
- 20. 태그
- 21. 불필요 불리언
- 22. 속성의
- 23. 값
- 24. 불필요
- 25. !DOCTYPE html html head ... script alert('Hello, world'); /script style ... /style /head body img src=/img/a.png input type=checkbox name=c checked /body /html 가능하다면
- 26. 비동기
- 27. 로딩 사실
- 28. 비동기
- 29. 로딩은
- 30. 외부
- 31. 스크립트를
- 32. 불러오는
- 33. 경우에만
- 34. 적용됩니다.
- 35. 예제로만
- 36. 봐주세요.
- 37. ^^
- 38. !DOCTYPE html html head ... script async defer alert('Hello, world'); /script style ... /style /head body img src=/img/a.png input type=checkbox name=c checked /body /html
- 39. 애니메이션 Animation - jQuery animate()는 느리다. - top/left 대신 translate(x, y) / translate3d(x, y, z) - 가능한 경우 CSS3 transition 활용 - setTimeout 대신 requestAnimationFrame() * 동일한 프레임 비율(frame rate)를 보장해준다. * 자원을 훨씬 효율적으로 사용한다. (데모) jQuery animate enhanced 플러그인 사용 Image from WikiCommons * 구식 브라우저에서는 Paul Irish의 Polyfill 사용 하드웨어 가속 X, JS 간섭 등
- 41. 로컬스토리지 LocalStorage Photo by secret_canadian / CC BY-NC - 추가적인 트래픽을 발생시키지 않는다. - 저장 용량이 크다. (5MB 이상, 쿠키는 4KB) - 사용법이 더 단순하다. - 텍스트 데이터 외의 형식은 JSON / base64 인코딩 필요 - 구식 브라우저(IE6, 7)에서는 userData behavior를 통해 구현 - IndexedDB를 지원하는 localForage 라이브러리 (IE8 이상) jStorage 라이브러리 Github 저장소 / 한국어 소개글
- 42. 앱 캐시 App cache Photo by rfranklinaz / CC BY - 오프라인 애플리케이션을 위한 스펙 - 캐시할/안할 파일을 설정 - html에 매니페스트 파일 경로 설정 !doctype html html manifest=example.appcache ... CACHE MANIFEST # v1 - 2014-04-09 # 줄 앞에 샵을 붙이면 주석 http://example.com/image.jpg /js/lib/jquery.min.js /css/main.css ✓매니페스트 파일의 경로나 확장자는 원하는 것으로 사용할 수 있음. ✓text/cache-manifest MIME 타입 필수 ✓캐시된 파일 내용 중 하나라도 변경되면, manifest 파일을 갱신해야 함.
- 43. srcset 속성 Photo by horiavarlan / CC BY - 조건에 따라 보여줄 이미지를 선택 - 크롬 34부터 정식 지원 예정 - 정식 지원 전까지는 Polyfill 사용 Google srcset polyfill !-- 레티나 디스플레이 지원 -- img src=banner.png srcset=banner@2x.png 2x !-- 화면 너비에 따른 반응형 이미지 -- img src=small.jpg srcset=small.jpg 320w, medium.jpg 960w, large.jpg
- 44. 파일 폼 / 파일 API Photo by danielygo / CC BY-NC - accept 속성을 사용해 원하는 형식만 선택 - Ajax를 사용해 파일 업로드 • XMLHttpRequest와 FormData, File API를 사용 • 이벤트를 통해 업로드 진행 정도도 알 수 있다. • 구식 브라우저에서는 iframe으로 fallback • jQuery Form 플러그인 input type=file accept=image/*,video/*
- 45. Page visibility API Photo by meckert75 / CC BY-NC-ND - 페이지가 현재 보여지고 있는지 확인 - document.hidden (불리언) - document.visibilityState (문자열) hidden, visible, prerender, unloaded 중 하나 - visibilitychange 이벤트
- 46. HTML5 개발 팁 어쩌면 상관없 Photo by marine_corps / CC BY-NC
- 47. DNS Prefetch 도메인에 해당하는 IP를 미리 구해 속도 향상 크롬 등 일부 브라우저에서는 이미 지원 프리페칭 금지 meta http-equiv=x-dns-prefetch-control content=off ! 명시적 설정 link rel=dns-prefetch href=//example.com link rel=dns-prefetch href=//ajax.googleapis.com Photo by dmelchordiaz / CC BY-NC-ND 프리렌더링 link rel=prerender href=//example.com/next
- 48. iOS Photo by mdrx / CC BY-SA 스마트 앱 배너 (iOS 6 이상) meta name=apple-itunes-app content=app-id=아이디,app-argument=옵션
- 49. iOS Photo by mdrx / CC BY-SA minimal UI meta name=viewport content=width=480,minimal-ui
- 50. 감사합니다. 김태곤 / @taggon / mygony.com Photo by najeebkhan2009 / CC BY-NC-SA