html5 속성들 (html5 오픈컨퍼런스 by 정찬명님 발표 동영상을 보고...)

## text-shadow

text-shadow:5px 5px 0 #ccc;
filter:progid:DXImageTransform.Microsoft.dropshadow(OffX=5, OffY=5, Color=#cccccc, Positive=true);
display:inline-block; zoom:1;

IE 브라우저를 제외한 모든 브라우저가 이미 text-shadow 속성을 지원하고 있다. blur 값은 생략할 수 있는데 생략하는 경우 기본값은 blur 스타일이 전혀 지정되지 않은 '0'이다. IE는 DropShadow Filter를 사용할 수 있지만 그림자의 blur 값이 '0'과 같은 표현으로 처리되고 blur 값을 지정할 수 없는 단점이 있다. IE 브라우저 버전간 호환을 위해 display 속성을 block 또는 inline-block 으로 지정하고 zoom:1 속성을 추가로 부여해야 한다.


## text-overflow

text-overflow:ellipsis;

IE는 이미 IE 6 버전부터 지원하고 있다. Firefox 브라우저는 7.0 버전(2010-09-28) 부터 지원하기 시작했다. 이 속성은 display 속성이 inline-block 또는 block을 지닌 요소에 적용할 수 있다. white-space:nowarp; overflow:hidden 속성을 함께 사용해야 한다.

## word-wrap

word-wrap:break-word;

1byte 문자열이 공백 없이 등장하는 경우 모든 브라우저들은 이를 하나의 단어로 해석하기 때문에 개행하지 않는다. 이것을 강제로 개행할 수 있다.

## box-shadow

box-shadow:10px 10px 10px silver inset;
filter:progid:DXImageTransform.Microsoft.Shadow(color=silver,direction=135, strength=20);

값은 'X좌표, Y좌표, blur값, 그림자색' 순으로 선언한다. blur 값은 생략할 수 있는데 생략하는 경우 기본값은 blur 스타일이 전혀 지정되지 않은 '0'이다. IE 6~8 브라우저는 Shadow Filter를 적용할 수 있으나 그림자를 한 방향으로만 표현할 수 있고 사방으로 표현할 수 없는 제약이 따른다. inset 값을 추가하면 그림자가 상자 안쪽으로 발생하는데 IE 6~8 브라우저에 대응하는 filter는 이런 표현은 불가능하다.

## border-radius (ie x p- htc 포맷의 자바스크립트 파일을 이용하면 ie에서도 구현가능.)

border-radius:30px;
-moz-border-radius:30px;
-webkit-border-radius:30px;

네 방향 모두 적용하는 경우.

border-radius:30px 0;
-moz-border-radius:30px 0;
-webkit-border-top-left-radius:30px;
 -webkit-border-bottom-right-radius:30px;

좌상단-우하단만 적용하는 경우.

## background(s) // 예전과 달리 html5에서는 여러번, 무한대로 bg 이미지를 사용가능.

background:
url(bg1.gif) no-repeat left top,
url(bg2.gif) no-repeat right top,
url(bg3.gif) no-repeat left bottom,
url(bg4.gif) no-repeat right bottom;

속성의 값을 쉼표(,)로 분리하면 배경 이미지의 사용 횟수를 무한대로 늘릴 수 있다.

## gradient

background:#3EAF0E -webkit-gradient(linear, 0% 0%, 0% 100%, from(#3EAF0E), to(#fff));
background:#3EAF0E -moz-linear-gradient(top, #3EAF0E, #fff);
background:#3EAF0E -o-linear-gradient(top, #3EAF0E, #fff);
filter:progid:DXImageTransform.Microsoft.gradient(startColorStr=#3EAF0E, endColorStr=#ffffff);

웹킷(크롬, 사파리)과 파이어폭스 및 IE의 속성 및 값 선언 방식이 모두 다름에 유의한다. 웹킷은 (타입, X시작점 Y시작점, X종료점 Y종료점, 시작색, 종료색) 형식으로 선언하고 파이어폭스와 오페라는 (시작점, 시작색, 종료색) 순으로 선언한다. gradients를 지원하지 않는 브라우저를 위하여 기본 배경색을 지정해두어야 함에 유의한다. IE는 IE 전용 Gradient Filter를 사용한다.

## transform

-o-transform:rotate(90deg);
-o-transform-origin:0 100%;
-moz-transform:rotate(90deg);
-moz-transform-origin:0 100%;
-webkit-transform:rotate(90deg);
-webkit-transform-origin:0 100%;
filter:progid:DXImageTransform.Microsoft.Matrix(M11=6.123031769111886e-17, M12=-1, M21=1, M22=6.123031769111886e-17, sizingmethod='auto expand');

시계 방향으로 90도 회전시키는 코드(rotate). translate(이동), scale(크기), rotate(회전), skew(비틀기)가 가능하다. transform-origin 속성은 transform의 축을 지정하는 속성으로써 값은 기본 값이 50%(X축) 50%(Y축) 이기 때문에 기본 값을 따르는 경우 생략할 수 있다. IE의 경우 Matrix Filter를 사용할 수 있으나 사용법이 다소 복잡하다.

CSS 2D Transforms Module Level 3 › transform - http://www.w3.org/TR/css3-2d-transforms/#transform-property

MSDN › Matrix Filter - http://msdn.microsoft.com/en-us/library/ms533014(v=VS.85).aspx


## transition

a{color:blue;
  -o-transition:0.2s;
  -webkit-transition:0.2s;
  -moz-transition:0.2s;}

a:hover{color:red;}

transition 속성의 값으로는 어떤 속성을 몇 초간 진행할 것인지 정의한다. 어떤 속성을 transition 할 것인지 지정하지 않으면 기본 값 all이 지정되어 모든 속성을 transition 시킨다.

## animation

.ani{-webkit-animation:webkitFire infinite 1s linear;}

@-webkit-keyframes 'webkitFire'{
  from{ -webkit-transform:rotate(0deg);}
  to{-webkit-transform:rotate(360deg);}
}

'webkitFire'라는 사용자 정의 에니메이션이 실행 된다. 일정한(linear) 속도로 1초(1s)에 한 바퀴(0~360deg)씩 영원히(infinite) 돌게 된다.

infinite 1s linear; // 1초 간격으로 영원히 속도의 변화 없이.