H3 2011 HTML/CSS로 만들어진 디테일이 살아있는 앱 제작의 노하우를 모두 공개합니다!
3 likes1,413 views
This document provides guidance for developing HTML and CSS code for mobile devices. It discusses topics like screen resolutions and pixel densities for different devices, techniques for responsive design like viewport settings and media queries, and patterns for touch-friendly interfaces using large hit areas and fingers instead of cursors. The guidance is organized into sections covering platforms, resolutions, layouts, images, and inputs with examples of code implementations.
More Related Content
Similar to H3 2011 HTML/CSS로 만들어진 디테일이 살아있는 앱 제작의 노하우를 모두 공개합니다! (20)
More from KTH (15)
Recently uploaded (20)
H3 2011 HTML/CSS로 만들어진 디테일이 살아있는 앱 제작의 노하우를 모두 공개합니다!
- 3. 2YEARS
- 6. <HTML> CSS{}
- 7. OBJECTIVE-C
- 8. S PRESSO
- 10. <HTML>
- 12. = PC MOBILE
- 13. T_T
- 14. GUIDE VER. 1
- 15. 3MONTHS
- 16. GUIDE GUIDE GUIDE VER. 10 VER. 3 GUIDE VER. 8 GUIDE VER. 1 VER. 9 GUIDE GUIDE GUIDE VER. 12 VER. 2 VER. 11 GUIDE GUIDE GUIDE VER. 7 GUIDE VER. 6 VER. 5
- 17. 1 -_-? 2
- 18. -_- z Z
- 19. LOW MEDIUM HIGH
- 20. 240DPI 160DPI 480 x 800 320 x 480
- 22. 1.5 PX
- 23. RETINA -_-
- 24. RETINA NO RETINA 320 x 480 640 x 960
- 25. X_O
- 26. b !!!!
- 27. AMOLED
- 29. CURSOR FINGER
- 31. PORTRAIT LANDSCAPE
- 32. BROWSER
- 33. IE 6
- 36. -_-a = -_-!!
- 37. T_T
- 38. T_T T_T T_T T_T T_T T_T T_T SINGLE T_T CODE T_T T_T T_T T_T T_T T_T
- 39. S/B DESIGN HTML CSS
- 40. 640x960 480x800 RETINA 240DPI
- 41. 2 DESIGN 2 CSS 2 IMG
- 42. USER AGENT FILTERING S/B DESIGN HTML CSS
- 46. <meta name="viewport" content="user-scalable=no, width=device-width, target-densityDpi=240"> target-densityDpi = 240
- 48. -_-+
- 49. RETINA -_-
- 51. 640 x 960 PIXEL x 50% = 320 x 480 SCREEN RESOLUTION
- 52. OBJECT NO RETINA RETINA
- 53. WHAT?
- 54. 320 x 480 x 200% = 640 x 960
- 55. BORDER-RADIUS : 20px FONT-SIZE : 14px BORDER : 2px LINE-HEIGHT : 20px
- 56. 100 x 100px IMAGE SIZE .img { width:50px; height:50px; } .bg { background-size:50px 50px; }
- 57. 100px x 50% x 200% = 100px
- 58. 3GS
- 59. CURSOR FINGER
- 60. HTML <a href=”#”> <h3> </h3> <span> </span> <em> </em> </a> CSS a { display:block; padding:10px; }
- 61. <!DOCTYPE html>
- 62. LAYOUT
- 63. A B A B
- 64. HTML <ul> <li> A </li> <li> B </li> </ul> CSS li { float:left; width:50%; }
- 65. 100 / 2 = 50% 100 / 4 = 25% 100 / 5 = 20% 100 / 6 = 16.666666%
- 66. A B A B
- 67. HTML <ul> <li class=”a”> A </li> <li class=”b”> B </li> </ul> CSS .a { position:absolute; top:0; left:0; width:100px; } .b { padding-left:100px; }
- 69. T_T T_T T_T T_T T_T T_T T_T T_T T_T T_T T_T T_T T_T T_T T_T T_T T_T
- 71. 1
- 72. 2
- 73. 3
- 74. 4
- 75. 5
- 76. 6