[Style] 빠른 이미지 변경

빠른 이미지 변경

---

input { background-image: url('images/text.png') } input:focus { background-image: url('images/text-focus.png') } 

엘리먼트의 상태가 바뀔때마다 다른 이미지를 로딩하고 싶을 경우가 있습니다. 위의 코드를 보면 포커스가 되었을 때 기존의 배경 이미지인 text.png파일을 text-focus.png파일로 바꾸어주는 것을 알 수 있습니다. 그런데 이렇게 파일을 따로따로 로딩하는 방식을 이용하는 것보다 한 이미지 파일에 두 이미지를 넣어놓고 background-position같은 속성을 이용하는 것이 더 빠릅니다.

.sprite { background-image: url(sprite.png); background-repeat:no-repeat; } .sprite.text { background-position:0px 0px; } .sprite.text:focus { background-position:0px -40px; } 

위의 코드의 경우가 그러한 방법을 적용한 예라고 볼 수 있습니다. background-image에 변이될 이미지 2개를 넣어놓고 상태가 바뀔때마다 background-position속성을 바꾸는 것을 알 수 있습니다. 이 방법은 사실 옛날 2D게임에서 스프라이트를 이용하는 방식과 메우 비슷하다고 볼 수 있습니다.