[정리] 스프라이트 이미지(Sprite Image) 사용하기

  인터넷 서핑을 하다보면 간혹 어떤 사이트에서는 이미지가 한 번에 열리지 않고 제 각각 따로  시간을 두고 열리게 되는 불편한 현상을 겪으신 경험이 있으실 겁니다.  이런 부분을 방지 하기 위해서 이미지를  한 번에 모아두고 찾아서 사용하게끔 만들어 놓은 것을 스프라이트 이미지(Sprite Image)라고 합니다. 

 

참고 > 네이버 홈페이지 스프라이트 이미지(Sprite Image)

이런 현상의 주 원인은 아무래도 할당된 traffic(데이터의 양)을 초과해서 그렇지 않나 싶은데요. 그렇기 때문에 이용자가 많은 사이트에서는 저렇게 이미지를 모아 놓은 방식을 활용하여 용량을 줄이는 것으로 알고 있습니다. 저는 사이트 클론 코딩을 연습 할 때 너무 유용하게 잘 쓰고 있네요.

 

사용 방법은 
1. 크롬에서 f12를 눌러 사이트 개발자 도구를 연다

2. 해당되는 이미지를 shift+ctrl+c를 누른 후 클릭한다. 

3. 우측에 해당되는 클래스에서 backgound-position의 x축과 y축의 좌표를 확인한 후 내 작업환경에 그대로 기입해준다(또는 복사 붙여넣기)

4. 가끔 이렇게 해도 잘 안되는 경우가 있을 텐데, backgound-position과 같이 쓰인 속성들을 전부 같이 긁어와서 복사 한 후 일일이 확인한다 끝.  

 

 

스프라이트 이미지 활용하기 > 네이버

See the Pen bGwgaVo by issue72y (@issue72y) on CodePen.