JSLounge 5th seminar

1. HTML5

2. APIs
The

3. Screen

4. Orientation

5. API

7. Fullscreen

8. about

9. me
•장정환
•nundefined@nundefined.com
•http://nundefined.com
•@nundefined

10. 오늘

11. 주제
•The

12. Screen

13. Orientation

14. API
•http://www.w3.org/TR/screen-
orientation/
•Fullscreen
•http://www.w3.org/TR/fullscreen/

15. 현재

16. 상태
상태
Working
Group
Orientation
Lock
Working Draft
(초기 단계)
Web Apps
Working
Group
Fullscreen
Working Draft
(초기 단계)
Web Apps
CSS Working
Groups

17. The

18. Screen

19.
Orientation

20. API

21. Screen

22. Orientation

23. API
•Working

24. Draft

25. -

26. 2012/12/06
•화면의

27. 방향

28. 상태에

29. 대한

30. 정보

31. 제공을

32. 위
한

33. 명세
•HTML

34. 5.1

35. Current

36. Orientation
•portrait-primary
•portrait-secondary
•portrait
•landscape-primary
•landscape-secondary
•landscape

37. landscape?

38. portrait?
•기기나

39. 플랫폼에

40. 따라

41. 다름
•landscape인

42. 기기에서의

43. 기본

44. 방향은

45.
landscape-primary
•portrait인

46. 기기에서의

47. 기본

48. 방향은

49.
portrait-primary

50. Landscape-primary Portrait-primary

51. Primary?

52. Secondary?
Landscape-
primary
Portrait-
primary
Portrait-
secondary
Landscape-
secondary

53. 방향

54. 고정
•현재

55. 브라우저의

56. 내용이

57. 표시되는

58. 방향을

59.
강제로

60. 설정
•잠금이

61. 해제될

62. 때까지

63. 유지됨

64. window.orientation

65. vs

66.
screen.orientation
•window.orientation
•기기의

67. 방향
•screen.orientation
•브라우저의

68. 내용이

69. 출력되는

70. 방향

71. Screen:

72. attribute
•onorientationchange
•이벤트

73. 핸들러
•orientation
•현재

74. 방향의

75. 값
•readonly

76. Screen:

77. method
•lockOrientation(orientation)
•지정된

78. 방향으로

79. 고정
•lockOrientation(orientations)
•지정된

80. 방향으로

81. 고정
•unlockOrientation()
•고정된

82. 상태를

83. 해제
•현재

84. 환경에

85. 기본

86. 방향이

87. 정의되어

88. 있다면

89. 해당

90. 방향으로

91. 전환
•그렇지

92. 않은

93. 경우

94. UserAgent에서

95. 적당히

96. 전환
•unlock이

97. 완료되면

98. Screen객체에서

99. orientationchange

100. 이
벤트

101. 발생

102. Fullscreen

103. Fullscreen
•Working

104. Draft

105. -

106. 2012/07/03
•웹

107. 플랫폼에서

108. 전체

109. 화면

110. 기능을

111. 사용하
기

112. 위한

113. 명세
•HTML

114. 5.1
•http://docs.webplatform.org/wiki/
tutorials/using_the_full-screen_api

115. 전체

116. 화면

117. 전환

118. 및

119. 나오기
•element.requestFullscreen()
•document.exitFullscreen()

120. 전체

121. 화면

122. 전환
•element에서

123. requestFullscreen()

124. 호출
•fullscreenerror

125. 이벤트
•전체

126. 화면

127. 전환이

128. 실패할

129. 때

130. 발생

131. 전체

132. 화면

133. 나오기
•document.exitFullscreen()
•Esc나

134. F11를

135. 사용자가

136. 입력
•다른

137. 웹페이지로

138. 이동
•브라우저의

139. 다른

140. 탭으로

141. 이동
•다른

142. 프로그램으로

143. 이동

144. fullscreenchange

145. 이벤트
•document를

146. 대상으로

147. 발생
•이벤트에서는

148. 화면

149. 상태에

150. 대한

151. 값을

152. 제
공하지

153. 않음
•document.fullscreenElement를

154. 확인
하여

155. 현재

156. 상태

157. 확인
•null이

158. 아니면

159. 전체

160. 화면

161. 상태

162. var videoElement = document.getElementById(myvideo);
function toggleFullScreen() {
if (!document.mozFullScreen !document.webkitFullScreen) {
if (videoElement.mozRequestFullScreen) {
videoElement.mozRequestFullScreen(); // requestFullscreen()
} else {
videoElement.webkitRequestFullScreen(Element.ALLOW_KEYBOARD
_INPUT);
}
} else {
if (document.mozCancelFullScreen) {
document.mozCancelFullScreen(); // exitFullscreen()
} else {
document.webkitCancelFullScreen();
}
}
}
document.addEventListener(keydown, function(e) {
if (e.keyCode == 13) {
toggleFullScreen();
}
}, false);
https://developer.mozilla.org/samples/domref/fullscreen.html

163. 정리
•게임과

164. 멀티미디어에서

165. 유용할

166. 것으로

167. 예
상
•아직

168. Working

169. Draft

170. 상태로

171. 상세한

172. 내용
은

173. 변경될

174. 가능성

175. 있음

176. Questions?

177. 감사합니다
nundefined@nundefined.com

178. 참고자료
•http://www.w3.org/TR/screen-
orientation/
•https://developer.mozilla.org/ko/
docs/Apps/Manifest
•http://www.w3.org/TR/fullscreen/
•http://docs.webplatform.org/wiki/
tutorials/using_the_full-screen_api