1. 모바일웹과

2. 반응형웹

3.
!
윤지수

4. at

5. NEXT

6. image
모바일

7. 웹은

8. 무엇이

9. 다를까?

10.
http://psychicscript.com/psychicscript/index.jsp?language=korean

11. 모바일

12. 웹은

13. 무엇이

14. 다를까?

15.
작다.

16.
느리다.

17.
다양하다.

18. 어떤

19. 전략이

20. 좋을까?
작다.

21. 콘텐츠줄이기
느리다.

22.
다양하다.

23. 어떤

24. 전략이

25. 좋을까?
작다.

26. 콘텐츠줄이기
느리다.

27.
다양하다.
콘텐츠줄이기

28.
성능에

29. 좋은

30. 방법

31. 찾기

32. 어떤

33. 전략이

34. 좋을까?
작다.

35. 콘텐츠줄이기
느리다.

36.
다양하다.
콘텐츠줄이기

37.
성능에

38. 좋은

39. 방법

40. 찾기
유동형

41. layout

43.
px

44. -

45. ‘%’

46. 모바일

47. 웹

48. 개발

49. 모바일

50. 웹

51. 개발
PC개발

52.
=
+ 모바일특성

53. 모바일

54. 웹

55. 개발
HTML,

56.
CSS,

57.
JavaScript
=
+ 모바일특성

58. 모바일

59. 웹

60. 개발
HTML,

61.
CSS,

62.
JavaScript
meta

63. tag

64.
debugging +
event

65.
=

66. Mobile은

68.
PC화면을

69. 잘

70. 표현할

71. 수

72. 있을까?

73. 모바일

74. 브라우저는

76.
PC의

77. 기준

78. 서비스를

79. 잘

80. 보여주려고

81. 한다.
image
http://www.clickhost.com/mobile-websites/

82. image
모바일

83. 브라우저는

85.
PC의

86. 기준

87. 서비스를

88. 잘

89. 보여주려고

90. 한다.
PC버전을

91. 모두

92. 렌더링하고,

93.
줌아웃해서

94. 축소했다

95.
http://www.clickhost.com/mobile-websites/

96. image
모바일

97. 브라우저는

99.
PC의

100. 기준

101. 서비스를

102. 잘

103. 보여주려고

104. 한다.
PC버전을

105. 모두

106. 렌더링하고,

107.
줌아웃해서

108. 축소했다

109.
하지만,

111.
가독성이

112. 떨어진다

113.
http://www.clickhost.com/mobile-websites/

114. !
네

115. 맘대로

116. 축소하지

117. 말고,

118.
기기

119. 크기(해상도)에

120. 맞게

121. 그대로

122. 보여줘

123. !

124. image
http://www.clickhost.com/mobile-websites/

125. !
가독성이

126. 먹어준다

127. ;-)
image
http://www.clickhost.com/mobile-websites/

128. 어떻게

129. 저렇게

130. 하지?

131. 어떻게

132. 저렇게

133. 하지?
meta

134. 태그

135. meta name=viewport content=width=device-width, initial-scale=1, maximum-scale=1

137. viewport

138. 는

139. 눈에

140. 보이는

141. 화면의

142. 크기
meta name=viewport content=width=device-width, initial-scale=1, maximum-scale=1

143. viewport 는 눈에 보이는 화면의 크기

144. 넓이를

145. device의

146. 크기만큼

147. 보여줘
meta name=viewport content=width=device-width, initial-scale=1, maximum-scale=1

148. 넓이를

149. device의

150. 크기만큼

151. 보여줘
meta name=viewport content=width=device-width, initial-scale=1, maximum-scale=1
즉,

152. mobile

153. 의

154. 가로

155. 해상도는

156. 320px인

157. 경우,

158.
device-width

159. 는

160. 320px을

161. 의미.

162. 넓이를

163. device의

164. 크기만큼

165. 보여줘
meta name=viewport content=width=device-width, initial-scale=1, maximum-scale=1
웹사이트가

166. 940px

167. 으로

168. 만들어졌지만.

170.
모바일이

171. 320px

172. 의

173. 크기를

174. 표현한다면

175.
1/3

176. 밖에

177. 안보이게

178. 된다.

179. 웹사이트가

180. 940px

181. 으로

182. 만들어졌지만

184.
모바일이

185. 320px

186. 의

187. 크기를

188. 표현한다면

189.
1/3

190. 밖에

191. 안보이게

192. 된다.

193. 그런데,

194.
이

195. 상태는

196. PC화면의

197. 일부분이

198. 보이는

199. 것임으로,

200.
모바일에

201. 최적화된

202. 느낌이

203. 아님.

204. 모바일웹에

205. 최적화된

206. UI

207. 필요

208. 어떻게

209. 이렇게

210. 하지?

211. 어떻게

212. 이렇게

213. 하지?
media-query

214. 접속

215. 기기가

216. 모바일기기이면

218.
화면을

219. 이렇게

220. 보여줘

222. 접속

223. 기기의

224. 폭이

225. 320px이하면

227.
화면을

228. 이렇게

229. 보여줘

231. 접속

232. 기기의

233. 폭이

234. 320px이하면

236.
css

237. float

238. 속성을

239. 없애줘

241. 접속

242. 기기의

243. 폭이

244. 320px이하면

246.
css

247. float

248. 속성을

249. 없애줘

250.
@media (max-width: 320px) {!
#aside {!
float : none;!
! }!
}

251. 자세한

252. 건

253. 생략검색한다..
https://developer.mozilla.org/en-US/docs/Web/Guide/
CSS/Media_queries

254. 그

255. 중에

256. 중요한

257. 건,
max-width, min-width
orientation
and, not 의 의미

258. media

259. query를

260. 잘

261. 쓰면

262.
반응형웹을

263. 구현할

264. 수

265. 있는

266. 것이다
image
t
http://www.onbile.com/info/mobile-website-trends-2013/

267. Mobile

268. Web

269. 디버깅

270. 또 짝.
http://nigayo.com/pp

271. Mobile

272. 브라우저는

273. 크롬개발자도구가..없다.

275.
디버깅을

276. 어떻게

277. 해야

278. 할까?

279.
찾아보자

280. !

281. iphone

282. 인가?

283.
iphone

284. safari

285. debugging

286. 방법을

287. 검색해보자

288.
android

289. 인가?

290.
chrome

291. android

292. mobile

293. web

294. debugging

295. 방법을

296. 검색

297. 따끈한

298. 좋은

299. 참고자료
http://www.slideshare.net/deview/2-37628617

300. 내

301. 프로젝트

302. 모바일웹

303. 시작하기

304. !

305. 전략짜기!
모바일웹

306. 전용으로

308.
새로운

309. HTML

310. 만들기
PC부터

311. 모바일웹까지

312.
VS. 반응형웹

313. 전략짜기!
!
Tablet,

314. Mobile용

315. 화면을

316. 설계해보자.

317.
해상도별로

318. 어떤

319. UI를

320. 보여줄

321. 것인가?

323. 상대방의

324. 전략을

325. 이해해보자

326.
들어보고,

327. 리뷰

328. 좀

329. 해주고

330. ,,

331. META

332. TAG

333. 설정하고,

334.
필요한

335. 반응형웹

336. CSS설정하고..

337. 중간고사

338. 제출일

339. 언제까지인지

340. 알죠?
중간고사

341. 90점이상이면

343.
과제를

344. 늦게

345. 냈거나

347.
지각을

348. 한

349. 경우에

350. 대해서

352.
reset

353. !