[css] 스프라이트 이미지

 

네이버 스프라이트 이미지

---

service_icon

#header .header_inner .shortcut_list .service_icon::before {
    content: "";
    display: block;
    position: absolute;
    top: -2px;
    left: -3px;
    background-image: url(https://pm.pstatic.net/resources/asset/sp_main.2b96eea2.png);
    background-size: 434px 414px;
    background-position: 0px -128px;
    background-repeat: no-repeat;
    width: 54px;
    height: 54px
}

---

link_pay

#header .header_inner .pay_area .link_pay::after {
    content: "";
    display: block;
    background-image: url(https://pm.pstatic.net/resources/asset/sp_main.2b96eea2.png);
    background-size: 434px 414px;
    background-position: -295px -177px;
    background-repeat: no-repeat;
    width: 32px;
    height: 32px;
    position: relative
}

---

참조 : http://www.spritecow.com/ [ 만들어진 sprite 이미지의 각 영역을 자동으로 css 코드로 만들어주는 사이트 ]

참조 : https://www.toptal.com/developers/css/sprite-generator [ 각각의 이미지를 합쳐 주는 사이트 ]