- 2D
translate()
rotate()
scale()
skew()
matrix()

참고: http://www.css3files.com/transform/

-moz-transform: scale(2, 1.5);
-webkit-transform: scale(2, 1.5);
-ms-transform: scale(2, 1.5);
transform: scale(2, 1.5);

-moz-transform-origin: 0 0;
-webkit-transform-origin: 0 0;
-ms-transform-origin: 0 0;
transform-origin: 0 0;
/*transform-origin Defult : 50% 50%;*/

참고: http://eleqtriq.com/wp-content/static/demos/2010/css3d/matrix2dExplorer.html


- 3D

transform: rotateX(120deg);
-webkit-transform: rotateX(120deg); /* Safari and Chrome */
-moz-transform: rotateX(120deg); /* Firefox */

transform: rotateY(120deg);
-webkit-transform: rotateY(120deg); /* Safari and Chrome */
-moz-transform: rotateY(120deg); /* Firefox */

참고: http://www.clicktorelease.com/code/css3dclouds/

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;

text-wrap
word-wrap:break-word;/*강제줄바꿈*/

text-overflow
overflow:hidden; /*넘치는영역제한*/
text-overflow:ellipsis;
white-space:nowrap; /*줄바꿈 금지*/

참고: http://www.w3schools.com

border-radius
div {
border:2px solid;
border-radius:25px;
-moz-border-radius:25px; /* Old Firefox */
}

box-shadow
div {
box-shadow: 10px 10px 5px #888888 inset; /*X좌표, Y좌표, blur값, 그림자색; */
filter:progid:DXImageTransform.Microsoft.Shadow(color=#888888, direction=135, strength=20);
}

border-image
div {
border:30px solid;
border-image:url(border.png) 30 30 round;
-moz-border-image:url(border.png) 30 30 round; /* Old Firefox */
-webkit-border-image:url(border.png) 30 30 round; /* Safari and Chrome */
-o-border-image:url(border.png) 30 30 round; /* Opera */
}

 

Form Method 전송방법 종류
- options : 
- get : 검색필드, 정보의 전송요청
- head: Meta정보만 전송요청
- post : 암호화
- put : 
- delete : 
- trace : 정보 요청
- connect : 연결요청


암호화하는 방법 enctype=""
- application/x-www-form-urlencoded :(기본값) 모든 문자를 인코딩 합니다.
- multipart/form-data :어떠한 문자 인코딩도 하지 않습니다. 주로 파일 업로드 컨트롤을 제공하는 경우 사용합니다.(이미지)
- text/plain :공백이 + 문자로 변환되며 특수 문자를 인코딩 하지 않습니다.


서식안에 있는 문자코드셋트 설정가능
accept-charset="UTF-8" 


폼안에 있는 fieldset 링크 가능 

1. ul의 높이 조절
- 높이값이 고정되어 있을때,

/* .dep2가 초기화면에 보이지 않았다가 target이 되면 높이값을 각기 다르게 설정 (transition설정)  */
.dep2{
 height:0; overflow:hidden;
 /* 나타나는 효과 : 속성명, 시간*/
 transition: height .5s;
 -moz-transition: height .5s; /* Firefox 4 */
 -webkit-transition: height .5s; /* Safari and Chrome */
 -o-transition: height .5s; /* Opera */
}
#product1:target .dep2{height:152px;}


2. li의 높이 조절

/* .dep2가 초기화면에 보이지 않았다가 target이 되면 높이값을 각기 다르게 설정 (transition설정)  */
.dep2 li{
 height:0; overflow:hidden; margin-top: -1px;
 /* 나타나는 효과 */
 transition: height .5s;
 -moz-transition: height .5s; /* Firefox 4 */
 -webkit-transition: height .5s; /* Safari and Chrome */
 -o-transition: height .5s; /* Opera */
}
.product:target .dep2 li{height:38px;}





- 스크립트 없이 css만으로 조절할때
- ie지원안함,
- toggle기능 지원안됨