IS(Imgae Sprite)기법

이미지들을 하나의 이미지 파일로 병합하여 이미지 로딩의 부담을 줄이는 기법입니다.

네이버를 보게 되면 이미지들을 하나로 모아놓은 하나의 이미지를 아이콘과 버튼등에 사용하고 있는 것을 확인 할 수 있습니다.

예시의 소스를 확인하면 하나의 이미지만을 사용해서 좌표만 다르게 잡아주는 방식으로 사용되는 것을 알 수 있습니다.

<style>
.header .group-nav [class*="ic-"]::after{
    display: block;
    position: relative;
    background-image: url('./images/main-icon.png');
    margin: 0 auto;
    width: 44px;
    height: 44px;
    content: '';
}

.header .group-nav .ic-mail::after{
    background-position: -250px -90px;
}
.header .group-nav .ic-cafe::after{
    background-position: -250px 0;
}
.header .group-nav .ic-blog::after{
    background-position: -201px -98px;
}
.header .group-nav .ic-shop::after{
    background-position: -90px -209px;
}
</style>

IR(Image Replacement)기법

이미지에 적절한 대체 텍스트를 제공해주는 것으로 이미지를 볼 수 없는 사용자를 위해서 뿐만 아니라 검색엔진의 효과적인 정보수집을 위해서도 필요하다.

예시처럼 숨기고 싶은 텍스트에 blind 클래스를 주고 css로 텍스트를 보이지 않게 만든다.

<span class="blind">검색창</span>

<style>
.blind{
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0,0,0,0);
    margin: -1px;
}
</style>

position:absolute는 텍스트가 레이아웃에 영향을 미치지 않도록 독립적으로 위치하게 만든다.
높이 1픽셀 너비 1픽셀의 작은 영역으로 만든 후 clip:rect(0,0,0,0)으로 점영역 밖은 보이지 않게 한다. margin -1px로 확실히 보이지 않도록 밀어준다.