이미지 스프라이트 / IR 효과 / 백그라운드 표현

이미지 스프라이트 / IR 효과 / 백그라운드 표현

이미지 스프라이트 / IR 효과 / 백그라운드 표현에 대해 알아보는 시간을 가져보도록 하겠습니다.

---

01. 이미지 스프라이트

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

01-1. 사용법

이미지 스프라이트는 <igm> 태그를 사용해서 이미지를 삽입하는 것이 아닌 CSS의 background 속성을 이용해서 삽입한다.

{
    <div class="image__sns">
    <a href="#" class="link"><span class="ir">유튜브</span></a>
    <a href="#" class="link"><span class="ir">디스코드</span></a>
    <a href="#" class="link"><span class="ir">인스타</span></a>
    <a href="#" class="link"><span class="ir">크롬</span></a>
    <a href="#" class="link"><span class="ir">페이스북</span></a>
    <a href="#" class="link"><span class="ir">트위터</span></a>
</div>
}

{
    .image__sns a{
        width: 36px;
        height: 36px;
        background: #fff;
        border-radius: 50%;
        display: block;
        margin-bottom: 5px;
        background: url(img/image_bg03_01icon.svg) no-repeat;
    }
    .image__sns a:nth-child(1){}
    .image__sns a:nth-child(2){
        background-position: -50px 0;
    }
    .image__sns a:nth-child(3){
        background-position: -100px 0;
    }
    .image__sns a:nth-child(4){
        background-position: -150px 0;
    }
    .image__sns a:nth-child(5){
        background-position: -200px 0;
    }
    .image:hover .image__sns {
        /* right: 10px; */
        opacity: 1;
        transition: all 0.25s;
    }
    .image:not(:hover) .image__sns {
        transition: all 0.25s;
    }
    .ir {
        display: block;
        overflow: hidden;
        font-size: 0;
        line-height: 0;
        text-indent: -9999px;
    }
}

01-2. 장단점

장점	단점
이미지 로딩 속도 향상(최적화)된다.	일부 이미지, 로고의 수정이 필요한 경우 (ex.덮어쓰기도 안될 때) 유지 보수가 까다롭다. 그렇기 때문에 웬만하면 수정이 안될 것 같은 단순한 이모티콘이나 로고의 경우에 자주 쓰인다.
HTML 마크업이 간결해지고 스크린 리더의 탐색 속도가 향상된다.
하나의 파일만 관리하면 된다.

# 주의사항 : 웹접근성을 위해 IR태그를 같이 사용해줍시다.

---

02. IR 효과

의미있는 이미지를 배경처리하고 그에 상응하는 내용을 텍스트로 기입해 역활이나 의도를 명시하는 방법이다.
보통 img 태그에 alt 속성을 이용하면 따로 이 작업이 필요없지만 CSS background 속성을 사용해 이미지를 넣는 경우도 많기 때문에  모든 사용자에게 동일한 정보 제공을 하기 위해선 알아두면 좋은 기법이다.
텍스트는 스크린리더에서만 읽히고 디자인상 화면에 보이지 않아야 함으로 visibility: hidden과 display: none처럼 스크린리더가 읽지 못하는 방법이 아닌 아래와 같은 방법으로 처리가 가능하다.

{
    /* ir 효과(이미지 대체 효과 alt) */
    .ir {
        display: block;
        overflow: hidden;
        font-size: 0;
        line-height: 0;
        text-indent: -9999px;
    }
}

---

03. 코드펜