대단한 기술없이 반응형웹 UI 만들기
47 likes37,852 views
반응형웹 UI 를 적용할 수 있는 기초적인 방법들.
대단한 기술없이 반응형웹 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. ,
- 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. 적용해보자.
- 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. 예정이다.
- 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. 참고했어요,