학습한 내용
- transforms, transition, animation 역할 및 기능 재학습
- mouse-animation 마우스 커서 손 모양 효과
transform: rotate(숫자deg); 결과=2차원 회전 효과
예) 10deg=오른쪽 회전 효과 -10deg=왼쪽 회전 효과
transform: skew(10deg, 20deg); 결과=3차원 회전 효과
transform: translate(100px, 100px); Object 배치 작업
CSS transform은 익스플로러.ver 10 이상 사용 가능하다. 하지만, 전 세계 브라우저 종류와 버전은 여러가지 존재하고 사용자들도 다양하기때문에 다른 버전에서 transform 사용하기 위해서는 접두사를 넣어줘야한다. 아래 예시를 통해 알아보자.
접두사 유형 표기 예) -ms- = Explorer 의미
-webkit- transform sth~ Google, safari 의미
-moz- transform sth~ FireFox 의미
-ms- transform sth~ Explorer 의미
-O- transform sth~ Opera 의미
-
transition 역할
가. transition sth width;
나. transition sth 2s;
다. transition sth linear;
라. transition sth 1s;↑ ↑ ↑ ↑ ↑
한줄 요약 결론 = transition: width, 2s, linear 1s;
한줄 요약때 가나다라 순서에 상관없이 똑같이 적용되지만, 초 단위를 의미하는 2s, 1s 는 순서에 영향을 받는다. 앞은 지속성(duration) 의미하고, 뒤 1s 는 지연(delay)를 의마하며 순서를 반드시 지켜줘야 한다. 만약, 단위를 하나만 입력하면 지속성(duration) 적용 된다.
한줄 요약을 하는 이유는 CSS 용량이 줄어 사용자들이 웹 서버 접속했을 때 로딩 속도가 더 빠르다. 개발자도 코딩 작업하기에 훨씬 더 편하다.
- 캐릭터 움직임 효과 사용시 animation 적용
animation-direction: normal(일회성 효과), alternate(왕복 효과), infinite(무한반복효과)
animation 속성을 이용해서 캐릭터 움직임 효과를 구현 할 경우 사용하는 코드가 있다.
@keyframes changeWidth {
sth: OR 숫자:
sth: OR 숫자:
from sth to sth }
학습 소감
맛깔나는 CSS맛을 내기위해서 transform, transition, animation 조미료를 익혔다.
