1. HTML5

2. Use

3. Cases
전용우

4. TOC
1. HTML5
2. CSS3
3. API
4. Flash Free

5. 1. HTML5

6. Semantic Web

7. Semantic Web
header
nav.../nav
/header

8. Semantic Web
header
nav.../nav
/header

9. Semantic Web
header
nav.../nav
/header
section
...
/section

10. Semantic Web
header
nav.../nav
/header
section
...
/section

11. New Feature

12. New Feature

13. New Feature
input type=”text”
placeholder=”곡명, 앨범명, 아티스트명”

14. New Feature

15. New Feature

16. New Feature

17. New Feature

18. New Feature

19. New Feature
input[type=search]
input[type=number]
....
tel, email, time....

20. Simple Tag
!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN ...
script type=”text/javascript”
style type=”text/css”
b/

21. Simple Tag
!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN ...
!doctype html
script type=”text/javascript”
style type=”text/css”
b/

22. Simple Tag
!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN ...
!doctype html
script type=”text/javascript”
style type=”text/css”
b/

23. Simple Tag
!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN ...
!doctype html
script type=”text/javascript”
script
style type=”text/css”
b/

24. Simple Tag
!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN ...
!doctype html
script type=”text/javascript”
script
style type=”text/css”
b/

25. Simple Tag
!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN ...
!doctype html
script type=”text/javascript”
script
style type=”text/css”
style
b/

26. Simple Tag
!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN ...
!doctype html
script type=”text/javascript”
script
style type=”text/css”
style
b/

27. Simple Tag
!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN ...
!doctype html
script type=”text/javascript”
script
style type=”text/css”
style
b/
b

28. Simple Tag
!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN ...
!doctype html
script type=”text/javascript”
script
style type=”text/css”
style
b/
b

29. 2. CSS3

30. Transition

31. Transition

32. Transition
#layer .off{
opacity : 0;
transition-duration: 2s;
transition-property: opacity;
transition-delay: 1s;
transition-timing-function: ease;
}

33. Transform

34. Transform

35. Transform
#section .first{
transition : transform 2s 0s ease;
transform : translate3d(200px, 0, 0);
}

36. Compatibility?

37. Use Library.
(Jindo Mobile, JQuery Mobile, Sencha Mobile..)

38. 3. API

39. localStorage

40. localStorage

41. localStorage
localStorage[“history”] = “전용우”;
localStorage[“history”];

42. geolocation

43. geolocation

44. geolocation
navigator.geolocation.getCurrentPosition( fpSuc, fpFail );

45. 4. Flash Free

46. Flash to JavaScript

47. Use Canvas
예전

48. 감사합니다.