개발일지_0527

학습한 내용
오늘은 css에 애니메이션 효과를 넣는 법에 대해 배웠다. 먼저 transform에 대한 속성을 배웠는데, 트랜스폼에서 오늘 적용한 속성으로는 rotate, scale, skew, translate가 있다. 로테이트는 2차원적인 회전, 스케일은 선택영역을 비율로서 확장 또는 축소하는 것, 스튜는 3차원적인 회전, 트랜스 네이트는 선택한 영역의 위치를 변경하는 것을 뜻한다. 트랜스폼 사용 시 주의점은 지원하지 않는 브라우저 버전이 있기 때문에 w3schools.com에서 이를 확인하고 프리픽스로 값을 적용해 줘야 하는 것이다.
다음으로 transition이라는 속성에 대해 배웠다. 트랜지션으로 변화하는 과정을 보일 때 사용하는 속성인데 트랜지션으로 이전에 배운 가상 선택자 hover를 활용하여 마우스를 클릭했을 때 늘어나게 만들어 보았다. 트랜지션에 높이와 너비를 설정하고 transition-property를 입력하여 변화를 주려는 값을 입력하고 transition-duration으로 변화하는 속도를 정한다. 그리고 transition-timing-funtion을 통해 애니메이션이 이동하는 속도에 성격 값을 정할 수 있다. 마지막으로 transition-delay를 넣는다. 딜레이는 마우스를 올린 뒤에 설정한 딜레이 시간만큼 지연되었다가 애니메이션이 실행되는 것이다. 이들은 마진과 패딩처럼 트랜지션으로 한 줄에 작성이 가능하다. 주의할 점은 다른 순서는 관계없으나 먼저 적힌 숫자가 duration이고 마지막 숫자가 delay에 해당한다는 것이다.
그다음으로 애니메이션을 배웠다. 우선 만들고자 하는 애니메이션의 name을 정하고, 애니메이션이 전체 동작하는 시간을 animation-duration으로 적는다. 그리고 애니메이션의 timing funtion과 애니메이션 delay를 설정한다. 여기에 애니메이션에만 있는 추가적인 속성으로 애니메이션 interation-count와 direction을 적어준다. 애니메이션 속성을 활용하려면 @keyframes라는 속성을 함께 활용해야 한다. 키 프레임 옆에는 애니메이션 네임을 적고 속성값으로 from과 to, 혹은 0%와 100%로 각각의 크기와 색상을 지정할 수 있다.
이를 바탕으로 실습을 했는데, 먼저 키즈가오 사이트에서의 애니메이션 효과를 재현해보고 또한 메뉴 버튼에 애니메이션 효과를 넣는 실습과 박스가 움직이는 애니메이션 효과도 재현해보고 회전 효과를 활용한 실습을 하고 슈퍼마리오 동전이 올라가는 효과를 만들어보았다. 마지막으로 이미지 안에 hover라는 가상 선택자를 활용하여 마우스를 올렸을 때 이미지가 확대되고 글자가 나타났다가 사라지는 효과를 넣어 보았다.

학습내용 중 어려웠던 점
애니메이션 효과에 활용되는 여러 속성을 적용해 보는 것이 재미있었다. 오늘도 마찬가지로 작은 실수로 인해 간혹 결과가 틀어지는 일이 있었지만, 수정하면서 계속 시도해 보았다. html과 css를 연동시키는 것을 넘어 둘을 구분하면서 작성하는 것이 실제로 실습을 할 때는 쉽지 않게 느껴졌다. 특히나 class 별명을 활용한 채로 css에 적는 순서를 익히는 것이 어려웠다.

해결 방법
순서를 뒤로 돌려가면서 실수를 확인하는 것이 가장 빠른 해결이었다. 같은 화면에 강의를 들으면 실습으로 적용까지 하려니 화면이 부족했지만 내용을 익히는 것에 더욱 중점을 두고 살펴보았다.

학습 소감
css를 이용해서 애니메이션 효과를 내니 동적으로 페이지 상에 바로 표현되어서 재미있었다. 단순하게 색과 위치만 지정하는 것이 아니라 박스 안에 있는 내용을 자유자재로 옮겨 다니도록 이용할 수 있는 사이트도 알게 되었다. 물론 강의 내용을 따라 하는 것과 실제로 스스로 만들어내는 데에는 많은 시간이 필요하겠지만, 반복 학습으로 어느 정도 극복할 수 있을 거라 생각한다.