IR(Image Replacement)기법

• 의미가 포함되어 있는 이미지를 배경으로 처리하고 대체 텍스트를 넣는 방법으로써 시각이 있는 사용자는 이미지로 처리된 화면을 볼 수 있지만 '화면 낭독기를 사용하는 시각 장애인, CSS 제거, 인쇄' 시에는 텍스트 데이터에 접근하거나 텍스트를 볼 수 있는 형태로 설계하는 기법

• img 태그의 alt 속성과 같으나, 접근성을 더 높이고, 백그라운드 이미지로 넣을 경우의 한계를 해결하기 위해 사용

IS(Image Spriting)기법

• 조각난 이미지 파일들을 하나의 파일로 병합 후 배경으로 처리해서 웹 문서 전송 속도를 높이는 기법
  (의미가 있는 이미지는 전경에 상응하는 텍스트를 포함시켜서 접근성을 확보해야 하기 때문에 IR(Image Replacement) 기법이 함께 사용)

/*html*/
<div class="set-area">
     <a href="" class="btn-set ic-list"><span class="blind">리스트형</span></a>
     <a href="" class="btn-set ic-thumb"><span class="blind">갤러리형</span></a>
     <a href="" class="btn-set ic-set"><span class="blind">뉴스설정</span></a>

/*css(ir기법)*/
.blind{
    position: absolute;   
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0,0,0,0);
    margin: -1px;
}

/*css(is기법)*/
.sc-news .group-title .set-area .btn-set::after{
  	background-image: url(../images/sp-bg.png);
    background-size: 442px;
    background-repeat: no-repeat;
}

.sc-news .group-title .set-area .ic-list::after{
    display: inline-block;
    width: 14px;
    height: 13px;
    background-position: -244px -310px;
    vertical-align: top;
    content: '';
}
.sc-news .group-title .set-area .ic-thumb::after{
    display: inline-block;
    width: 13px;
    height: 13px;
    background-position: -276px -310px;
    vertical-align: top;
    content: '';
}
.sc-news .group-title .set-area .ic-set::after{
    display: inline-block;
    width: 15px;
    height: 15px;
    background-position: -102px -386px;
    vertical-align: top;
    margin: -1px 0 1px;
    content: '';
}