0527 개발일지

학습한 내용

CSS 애니메이션 실습

• transform: 오브젝트의 회전, 이동, 크기 등의 변형을 주는 속성.
  rotate: 2차원적인 회전 효과. 양수는 오른쪽으로, 음수는 왼쪽으로 회전.
  scale: 오브젝트의 크기를 작성한 비율로 키움. 차례로 x축, y축 배율.
  skew: 3차원적인 회전 효과. 차례로 x축 회전, y축 회전 각도.
  translate: 오브젝트의 위치를 이동. 차례로 x축, y축 이동 순서. 레이아웃 배치작업에 사용하기도 한다.
  ※ 하위 버전 브라우저와의 호환성을 위해서는 아래와 같은 형태로 속성 앞에 프리픽스(prefix)를 작성해줘야한다.

    -webkit-transform: rotate(10deg); /* 크롬, 사파리 */
    -moz-transform: rotate(10deg); /* 파이어폭스 */
    -ms-transform: rotate(10deg); /* 익스플로러 */
    -o-transform: rotate(10deg); /* 오페라 */
    transform: rotate(10deg);

• transition: 자연스러운 애니메이션 효과를 주기 위한 속성. 변화하는 과정을 조절할 수 있다.
  property: 변화를 주고자하는 영역, 속성을 지정함.
  duration: 애니메이션이 진행되는 시간. 1000ms = 1s
  timing-fuction: 애니메이션이 진행되는 속도의 성격. linear는 일정한 속도를 유지하는 속성값.
  delay: 애니메이션이 시작되기까지 지연되는 시간.
  ※ 각 속성은 transition 속성 안에 속성값을 한번에 작성해줘도 된다. 작성하는 순서는 상관없지만 숫자는 무조건 먼저 나온 게 duration, 다음에 나온 게 delay로 정해진다. 숫자값을 하나만 입력했을 경우 duration으로 인식한다.

• animation: 지정하는 액션 없이 애니메이션을 적용하고 싶을 때 사용하는 속성. @keyframes를 연동해서 애니메이션이 발동하는 형태를 입력해줄 수 있다.

  name: 애니메이션의 이름을 지정하는 속성. 키프레임과 연동할 때 사용한다.
  duration: 애니메이션이 진행되는 시간.
  delay: 애니메이션이 시작되기까지 지연되는 시간.
  interaction-count: 애니메이션의 진행 횟수. infinite를 작성하면 무한으로 움직인다.
  direction: 애니메이션의 진행 방향. alternate는 왕복 효과를 주며, 왕복하는 것이 2회로 적용되기 때문에 interaction-count의 횟수를 지정할 때는 신경써야한다.
  ※ transition과 마찬가지로 animation 안에 한번에 속성값을 입력하는 게 가능하다.

  .animation {
    width: 300px;
    height: 300px;
    background-color: yellow;
    
    animation: changewidth 3s linear 1s infinite alternate;
  }
  
  @keyframes changewidth {
    0% {
      width: 300px;
      height: 300px;
      background-color: yellow;
    }
  
    50% {
      background-color: blue;
    }
  
    0% {
      width: 600px;
      height: 600px;
      background-color: red;
      border: solid 10px blue;
    }
  }

  위와 같은 형태로 작성해줄 수 있다.
  from - to와 같은 형태로 시작과 끝만 지정해줄 수도 있고, %값을 지정해서 세세한 변화과정을 설정해줄 수도 있다.
  ※ transition과 마찬가지로 하위 버전 브라우저와 호환하기 위해서는 프리픽스를 넣어줘야한다. @와 keyframes 사이에 적어주면 된다.

CSS 애니메이션을 만들 때 도움이 되는 사이트 > stylie http://jeremyckahn.github.io/stylie/
선에 따라 움직이는 오브젝트를 만들 때 유용.

학습한 내용 중 어려웠던 점 또는 해결못한 것들

애니메이션을 만드는 여러가지 방법을 한번에 배워서 조금 헷갈린다. 레이아웃을 배울 때와 마찬가지로 어떤 상황에서 어떤 애니메이션 속성을 사용하는 게 좋은지, 어떻게 해야 원하는 형태의 애니메이션을 만들 수 있을지 파악하기가 어렵다.

해결방법 작성

이전과 같이 강의 영상을 자주 복습하고, 무엇보다 실제로 애니메이션 효과들을 따라서 만들어보면서 감각을 익혀야할 것 같아.

학습 소감

움직이는 효과를 배우니까 확실히 더 재미있다. 간단한 움직임이 대부분이지만, 그걸 활용해서 만들 수 있는 애니메이션들이 다양한 것 같아서 더 흥미롭다. 원래 css를 이용해 애니메이션 효과를 만드는 동영상을 무작정 보곤 했었는데, 앞으로 그런 영상을 볼 때 이 사람이 왜 이런 속성을 썼는지 조금이나마 더 이해할 수 있게 될 것 같다.
배우는 내용들이 머리에 쌓여가는 것 같기는 한데, 정리가 잘 안 되는 것 같아서 배운 내용들을 한꺼번에 정리해둘 수 있는 방법을 고민하게된다.