IE9에서 HTML5 개발하기

2,190 views

Published on

IE9에서 HTML5 개발할 때 활용할 수 있는 팁

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

No Downloads
Views
Total views
2,190
On SlideShare
0
From Embeds
0
Number of Embeds
4
Actions
Shares
0
Downloads
13
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

IE9에서 HTML5 개발하기

  1. 1. IE9에서 HTML5 개발하기 황리건, 한국 마이크로소프트
  2. 2. 1
  3. 3. Mul$-­‐Core  CPU   GPU  Architecture  GPUs  
  4. 4. myContext.drawImage(image,  sx,  sy,  sWidth,  sHeight,  dx,  dy,  dWidth,  dHeight);  
  5. 5. fishH   fishW   sY   sX  
  6. 6. var  myCanvas  =  document.getElementById('myCanvas');   var  ctx  =  myCanvas.getContext("2d");   …   ctx.save();   ctx.translate(x,  y);   ctx.scale(scale,  scale);     ctx.transform(flip,  0,  0,  1,  0,  0);   ctx.drawImage(imageStrip,  fishW  *  cell,  fishH  *  species,  fishW,   fishH,  -­‐fishW  /  2,  -­‐fishH  /  2,  fishW,  fishH);   scale  =  nextScale;   ctx.restore();  
  7. 7. <script  type="text/javascript">    function  addWebApp()  {     try  {      window.external.msAddSiteMode();     }  catch(ex)  {        //  Site  Mode  not  supported.      }     }     </script>    <button  onclick="addWebApp()"  title="Click  to  add  this   webpage  to  your  Windows  Start  menu.">  Launch  in  Site   Mode</button>    
  8. 8. 2
  9. 9. 3
  10. 10. 7000    top  sites  
  11. 11. DOM   •  XHTML   •  DOM  Core  (createDocument)   •  L2  (addEventListener)   •  L3  (DragEvent)   •  Traversal   •  Range   •  SelecWon   •  DOMContentLoaded   •  getElementsByClassName   •  …   Graphics   •  Video   •  Audio   •  Canvas   •  SVG   •  Shapes   •  Text   •  TransformaWons   •  Events   •  Styling   •  …   CSS3   •  Media  Queries   •  Color  (opacity)   •  Backgrounds  &  Borders   •  Selectors   •  Namespaces   •  Fonts   •  Values  and  Units   •  …  
  12. 12. CSS3 New additions – Borders 33 •  Borders •  border-color •  Values : top right bottom left <div  style="  border-­‐color:red  green  orange  blue;”>   •  border-radius •  Values : Top-Left Top-Right Bottom-Right Botton-Left Width <div  style="  border-­‐radius:  0px  100px  100px  0px;”>   •  border-style •  Values : dotted | dashed | groove | ridge | double <div  style="  border-­‐style:  dotted;”>   •  box-shadow <div  style="  box-­‐shadow:  5px  5px  10px  #000;”>  
  13. 13. CSS3 New additions – Backgrounds 34 •  Backgrounds •  background-origin •  background-clip •  background-size •  multiple backgrounds div.Sample   {    height:  200px;    width:  720px;    padding:  150px  20px  20px  20px;    background:  url(body-­‐top.gif)  top  left  no-­‐repeat,    url(banner_fresco.jpg)  11px  11px  no-­‐repeat,    url(body-­‐bottom.gif)  bottom  left  no-­‐repeat,    url(body-­‐middle.gif)  left  repeat-­‐y;   }
  14. 14. •  Color •  HSL colors <div  style="background-­‐color:  hsl  (0,100%,  50%);">     •  HSLA colors <div  style="background-­‐color:  hsla  (0,100%,50%,0.2);">   •  RGBA colors <div  style="background:  rgba  (255,  0,  0,  0.2);">     •  Opacity <div  style="background:  rgb  (255,  0,  0)  ;  opacity:  0.5;">   CSS3 New additions – Color 35
  15. 15. CSS3 New additions – Text Effects 36 •  Text effects •  text-overflow <div  style=“  text-­‐overflow:  ellipsis;”>   •  word-wrap <div  style=“  word-­‐wrap:  break-­‐word;”>  
  16. 16. CSS3 New additions – Selectors 37 •  User-interface box-sizing •  resize •  outline •  nav-top, nav-right, nav-bottom, nav-left •  Selectors •  Attribute selectors  [att^=val] att attribute whose value begins with the prefix “val”.  [att$=val] att attribute whose value ends with the suffix “val”.  [att*=val] att attribute whose value contains the substring “val”. p[title^=“sample"]  {background:  yellow;}  
  17. 17. CSS3 New additions – Web Fonts / Media Query 38 •  Basic box model •  overflow-x •  overflow-y •  Web fonts  @font-­‐face  {                      font-­‐family:  Whimsy;                  src:  url('Whimsy.woff');                }    <div  style=“  font:  24pt  Whimsy,  sans-­‐serif;”>   •  Media Queries    @media  (max-­‐width:1024px)  {      .displaytext  {  background-­‐color:  #F0F;  font:  24pt  sans-­‐serif;  }  }      @media  (max-­‐width:800px)  {      .displaytext  {  background-­‐color:  #F00;  font:  18pt  sans-­‐serif;  }  }    
  18. 18. if(  navigator.userAgent.indexOf('MSIE')  !=  -­‐1  )   {    //  Code  written  for  browser  X   }   else   {    //  Code  written  for  browser  Y   }  
  19. 19. =  체크 포인트   =  대응 코드   기능 체크  버전 체크  
  20. 20. IE8에서 문제되는 케이스  

×