CSS의 background 속성을 통한 반응형 스프라이트 애니메이션 구현

CSS를 통해 스프라이트 애니메이션을 구현하고 싶을때 주로 background 속성을 사용하게 된다.

그런데 지금까지 반응형 스프라이트 애니메이션을 본적이 없어서 한번 codepen에서 찾아보게 되었다.

그곳에는 여러가지 방법이 있었는데, 그중 가장 좋은 방법인 것을 찾아 애니메이션을 구현해 보았다.

예제는 아래 링크를 참고하면 된다.

http://codepen.io/tombennet/pen/OPombY

구현하면서 정말 확실히 알아야 했던것은 바로 background 속성의 개념이다.

특히나 background-size에 관한 속성이 있는데,

본 속성을 제대로 설정해놓고 시작해야 스프라이트 애니메이션을 구현 가능하다.

먼저 반응형은 창에 크기에 따라 반응해야 하니까 % 속성을 사용해야 한다.

여기서 우리는 background-size: 100%; 과 background-size: 100% 100%; 의 차이를 알아야 한다.

전자는 가로를 100%에 맞춰주고 세로 길이는 이미지 비율이 깨지지 않게 맞춰준다.

후자는 가로나 세로 둘다 100%에 맞춰줌으로 본래 이미지 비율이 깨지게 된다.

스프라이트 이미지가 세로이면 사용할 수 있겠지만 만약 가로라면 우리는

background-size: auto 100%에 맞춰주고 사용해야 한다.

그래야 세로를 100%에 맞춰주고 가로 길이는 이미지 비율이 깨지지 않게 맞춰준다.

이렇게 설정을 해주고 반응형을 위해 animation 및 step 속성을 사용해 준다.

본 속성에 대해서는 인터넷에서 잘 나와있기에 자세한 설명은 생략한다.

(하나 주의해야 할것은 스프라이트 애니메이션이 10개로 나누어져 있을때 실제 step 값은 9로 해줘야 한다.

9개로 나누어야 총 10개가 되기 때문이다.)

그다음에 중요한것이 해당 div의 width 속성과 padding-top 속성이다.

본 속성을 통해 우리는 스프라이트의 실질적인 가로 세로 %값을 정해주게 된다.

여기서 가로 세로 비율을 잘못 정해주게 된다면 스프라이트 애니메이션을 실패하게 된다.

먼저 padding-top의 값을 통해 세로의 비율을 먼저 정해주고,

그 값을 기준으로 가로 길이의 값을 조절해주면 된다.

예를들어 가로의 길이가 1500px의 세로의 길이가 400px 이고 이미지가 10개로 이루어진 스프라이트 애니메이션이 있다고 치면,

세로길이를 40%의 비율로 하고 싶다고 가정하자 그럼

400x = 40 -> x = 0.1 이 되고 이것을 1500을 10으로 나눈 150에 곱하게 된다.

그러면 가로의 비율은 15%가 나온다.

최종적으로 padding-top: 40%; width: 15%;로 해주면 정상적인 스프라이트 애니메이션이 나오게 된다.