반응형웹 UI 를 적용할 수 있는 기초적인 방법들.

1. 대단한

2. 기술없이,

3.
반응형

4. 웹

5. UI

6. 만들기

7.
!
윤지수

8. at

9. NEXT

10. 반응형

11. 웹?

13.
“오~

14. 자동으로

15. 막

16. 변화가

17. 되는

18. UI

19. !?”

20.
!
그런데

21. 사실,

22.
모든

23. device에서

24. 잘

25. 보이게

26. 하는

27. UI를

28. 만드는

29. 건

30. 쉬운

31. 일은

32. 아니다.

33.
!
심지어

34. 복잡한

35. 웹사이트는

36. 사이즈별

37. 다른

38. 웹UI

39. 페이지가

40. 존재…⋯

41.
당신이

42. 할

43. 수

44. 있다면

45. 그렇게

46. 하는

47. 것이

48. 사용자에게

49. 가장

50. 최적화된

51. 화면을

52. 제공할

53. 수

54. 있겠다.

55.
!

56. !
하지만

57. 복잡하지

58. 않은

59. UI라면

60. ?

62.
간단한

63. 설정만으로

64. 충분히

65. 반응형

66. 웹을

67. 만들

68. 수

69. 있다는

70. 사실!

72.
!
(신기루

73. 같은

74. 이야기는

75. 아니니까

76. 방심하지

77. 말자

78. @.@

79. )

81. 먼저

82. 결론,

83. 3가지만

84. 기억하기.
%

85. ,

86.
conent=device-width

87. ,

88.
media-query

90. 1.

91. ‘%’

92. 데탑

93. 브라우저에서의

94. 화면

95. 적용하고자

96. 하는

97. UI가

99.
고정형(px

100. 로

101. 규정한

102. 페이지)이

103. 아니라면

104. ?

106.
다양하게

107. 반응하게

108. 하는

109. 건

110. 쉽다.

111. 가로폭

112. 관련

113. 속성들을

115.
%

116. 단위로

117. 조정만

118. 해도

119. 기기별로

120. 훌륭하게

121. 반응함.

122.
!
(width,

123. margin-left,

124. margin-right,

125. padding-left…⋯.)
header div#title{!
width : 90%;!
margin-left: 5%;!
margin-right:5%;!
margin-top: 20px;!
margin-bottom: 20px;!
position: relative;!
height : 250px;!
border-radius: 0.8em;!
border: 1px solid rgb(214, 214, 214);!
box-shadow: 2px 2px 4px #ECECEC;!
color : #1a1a1a;!
}!

126. 2.

127. device-width

128. 만약,

130.
데탑

131. 웹

132. 페이지를

133. 만든

134. 후

135. 별다른

136. 설정

137. 안하고

139.
모바일브라우저에서

140. 딱

141. 보면,

142.
!
어이없게

143. 나름

144. 볼만하다(?)

145.
!
모바일브라우저가

146. 작은

147. 데탑이라고

148. 가정하고

150.
알아서

151. 수정하여

152. 렌더링

153. 해준다.

155.
PC버전을

156. 줌아웃

157. 한

158. 것

159. 같기도

160. 하고..

161.
마치

162. 작은

163. 모형PC에서

164. 보는

165. 것과

166. 같다.

167.
모바일웹에서

168. 기본적으로

169. 이렇게

170. 보여지는

171. 이유는

172. ?

173.
모바일

174. 사파리

175. 브라우저는

176.
자동으로

177. 980픽셀

178. 크기에

179. 맞춰

180. 렌더링을

181. 한

182. 후

183.
디바이스의

184. 뷰포트(보이는

185. 영역)에

186. 맞게

187. 줌아웃한다.

188. 하지만,

189.
좀더

190. 모바일스럽게

191. 할

192. 수

193. 없을까?

194.
!
!
현재는

195. 그럭저럭

196. 보이긴

197. 하는데,,

198.
글자도

199. 좀

200. 작고

201. 가독성이

202. 떨어진다.

203.
!

204. ‘device-width’

205. 를

206. 적용해보자.

207.
meta name=viewport content=width=device-width
그런데,

208.
글자가

209. 지멋대로

210. 커지고

211. 레이아웃도

212. 좀

213. 엉망이다.

215.
device가

216. 모바일에

217. 최적화되게

218. 조정하지

219. 않는

220. 거

221. 같다.

222.
!
이제

223. 스타일

224. 조정을

225. 내가

226. 직접할

227. 수

228. 있다.(해야한다)
#

229. @viewport

230.
사실

231. viewport

232. meta

233. 태그는

234. 정식표준으로

235. 인정받지

236. 못하고

237. 있으며,

238.
@viewport라는

239. 것이

240. 앞으로의

241. 표준으로

242. 자리

243. 잡을

244. 예정이다.

245.
http://dev.w3.org/csswg/css-device-adapt/#the-atviewport-rule

246. !
모바일에

247. 어울리게,

248.
어떻게

249. 스타일

250. 조정을

251. 해야

252. 할까?

253.
!
!
음..아..상식적으로다가

254. 쉽게

255. 생각해보면,,

256.
‘특정

257. 해상도인

258. 경우에는

259. 다른

260. 스타일

261. 적용을

262. 할

263. 수

264. 있으면

265. 좋겠다’

266.
!

267. 3.

268. media-query

269. media-query

270. 라는

271. 것을

272. 적용하면

273.
특정

274. 해상도

275. 조건인

276. 경우에만

277. 동작하는

278. CSS

279. 를

280. 적용할

281. 수

282. 있다

283. !

284.
@media screen and (max-width:1100px) {!
!
! div#wrap {!
! ! font-size: 13px;!
! }!
!
}
‘if’

285. 문과

286. 같다고

287. 생각하면

288. 되겠다

290. ‘media-query’를

291. 적용
!
@media screen and (max-width:401px) {
div#wrap {
width:100%;
1border :2px solid blue;
}
!
!
!
!
nav#top {
height: 40px;
}
nav#top a {
font-size: 1em;
}
header div#title{
margin-top: 10px;
margin-bottom: 10px;
height : 100px;
}
특정

292. 해상도를

293. 기준으로

295.
font크기와

297.
높이값

298. 관련

299. 속성을

300. 변경했다
#title h2 {
font-size: 1.0em;
}
……
}
!
!
@media screen and (min-width:402px) and (max-width:990px) {
div#wrap {
1border :2px solid red;
}
!
!
}
#title h1 {
font-size: 2.6em;
}
header div#titlea {
height : 150px;
}

301. 3
media-query는

302. 크게

303.
Mobile
Tablet
가지만

304. 분기해도

305. 훌륭.
Desktop

306. iOS_iphone-4S
iOS_iphone-5S-7.0
win8.1_opera_12.16
android Samsung Galaxy-Nexus_4.0
android Samsung Galaxy-Note_2.3
win7_ie_11
win8_ie_10
win XP chrome_25

307. 결론.
폭관련

308. 속성을

309. ‘%’

310. 단위로

311. 적용해서

312. 유동적으로

313. 변경되게

314. 한다

315.
device-width값을

316. 설정해서

317. 모바일

318. 스타일을

319. 컨트롤

320. 가능하게

321. 한다

322.
media-query

323. 로

324. 원하는

325. 해상도별

326. 스타일

327. 조정을

328. 한다

330. 참고했어요,

331.
https://developer.mozilla.org/en-US/docs/Mozilla/Mobile/Viewport_meta_tag
http://webdesign.tutsplus.com/tutorials/htmlcss-tutorials/quick-tip-dont-forget-the-viewport-meta-tag/
http://i-skool.co.uk/mobile-development/web-design-for-mobiles-and-tablets-viewport-sizes/