오늘 당장 시작하는 html5
DESCRIPTION
오늘 당장 적용해 볼 수 있는 HTML5 기능과 자바스크립트 플러그인 소개. 오래된 브라우저에서도 지원되거나 혹은 아무 일도 일어나지 않는 안전한(?) 기능만 소개합니다.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 APICSS3
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는 부터 쓸만하다.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="[email protected] 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