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

565 views
477 views

Published on

Published in: Technology, Design
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
565
On SlideShare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
5
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

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

×