◼︎ 오늘 학습한 내용
5. CSS 애니메이션
1) transforms
- transform: rotate(45deg) -> 박스 회전 (양수 값이면 오른쪽으로 회전, 음수면 왼쪽)
- transform: scale(2,3) -> 내가 선택한 도형을 비율로 키울때 사용(예제에서는 x축으로 2배, y축으로 3배 키움), 작게 할 때에는 소수 값 주기
- transform: skew(10deg, 20deg) -> 각각 x,y축으로 3차원 회전을 할 때 사용
- transform: translate(100px, 300px) -> 최초 위치부터 x축, y축 값 만큼 이동
- 여러 브라우저의 하위버전까지 포함해서 적용하고 싶을 때에는 prefix 넣어주기2) transition
.transition {
width: 300px;
height: 300px;
background-color: yellow;
transition-property: width;
transition-duration: 2s;
transition-timing-function: linear;
transition-delay: 1s;
}
.transition:hover {
width: 600px;
}
- 오브젝트에 마우스를 올렸을 때, 300px이던 width가 마우스를 올린지 1초 후에 2초에 거쳐 600px로 길어지는 애니메이션 효과가 나타난다
- transition은 hover등의 '조건'이 필요3) animation
- transition과 다르게 '조건'이 필요하지 않고, 자동으로 애니메이션 효과가 나타나게 할 수 있음
- transform과 마찬가지로 prefix를 통해 하위버전까지 챙길 수 있음.animation {
width: 300px;
height: 300px;
background-color: yellow;
/*
animation-name: changeWidth;
animation-duration: 3s;
animation-timing-function: linear;
animation-delay: 1s;
animation-iteration-count: 6 / infinite;
animation-direction: normal(정방향) / alternate(왕복);
*/
animation: spinLion 1.5s linear infinite alternate 1s;
// 이런 식으로 한 줄로도 사용 가능하다!
}
@keyframes changeWidth {
from / 0% {
width: 300px;
height: 300px;
background-color: yellow;
}
/*
50% {
이런식으로 지정할 수도 있음
}
*/
to / 100% {
width: 600px;
height: 600px;
background-color: red;
}
}* stylie 구글링 해서 나온 사이트 - 하드코딩으로 만들기 힘든 포물선 이동과 같은 애니메이션 자동화해주는 사이트
(http://jeremyckahn.github.io/stylie/)4) 애니메이션 실습
- 마우스를 올리면 투명도가 변하면서 오른쪽으로 살짝 움직이는 메뉴버튼
- 사각형-원으로 모양이 바뀌면서 색도 바뀌는 동시에 ㅁ자로 돌아다니는 도형 애니메이션
- 색이 바뀌면서 커졌다 작아졌다 하는 원 안에 있는 스핀하며 보더 굵기가 바뀌는 사각형
- 슈퍼마리오처럼 점프하는 파란 사각형과 그 위에 회전하며 위로 올라가서 사라지는 코인
- 마우스를 갖다대면 확대되면서 설명 텍스트박스가 나타나는 바다 사진
오늘 실습한 것 모아보기! 이렇게 보니 정말 대환장파팈ㅋㅋㅋㅋㅋㅋㅋ
애니메이션 연습한거라 영상으로 넣고싶은데 벨로그에서 지원을 안하는 것 같다ㅠ
◼︎ 어려웠던 점 & 해결못한 것들
오늘은 크게 해결하지 못한 부분은 없었던 것 같다. 그냥 오늘 배운 애니메이션도 그렇고... 그 전에 배운 내용들도 그렇고... 기능은 넘나 많고 내 머리는 나빠서 다 기억하기 힘들뿐^_ㅠ 찐개발자분들은 웬만한건 다 외워서 사용하시겠지? 나는 매번 구글링하기 바쁘다. 많이 해보다보면 기억에 남아서 구글링을 최소화하게 되기를 바랄뿐!◼︎ 해결방법
공부에 지름길은 없따...⭐︎☆ 연습과 반복만이 살 길!◼︎ 소감
CSS를 통한 애니메이션은 처음 접해봤는데, 생각보다 단순하고 많은 기능들이 있어서 놀랐다. 자바 GUI보다 오히려 사용하기 쉬운 것 같기도 하고...?
+) 여담으로, 과제 제출할 때 깃허브에 실습으로 진행한 코드를 올려야하는데, 깃허브 인터페이스는 봐도 봐도 참 구리다. 익숙해지지 않고 괜히 복잡하기만 함ㅠㅠ 나만 그런가
아무튼 그래서 나는 쉘을 사용하는게 더 편하다. 42서울에서 건진 것이 있다가 그거 딱 하나...와 소중한 내 인연들♡
그런데 어제 ssh로 깃 커밋/푸쉬를 하다 보니 .gitignore 사용법이 생각이 안나서 한참 헤맸다. .DS_Store이 같이 커밋되는게 너무너무 짜증났음ㅠㅠ 결국 해결하긴 했지만 과제 하나 올리는데 커밋만 14번을 했다
오늘은 한번에 올릴 수 있기를!