사진속 많은로고중 일부가져오기

예시) 카카오뱅크 로고이미지

<img src="https://www.kakaobank.com/static/images/web/img_kabang_220615.png" alt="">

<span class="ico ico-1"></span>
<span class="ico ico-2"></span>

가져오고싶은 로고 span으로 담는다

.ico{
	background-color: white;
    width: 24px;
    height: 24px;
    display: block;
    background-image:url(https://www.kakaobank.com/static/images/web/img_kabang_220615.png");
}

.ico-1 {
	background-position: -341px -292px;
}

.ico-2 {
	background-position: -371px -292px;
}

background-color를 로고를 붙여야하는 배경색으로 맞춘다음,

width,height를 로고크기로 맞추고,

background-image로 배경사진 설정후,

background-position으로 픽셀좌표맞춰서 로고위치로 가져가서 사용한다

*사이트 접속할때 이미지가 하나하나가 아닌, 한번에

뜰수있도록하는 장치라고함