클라이언트/ 서버/ 엔지니어 "게임 개발자"를 향한 매일의 공부일지

앞에서 배운 CSS 트랜지션을 잘 활용해도 부드러운 애니메이션 효과를 만들 수 있었지만 CSS3의 animation 속성을 이용하면 트랜지션보다 더 쉽게 애니메이션을 만들 수 있다. CSS 애니메이션에서 사용하는 속성CSS3의 animation 속성을 사용하면 자바스크립트를 사용하지 않고도 웹 요소에 애니메이션을 추가할 수 있다. animation 속성은 특정 지점에서 스타일을 바꾸면서 애니메이션을 만드는데, 이렇게 애니메이션 중간에 스타일이 바뀌는 지점을 키프레임이라고 한다. 키프레임은 @keyframes 속성으로 정의하고, animaiton 속성과 그 하위 속성을 이용하여 애니메이션의 실행 시간이나 반복 여부 등을 지정한다. 아래 표는 animation 관련 속성을 정리한 것이다. 1. 애니메이션의 ..

이제 3주 차 학습을 마무리하는 시간을 갖기로 했다.    3장을 닫으며              학습을 마치고이제 수학 공부를 한 후 아침 운동을 해 볼 것이다. 어제는 운동 시간이 많이 늦어졌지만 오늘은 가능하면 빠르게 운동을 마치고 아침 요가도 할 수 있으면 해 볼 것이다. 이번주부터 걷기와 달리기 운동뿐 아니라 요가와 근육 운동도 추가해 보기로 했다.공부를 다 마치고 나니 정말 기쁘다! 어제 저녁에는 과연 내일 공부를 할 수 있을까 걱정이었는데 말이다. 역시 난 새벽형 인간인가 보다.

애니메이션 구현 실습을 이어서 진행해 보겠다.     실습 5 - 메뉴 영역 애니메이션 구현하기   html 파일    css 파일 코드가 정말 길다.     처음 실행 화면은 이렇게 되어 있는데 여기서 메뉴에 마우스를 올리면 폰트 색깔이 변경되도록 코드를 수정할 것이다.   코드 수정하기  마우스를 올렸을 때 메뉴의 글씨 색깔이 검은색에서 약간 붉은 계열로 변경되었다.    auto를 지우면 왼쪽으로 마진이 없도록 지정된다.   채점도 잘 되었다.     실습 6 - 본문 영역 애니메이션 구현하기    이번에는 마우스를 올렸을 때 배경색과 이미지의 크기가 달라지는 효과를 적용해 볼 것이다. 제공된 코드는 이전과 같으니 따로 캡처하지는 않았다.   1. 배경색 바꾸는 코드 추가하기    마우스를 올리니 ..

애니메이션 효과를 좀더 자세히 살펴보기로 하자.    이론 1 - 애니메이션 응용  애니메이션도 한 줄로 작성이 가능하다. 앞에 나오는 것이 duration인데 1000ms는 1초를 의미한다. 따라서 1500ms는 1.5초가 된다. infinite는 애니메이션을 무한으로 반복하는 것이다.    애니메이션도 prefix를 달 수 있다. 이것을 사용할 때는 키프레임과 쌍을 이루어 작성해야 한다. 없으면 없는 것끼리, 있으면 있는 것끼리 작성해야 한다. transform을 사용할 때도 webkit을 꼭 써주어야 한다.       마우스를 올렸을 때 1초동안 색깔이 변하는 설정이다.       all은 img에 적용하는 모든 속성에 영향을 주겠다는 의미이다. 마우스를 올렸을 때 크기를 확대하는 기능도 추가했다...

이제 애니메이션에 대해서 공부해 볼 것이다. 이전 단원에서는 transform과 transition에 대해서 배웠다. 이 둘은 어떤 조건이 있을 때 적용하는 것이고, 애니메이션은 조건과 관계없이 사용하는 것으로 웹 사이트에 접속하자마자 애니메이션 효과가 나타난다.   이론 3 - Animation  changeWidth는 개발자가 임의로 작성한 내용물로 원하는 속성값으로 바꿀 수 있다. interation을 6회로 주었다. 애니메이션 진행방향은 direction으로 사용하는데, normal은 시작에서 끝으로 가는 것이고, reverse는 끝에서 시작으로 가는 것이다. alternate는 시작과 끝 방향이 반복되는 것이다.@keyframs에는 이러한 변화를 줄 이름을 작성해 준다. 위에는 조건이고 아래를 ..