Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

H3 2011 HTML/CSS로 만들어진 디테일이 살아있는 앱 제작의 노하우를 모두 공개합니다!_FI팀_윤병선

624 views

Published on

Published in: Technology, Design
  • Be the first to comment

H3 2011 HTML/CSS로 만들어진 디테일이 살아있는 앱 제작의 노하우를 모두 공개합니다!_FI팀_윤병선

  1. 1. HTML/CSSFI TEAM
  2. 2. 2YEARS
  3. 3. <HTML> CSS{}
  4. 4. OBJECTIVE-C
  5. 5. S PRESSO
  6. 6. <HTML>
  7. 7. =PC MOBILE
  8. 8. T_T
  9. 9. GUIDE VER. 1
  10. 10. 3MONTHS
  11. 11. 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
  12. 12. 1-_-? 2
  13. 13. -_- z Z
  14. 14. LOW MEDIUM HIGH
  15. 15. 240DPI 160DPI480 x 800 320 x 480
  16. 16. 1.5 PX
  17. 17. RETINA-_-
  18. 18. RETINA NO RETINA320 x 480 640 x 960
  19. 19. X_O
  20. 20. b !!!!
  21. 21. AMOLED
  22. 22. CURSOR FINGER
  23. 23. PORTRAIT LANDSCAPE
  24. 24. BROWSER
  25. 25. IE 6
  26. 26. -_-a = -_-!!
  27. 27. T_T
  28. 28. T_T T_T T_T T_T T_T T_T T_T SINGLE T_T CODE T_T T_T T_TT_T T_T T_T
  29. 29. S/B DESIGN HTML CSS
  30. 30. 640x960 480x800RETINA 240DPI
  31. 31. 2 DESIGN 2 CSS 2 IMG
  32. 32. USER AGENT FILTERINGS/B DESIGN HTML CSS
  33. 33. <meta name="viewport" content="user-scalable=no, width=device-width, target-densityDpi=240"> target-densityDpi = 240
  34. 34. -_-+
  35. 35. RETINA-_-
  36. 36. 640 x 960 PIXEL x 50% = 320 x 480 SCREEN RESOLUTION
  37. 37. OBJECT NO RETINA RETINA
  38. 38. WHAT?
  39. 39. 320 x 480 x 200% = 640 x 960
  40. 40. BORDER-RADIUS : 20px FONT-SIZE : 14px BORDER : 2px LINE-HEIGHT : 20px
  41. 41. 100 x 100px IMAGE SIZE.img { width:50px; height:50px; }.bg { background-size:50px 50px; }
  42. 42. 100px x 50% x 200% = 100px
  43. 43. 3GS
  44. 44. CURSOR FINGER
  45. 45. HTML<a href=”#”> <h3> </h3> <span> </span> <em> </em></a>CSSa { display:block; padding:10px; }
  46. 46. <!DOCTYPE html>
  47. 47. LAYOUT
  48. 48. A B A B
  49. 49. HTML<ul> <li> A </li> <li> B </li></ul>CSSli { float:left; width:50%; }
  50. 50. 100 / 2 = 50%100 / 4 = 25%100 / 5 = 20%100 / 6 = 16.666666%
  51. 51. A B A B
  52. 52. 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; }
  53. 53. 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_TT_T T_T T_T
  54. 54. 1
  55. 55. 2
  56. 56. 3
  57. 57. 4
  58. 58. 5
  59. 59. 6
  60. 60. NIUUUSWWW.NIUU.USYBS485 @ KTHCORP.COM

×