다음 카카오 지도 

카테고리검색 버튼을 보면 

https://apis.map.kakao.com/web/sample/categoryFromBounds/

하나의 png 파일에 

은행 마트 약국 주유소,,,등등 각각 6개의 아이콘 그림이 있고 마우스 호버되었을 때 나타나는 이미지를 포함하면 12개의 이미지가 나타납니다, 

css를 보면 

#category li .category_bg {background:url(https://t1.daumcdn.net/localimg/localimages/07/mapapidoc/places_category.png) no-repeat;}
#category li .bank {background-position: -10px 0;}
#category li .mart {background-position: -10px -36px;}
#category li .pharmacy {background-position: -10px -72px;}
#category li .oil {background-position: -10px -108px;}
#category li .cafe {background-position: -10px -144px;}
#category li .store {background-position: -10px -180px;}
#category li.on .category_bg {background-position-x:-46px;}

이렇게 되어 있고

html코드는

<div class="map_wrap">
    <div id="map" style="width:100%;height:100%;position:relative;overflow:hidden;"></div>
    <ul id="category">
        <li id="BK9" data-order="0"> 
            <span class="category_bg bank"></span>
            은행
        </li>       
        <li id="MT1" data-order="1"> 
            <span class="category_bg mart"></span>
            마트
        </li>  
        <li id="PM9" data-order="2"> 
            <span class="category_bg pharmacy"></span>
            약국
        </li>  
        <li id="OL7" data-order="3"> 
            <span class="category_bg oil"></span>
            주유소
        </li>  
        <li id="CE7" data-order="4"> 
            <span class="category_bg cafe"></span>
            카페
        </li>  
        <li id="CS2" data-order="5"> 
            <span class="category_bg store"></span>
            편의점
        </li>      
    </ul>
</div>

이렇게만 되어 있습니다.

즉 li 코드 백그라운드 이미지로 css에서 위의 12개 아이콘이 하나의 파일에 있는 그림 각각을 쓰고 있다는 얘기인데,,,

제가 png파일에 대해서 잘 몰라서 그러는데

png파일은 하나의 이미지가 아닌 내부 이미지를 세트로 활용할 수 있는 이미지인가요?

png 내부에 설정된 각각의 아이디를 보려면 어떻게 보나요?