[CSS 개념정리] 이미지 스프라이트 기법

참고) 제주코딩베이스캠프 유튜브 / 

https://m.blog.naver.com/PostView.naver?isHttpsRedirect=true&blogId=goodleedw&logNo=221470292886 블로그

 

 

개념

개념 : 

자주쓰는 이미지들을 쓸때마다 여러 이미지들을 불러 오는 것이 아니라, 하나의 이미지 파일로 통합한 후 배경 이미지로 만든 후, position(좌표) 값으로 각각의 이미지를 불러우는 방법 

사용이유 : 

이미지 태그의 개수를 줄이기 위해 사용 (이미지 태그가 많을 수록 웹페이지 로딩속도 느림

스프라이트 이미지 만들어주는 사이트

Toptal : https://www.toptal.com/developers/css/sprite-generator/

=> 스프라이트 이미지 생성, 적용할 좌표값도 알려준다! 

CSS Sprites Generator

 

 

 

예시1) 사이트에서 제시해준 좌표값으로 아이콘 적용하기 

=> 각 아이콘이 어떤 좌표값을 가지고 있는지를 통해, 해당 아이콘만 보이도록 설정할 수 있다. 

.link_facebook {
	background : ulr("images/icon.asd") -10px -10px
}
.link_insta {
	background : ulr("images/icon.asd") -54px -10px
}

 

 

예시2 ) background-position을 이용해서, hover될 경우 다른 img 사용하기 

=> 깃허브 아이콘은 background-posiotion : left top 

=> hover되면 backgroundd-position-y : bottom 으로 변경하면 다른 이미지를 사용한 것처럼 나타낼 수 있다. 

 

<a href="" class="icon github">Github</a>
<a href="" class="icon facebook">Facebook</a>
<a href="" class="icon email">Contact</a>

.icon{
    /* 이미지 스프라이트 기법 */
    width: 48px;
    height: 48px;
    display: inline-block;
    background-image: url(images/icons.png);
    text-indent: -9999px;  /* 텍스트가 들어있을 경우 없애기 */
}
/*github 사진은 왼쪽 위*/
.icon.github{
    background-position: left top;
}
/*hover될 경우 아래 사진 사용*/
.icon:hover{
    background-position-y: bottom ;
}