이미지 갯수를 줄여 웹페이지의 로딩을 빠르게 하는데 목적이 있습니다.
일반적으로는 아이콘, 버튼등을 각각의 이미지 파일로 저장하지만,
background sprites 기법은 아이콘, 버튼등을 일정 간격을 두고 한개의 이미지 파일로 만들어 사용합니다.
(위이미지 참조)
그렇다면 저 이미지를 어떻게 사용할까요?
<img> 태그를 사용하지 않고 의미에 맞는 태그를 사용하여 뭉쳐진 이미지를 백그라운드로 설정하여
background-position 만으로 출력될 위치만 잡아줍니다.
사용은 쉽지만, 손이 많이 가는게 단점입니다. ^^;
아이콘+텍스트으로 된 버튼을 만들고자 할때 아래와 같은 방식을 쓰거나 통이미지를 사용할것입니다.
<a><img alt='musictrot'>musictrot</a>
<a><img alt='sir'>musictrot</a>
위의 소스를 background sprites 기법으로 바꾼다면, 아래와 같이 되겠습니다.
background sprites 기법 설명에 불필요한 소스는 제거했습니다.
<style>
a {float:left; background:url('이미지주소');}
a.btn_musictrot {padding-left:아이콘넓이; width:버튼넓이; height:버튼높이; background-position:x좌표 y좌표;}
a.btn_sir {padding-left:아이콘넓이; width:버튼넓이; height:버튼높이; background-position:x좌표 y좌표;}
</style>
<a class='btn_musictrot'>musictrot</a>
<a class='btn_sir'>sir</a>
이해가 되셨나요?
|
추천 : 