CSS3 속성 몇 가지, Animation

191220 수업 내용 정리

---

CSS3 속성 몇 가지

border-radius : 테두리의 둥글기를 지정, 숫자가 커질수록 원에 가까워짐

box-shadow : 오른쪽 그림자 크기, 아래쪽 그림자 크기, 번지는 정도, 색상

ex) box-shadow:10px 10px 30px #666666;

오른쪽 10px, 아래쪽 10px 크기, 30px 넓이로 퍼짐, #666666 색을 가짐

background-size : width height;

text-shadow : 텍스트 그림자 지정, 들어가는 값은 box-shadow와 동일

색상을 rgba(r, g, b, a)로 지정하면 4번째 값에 opacity(투명도 : 0 ~ 1)를 부여할 수 있음

 

---

animation

animation-duration : 작동시간(초)

animation-name : 애니메이션 이름

예약어 @keyframes : 애니메이션 이름 {기능} : 애니메이션 생성, 함수와 유사

동작 포인트 지정 : from{} to{}

ex) @-webkit-keyframes slideIn {

from{ margin-left:0%; width:100%; }

to{ margin-left:100%; width:100%;}

}

※ 애니메이션이 적용되지 않는 다면 브라우저별 접두어를 활용

---

애니메이션 사용은 상당히 까다롭기 때문에 브라우저별로 연습해 볼 필요가 있습니다.