CSS 이미지 스프라이트와 IR(Image Replacement)효과

이미지 스프라이트

이미지 스프라이트 기법이란 여러개의 이미지를 따로 두고 코딩하는게 아니라 하나의 png 파일에 모아서 코딩하는 방식이다.

ex)

여러 이미지파일을 일일히 부르는것이 아니라, 한 이미지 파일로 통합한 후 Background로 Position을 잡아주어 한 이 미지만 로드되게 함으로서 트래픽을 절약하고 HTTP 요청횟수를 줄여 빠른 웹 브라우징을 가능하게 해준다.
이미지 각각을 별도의 파일로 추가하는 대신, 이미지를 하나의 파일로 만들어서 포함하면 HTTP 요청 수가 줄기 때문에 메모리와 네트워크 사용량 측면에서 효율적, 이미지 수정이나 관리가 간편하다
BUT, 웹 접근성을 준수하기 위해서 IR효과를 설정해야 함

IR효과

IR 기법은 이미지 대체 텍스트를 제공하기 위한 CSS 기법으로 다양한 CSS기법을 사용하여 이미지 대체 텍스트를 제공할 수 있다

 

Phark Method

 : 의미있는 이미지의 대체 텍스트를 제공하는 경우(image off 시 텍스트 안보임)

.ir_pm {
   display: block;
   overflow: hidden;
   font-size: 0;
   line-height: 0;
   text-indent: -9999px;
}
WA IR 

 : 의미있는 이미지의 대체 텍스트로 이미지가 없어도 대체 텍스트를 보여주고자 할 때(image off 해도 텍스트 보임)

  *이미지로 대체할 엘리먼트에 배경이미지를 설정하고 글자는 span태그로 감싼후 z-index=-1로 화면에 안보이게 처리

.ir_wa {
   display: block;
   overflow: hidden;
   position: relative;
   z-index: -1;
   width: 100%;
   height: 100%;
}

대체 텍스트가 아닌 접근성을 위한 숨김 텍스트를 제공할 때

.ir_su {
   overflow: hidden;
   position: absolute;
   width: 0;
   height: 0;
   line-height: 0;
   text-indent: -9999px;
}