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

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

이미지 스프라이트 / IR 효과 / 백그라운드 표현에 대해서 알아봅시다.

---

이미지 스프라이트

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

♦︎ 장점

하나의 파일에 이미지들을 담아서 사용하기에 발생하는 장점
1. 이미지 로딩 속도 향상(최적화)됩니다.
2. HTML 마크업이 간결해지고 스크린 리더의 탐색 속도가 향상됩니다.
3. 하나의 파일만 관리하면 됩니다.

♦︎ 단점

1. 상황에 따라 유지보수가 어려울 수 있습니다. (이미지가 추가될 경우 스프라이트를 업데이트하고, 포지션 값의 수정이 필요.)
2. 데이터 관리에 문제가 생기면 이미지의 로딩이 불가능합니다.

♦︎ 사용법

이미지 스프라이트는 img 태그를 사용해서 이미지를 삽입하는 것이 아닌 CSS의 background 속성을 이용하여 삽입합니다.
위의 코드처럼 이미지 스프라이트 기법을 사용하기 위해 필수적으로 작성해줘야하는 속성이 있습니다.
- width, height : 삽입할 이미지의 크기를 결정한다.
- background-image : 삽입할 이미지의 경로를 설정한다.
- background-position : 이미지에서 사용할 이미지의 위치를 설정한다.
스프라이트된 이미지를 background-image를 통해 ::after에 적용하고, background-position을 통해 위치를 잡아주면 됩니다.

♦︎ 예시

36px로 아이콘을 만들고, 아이콘이 들어있는 것의 간격을 50px로 지정했습니다.
그에 따라서, background-position: -50px 0; x축과 y축의 값을 입력하여 이미지를 불러왔습니다.

.image__sns a {
    width: 36px;
    height: 36px;
    background: #fff;
    border-radius: 50%;
    display: block;
    margin-bottom: 5px;
    background: url(img/img_03_icon.svg) no-repeat;
}

.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 {
    opacity: 1;
}

---

IR 효과

사이트에서 이미지를 표현하는 방법 2가지(기본 원칙)
html : img 태그로 표현 (이미지가 의미 있고, 없으면 정보를 모를 경우), alt 태그 - 대체 문자 표현
css : background 속성으로 표현 (이미지의 의미가 없을 경우), 대체 문자 필요 없음

요즘에는 이미지를 background 속성으로 표현

웹 표준을 준수하기 위해서 2가지 알고서 지켜야 한다.
가상으로 대체 문자를 만들어줍니다.(IR 효과)
이미지 스프라이트 효과 기법을 사용하면 img 용량도 줄어들고 편합니다.

♦︎ 사용 방법

✦ 의미있는 이미지의 대체 텍스트를 제공하는 경우 : 이미지가 없으면 대체 텍스트가 제공되지 않습니다.

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

✦ 의미있는 이미지의 대체 텍스트로 이미지가 없어도 대체 텍스트를 보여주고자 할 때 사용

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

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

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