출처 : http://trendition.tistory.com/ (웹표준가이드)
nth-child
div p:nth-child(n) : div 요소안에서 n번째 자식 요소인 p요소에 스타일 적용
div p:nth-child(odd), div p:nth-child(2n+1) : 홀수번째 자식 요소
div p:nth-child(even), div p:nth-child(2n) : 짝수번째 자식 요소
div p:first-child: 첫번째 자식요소
div p:last-child: 마지막 자식요소
속성 셀렉터
Selector [attribute^=value] : 속성이 value 로 시작하는 항목
Selector [attribute$=value] : 속성이 value 로 끝나는 항목
Selector [attribute*=value] : value 가 포함되는 항목
input[type="text"] { ... }
input[type="radio"] { ... }
[data-value*="foo"] { ... }
h2[rel="friend"] { ... }
text-shadow , box-shadow
text-shadow: 가로거리 세로거리 블러값 색상;
box-shadow: 가로거리 세로거리 블러값 색상;
color:#000;
text-shadow:0px 1px 1px #fff;
text-shadow: 0px 2px 2px rgba(255, 255, 255, 0.4);
border -radius
모서리 둥글게 하기
border-radius: 5px 20px 5px 20px;
/* top left, top right, bottom right, bottom left */
border-radius: 10px/30px; /* horizontal radius / vertical radius */
border-radius: 30px/10px; /* horizontal radius / vertical radius */
border-radius: 50%;
gradient
background: 그라디언트 모양(방향, 색상1, 색상2)
background: linear-gradient(to right, red, orange);
background: linear-gradient(45deg, red, orange);
background: radial-gradient(red, orange);
background-size
배경 이미지 조정
background-size: 넓이 높이
background-size: cover 해당요소에 여백없이 채움
background-size: contain 전체 이미지가 잘린 곳 없이 해당요소안에 들어감
box-sizing: content-box | border-box | initial | inherit
content-box : 콘텐트 영역을 기준으로 크기를 정합니다.
border-box : 테두리를 기준으로 크기를 정합니다.
initial : 기본값으로 설정합니다.
inherit : 부모 요소의 속성값을 상속받습니다.
word-wrap:break-word
단어가 긴 경우 줄바꿈할때 단어를 끊어서 다음줄로 이어지도록 하는 기능
#box{
word-wrap:break-word
}
@font-face
@font-face 를 사용하여 웹페이지의 텍스트에 온라인폰트(online fonts)를 적용할 수 있다
@font-face{
font-family: 글꼴이름;
src: url(글꼴 파일 경로) format(글꼴 파일 유형) ;
}
@font-face{
font-family:'font1';
src:url('backout.ttf' ) format('truetype');
}
.text{
font-family: font1;
}
opacity:0.5
투명도 속성, 0 ~ 1사이의 숫자를 사용(0은 투명, 1은 불투명)
/* IE 8 */
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
/* IE 5-7 */
filter: alpha(opacity=50);
/* Netscape */
-moz-opacity: 0.5;
/* Safari 1.x */
-khtml-opacity: 0.5;
/* Good browsers */
opacity: 0.5;
transform
x축으로 이동 transform : translateX (x축 이동거리)
y축으로 이동 transform : translateY (y축 이동거리)
x,y축 동시 이동 transform : translate (x축 이동거리, y축 이동거리)
div{ transform: translateX(500px) }
div{ transform: translateY(400px) }
div{ transform: translate(200px,300px) }
x축으로 기울리기 transform : skewX(각도)
y축으로 기울리기 transform : skewY(각도)
x,y축 동시 기울리기 transform : skew(x축 각도, y축 각도)
div{ transform: skewX(10deg) }
div{ transform: skewY(20deg) }
div{ transform: skew(10deg, 20deg) }
x축으로 확대/축소 transform : scaleX(각도)
y축으로 확대/축소: transform : scaleY(각도)
x,y축 동시 확대/축소 transform : scale(x축 각도, y축 각도)
div{ transform: scaleX(1.2) }
div{ transform: scaleX(0.5) }
div{ transform: scale(1.2, 0.5) }
회전하기 transform : ration(각도)
회전기준점 transform-origin : 기준점
div{ transform: rotion(45deg), transform-origin:left-top }
transform 속성 중 3D 가능한 속성
perspective : 원근감 수치를 부모요소에 적용
z축으로 이동 transform :traslateZ(이동거리)
x축으로 회전 transform : rotateX (회전각도)
y축으로 이동 transform : rotateY(회전각도)
parent {perspective :1200px }
.child { transform: translateZ(300px) }
.child { transform: rotateX(30deg) }
.child { transform: rotateY(45deg) }
transition : property duration timeing-function delay
property : 적용할 속성 이름 , ALL (모두 선택할 경우)
duration : 진행 시간
timing - function : 진행 효과의 속도 ( linear , ease, ease-in , ease-out, ease-in-out ...)
delay: 트랜지션이 시작되기 전 지연시간
div{
transition:background-color 0.5s ease;
background-color: blue;
}
div:hover{
background-color: green;
}
@keyframes 모션이름 {0% { 모션 시작점의 CSS}
100% { 모션 끝점의 CSS }
}
animation: name duration easing delay iteration-count direction
name: @keyframes로 지정한 keyframse의 이름
duration : 애니메이션이 진행되는 시간(기본값 0초, 0s)
easing: 가속도( linear 가속도 있음, easing 가속도 있음)
delay : 애니메이션이 시작되기 전 지연시간
iteration-count :반복횟수 (무한반복 infinite)
direction : 연결방향 (alternate 역방향, normal 기본방향)
@ keyframes MY {
0% { opacity: 0; }
100% { opacity: 1; }
}
div {
animation: MY 5s infinite ;
}
div {
animation-name: bounce;
animation-duration: 4s;
animation-iteration-count: 10;
animation-direction: alternate;
animation-timing-function: ease-out;
animation-fill-mode: forwards;
animation-delay: 2s;
}