이미지 스프라이트

이미지 스프라이트 란?

스프라이트(Sprite)이란 컴퓨터 그래픽스에서 작은 2차원 비트맵이나 애니메이션을 합성하는 기술을 의미한다고 한다.
웹의 경우에서는 여러 개의 이미지를 하나의 이미지로 만들어 놓는 것"을 의미"한다 아래는 예시입니다.

장점	단점
이미지 로딩 속도 향상(최적화)된다.	상황에 따라 유지보수가 어려울 수 있다.
HTML 마크업이 간결해지고 스크린 리더의 탐색 속도가 향상된다.	데이터 관리에 문제가 생기면 이미지의 로딩이 불가능하다.
하나의 파일만 관리하면 된다.	-

이미지 스프라이트 사용하는 법

//사용하는 html
<a href="#" class="link"> <span class="ir">링크 </span> </a>

    /* ir 효과 */
   .ir {
       display: block;
       overflow: hidden;
       font-size: 0;
       line-height: 0;
       text-indent: -9999px; /* 글씨를 안보이게 해준다. */
   }
   /* 링크에 넣을 효과들이다. */
   .img__sns a {
       width: 36px;
       height: 36px;
       background: #fff;
       border-radius: 50%;
       display: block;
       margin-bottom: 5px;
       background: url(img/image_bg03_icon.svg) no-repeat  ; /* 스프라이트한 이미지를 가져온다. */
   }
   /* 이미지 위치를 조정해준다 */
   .img__sns a:nth-child(1) {}
   .img__sns a:nth-child(2) { 
       background-position: -50px 0; /*  이렇게 위치를 정해줘야 정확한 이미지가 나온다. */
   }
   .img__sns a:nth-child(3) {
       background-position: -100px 0;
   }
   .img__sns a:nth-child(4) {
       background-position: -150px 0;
   }
   .img__sns a:nth-child(5) {
       background-position: -200px 0;
   }
       

ir 효과란?

웹접근성은 몸이 불편한 사람이라도 정보를 이용하는데 불편함이 없도록 하는것이 목적에 있기 때문에 만약 시각 장애인이 사이트를 이용할 경우 텍스트는 리더기로 읽어줄 수 있지만 이미지는 읽을 수가 없습니다 그래서 이미지에 텍스트를 붙여줍니다. 또한 css가 동작하지 않는 환경에서도 어떤 내용인지 파악이 가능해야 하기 때문에 백그라운드로 넣어주는 이미지라고 할지라도 텍스트를 써주는 것이 좋습니다.

이미지 백그라운드란?

background에 url을 넣어 이미지 링크를 걸어 이미지를 불러올 수 있는 방법입니다. img 태그에서도 이미지를 불러올 수는 있지만 위와 같이 아이콘을 불러올때는 백그라운드에서 불러오는 것이 가장 좋습니다.

//사용법
background: url(img/img_good.svg) no-repeat ;