IE9에서 HTML5 개발하기 황리건, 한국 마이크로소프트

1

Mul$-­‐Core  CPU   GPU  Architecture  GPUs  

myContext.drawImage(image,  sx,  sy,  sWidth,  sHeight,  dx,  dy,  dWidth,  dHeight);  

fishH

 

fishW  

sY  

sX  

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();  

<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>    

2

3

7000    top  sites  

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  •  …  

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;”>  

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;  

}

•  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

CSS3 New additions – Text Effects

36

•  Text effects

•  text-overflow <div  style=“  text-­‐overflow:  ellipsis;”>  

•  word-wrap <div  style=“  word-­‐wrap:  break-­‐word;”>  

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;}  

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;  }  }    

if(  navigator.userAgent.indexOf('MSIE')  !=  -­‐1  )  {  

 //  Code  written  for  browser  X  }  

else  {  

 //  Code  written  for  browser  Y  }  

=  체크 포인트   =  대응 코드  

기능 체크  버전 체크  

IE8에서 문제되는 케이스