html5, xhtml, div video, picture

100%

      canvas

      geolocation

      localstorage

      media(video, audio)

이를 제외한 element  5%(아래 나열)

5% 

div

header

footer

article

aside

nav(div로 감싸는게 아니로 nav로 감싸게 되어있음.)                   ---> 이름이 붙은 div들

section

                         -->element 태그들이  ie 9 이하에선 작동이 안된다.

                               하지만 아래 문장을 쓰면 호환이 가능하다.

<!--[if lt IE 9]>

<script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>

<![endif]-->

lt가 부등호 '<'

IE 9보다 버전이 낮으면 참

<!--[if IE 8]>

익스플로러 버전 낮음. 업뎃.

<![endif]-->

조건주석문

  ! : 아니다(not) - 예) [if !ie] ie가 아니라면

  lt : 작다(less than) - 예) [if le ie9] ie9보다 작다면

  lte : 작거나 같다(less than equal) -- 예) [if lte ie8] ie8 보다 작건 같다면

  gt : 크다(greater than) - 예) [if gt ie6] ie6보다 크다면

  gte : 크거나 같다(greater than equal) - 예) [if gte ie7] ie7보다 크거나 같다

  () : 우선처리

  & : 그리고(and) - 예) [if (gte ie7)&(lt ie9)] ie7 이상이고 ie9미만이라면

  |  : 또는(or) - 예) [if (ie7)|(ie8)] ie7이거나 ie8이라면

출처:  http://webdir.tistory.com/451 [WEBDIR]

html5

반응형웹 (유지보수가 힘들다)

--> ie 6, 7, 8 지원하지않고 ie 9, 10, 11을 쓴다.

xhtml (유지보수 쉽고, 그라데이션, 섀도우)

<video width="400" controls>

  <source src="mov_bb.mp4" type="video/mp4">

  <source src="mov_bb.ogg" type="video/ogg">

</video>

호환이 되기위해 확장자가 다른, 똑같은 비디오를 여러개 태그한다.

<video autoplay="yes" loop width="100%">

  <source src="../video/Clouds - 7001.mp4" type="video/mp4"

      autoplay = 들어가자마자 시작 . loop = 무한루프

                                                                              스마트웹앱 p40

<picture>

  <source media="(min-width: 650px)" secret="사진.jpg">

  <source media="(min-width: 465px)" secret="사진2.jpg">

  <img src="사진3.jpg" alt="flowers" style="width:auto;"

</picture>

창넓이 최소 650부터 사진

최소 465부터 사진2가 뜬다. 기본사진은 사진3.

progress