• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
오늘 당장 시작하는 HTML5
 

오늘 당장 시작하는 HTML5

on

  • 2,353 views

오늘 당장 적용해 볼 수 있는 HTML5 기능과 자바스크립트 플러그인 소개. 오래된 브라우저에서도 지원되거나 혹은 아무 일도 일어나지 않는 안전한(?) ...

오늘 당장 적용해 볼 수 있는 HTML5 기능과 자바스크립트 플러그인 소개. 오래된 브라우저에서도 지원되거나 혹은 아무 일도 일어나지 않는 안전한(?) 기능만 소개합니다.

Statistics

Views

Total Views
2,353
Views on SlideShare
2,241
Embed Views
112

Actions

Likes
26
Downloads
44
Comments
0

4 Embeds 112

http://ebiz1.esy.es 80
https://twitter.com 28
http://www.pinterest.com 2
http://shinyssun.tistory.com 2

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel

오늘 당장 시작하는 HTML5 오늘 당장 시작하는 HTML5 Presentation Transcript

  • 오늘당장 시작하는 HTML5 김태곤 Photo by n-ino / CC BY-NC-SA
  • 없어도 괜찮지만 사용하면 꽤 유용한 기능들 Photo by seandreilinger / CC BY-NC-SA 오래된 브라우저는 모르는 이야기
  • 절반은 HTML5 Image from threadless 절반은 !HTML5 오늘 내용의
  • HTML5 Photo by aaronguyleroux / CC BY-NC-SA Animation Timing File API CSS3 XHR
  • HTML5를 실무에서 사용하기는 어렵습니다. 슬프지만…
  • 2014년 3월 현재 국내 브라우저 점유율 18.9% 77.3% from StatCounter 인터넷 익스플로러
  • 무제 1 IE 11 IE 10 IE 9 IE 8 2014년 3월 현재 국내 IE 점유율 from StatCounter
  • 브라우저별 HTML5 지원 현황 from caniuse.com
  • HTML5는 부터 쓸만하다. IE10 포기할건가요?
  • 그래, 난 개발자. 포기를 모르는 종족이지…
  • <!DOCTYPE html> - 짧다. (겨우 15글자!) - 오래된 IE에서 써도 표준모드로 렌더링 - XHTML에 비해 덜 엄격한 DTD
 = 유효성 검사시에도 이득 Photo by reidab / CC BY-NC-SA
  • <!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> 생략하면
  •   기본값
  •   적용 문자열에
  •   엄격하지
  •   않아
  •   생략가능 닫는
  •   태그
  •   불필요 불리언
  •   속성의
  •   값
  •   불필요
  • <!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> 가능하다면
  •   비동기
  •   로딩 사실
  •   비동기
  •   로딩은
  •   외부
  •   스크립트를
  •   불러오는
  •   경우에만
  •   적용됩니다.
  •   예제로만
  •   봐주세요.
  •   ^^
  • <!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>
  • 애니메이션 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 간섭 등
  • setTimeout vs requestAnimationFrame
  • 로컬스토리지 LocalStorage Photo by secret_canadian / CC BY-NC - 추가적인 트래픽을 발생시키지 않는다. - 저장 용량이 크다. (5MB 이상, 쿠키는 4KB) - 사용법이 더 단순하다. - 텍스트 데이터 외의 형식은 JSON / base64 인코딩 필요 - 구식 브라우저(IE6, 7)에서는 userData behavior를 통해 구현 - IndexedDB를 지원하는 localForage 라이브러리 (IE8 이상) jStorage 라이브러리 Github 저장소 / 한국어 소개글
  • 앱 캐시 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 파일을 갱신해야 함.
  • 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">
  • 파일 폼 / 파일 API Photo by danielygo / CC BY-NC - accept 속성을 사용해 원하는 형식만 선택 - Ajax를 사용해 파일 업로드 • XMLHttpRequest와 FormData, File API를 사용 • 이벤트를 통해 업로드 진행 정도도 알 수 있다. • 구식 브라우저에서는 <iframe>으로 fallback • jQuery Form 플러그인 <input type="file" accept="image/*,video/*">
  • Page visibility API Photo by meckert75 / CC BY-NC-ND - 페이지가 현재 보여지고 있는지 확인 - document.hidden (불리언) - document.visibilityState (문자열)
 hidden, visible, prerender, unloaded 중 하나 - visibilitychange 이벤트

  • HTML5 개발 팁 어쩌면 상관없 Photo by marine_corps / CC BY-NC
  • 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">
  • iOS Photo by mdrx / CC BY-SA 스마트 앱 배너 (iOS 6 이상) <meta name="apple-itunes-app" content="app-id=아이디,app-argument=옵션">
  • iOS Photo by mdrx / CC BY-SA minimal UI <meta name="viewport" content="width=480,minimal-ui">
  • 감사합니다. 김태곤 / @taggon / mygony.com Photo by najeebkhan2009 / CC BY-NC-SA