IS기법

IS기법

IS (Image Sprite), 이미지 스프라이트 기법
여러개의 이미지를 하나의 이미지로 병합하여 사용하는 기법으로
한 개의 이미지 파일만 가져오면 되어 로딩 시간이 줄어드는 장점이 있다.

CSS에서 background-image 로 병합된 이미지를 가져오고 background-position 으로 위치 좌표를 지정해 원하는 이미지를 보여지게 할 수 있다.

✍️ css

.icon {
	background-image: url('이미지 주소');
    background-repeat: no-repeat;
    width: 20px;
    height: 20px;
    display: inline-block;
    
 }
 .ic-1 {
 	background-position: 0 0;
 }
 .ic-2 {
 	background-position: -50px 0;
 }
 .ic-3 {
 	background-position: -100px 0;
 }

❗️Tip

• 공통클래스로 이미지를 불러와 개별클래스로 위치 좌표를 다르게 설정하면 여러개의 아이콘을 효율적으로 가져올 수 있다. (코드의 양이 줄어드는 장점)