HTML5 & CSS3 - 이미지 스프라이트 기법

이미지 스프라이트(Image Sprite)란? - 배경이미지를 적용할 경우 각각의 요소에 들어가는 배경이미지를 낱개로 만들지 않고 비슷한 성격의 배경 이미지를 하나의 파일로 제작 후에 background-position을 이용하여 배경이미지를 배치하는 방법 - 이미지가 많은 웹 페이지는 여러 서버 요청을 로드하고 생성하는 데 시간이 오래 걸릴 수 있습니다. 이미지 스프라이트를 사용하면 서버 요청 수가 감소하고 대역폭이 절약됩니다. 네이버의 경우에 메인화면에서 다음과 같은 Image Sprite를 사용하고 있고, 다음의 경우에는 다음과 같은 Image Sprite를 사용하고 있답니다. (여러개로 쪼개져 있는데 그 중 하나에요^^) 전 메뉴바를 이미지 스프라이트를 이용해서 만들어 보겠습니다. 기본 상태와..

원문링크 : HTML5 & CSS3 - 이미지 스프라이트 기법