[CSS] 이미지 스프라이트 기법 + ir효과 / 백그라운드

CSS : Image Sprite

이번 시간에는 CSS 기법 중 하나인 이미지 스프라이트(Image Sprite) + ir효과 + 백그라운드에 대해 알아보겠습니다!😄

---

#1. 이미지 스프라이트 기법이란?

이미지 스프라이트란 여러 개의 이미지를 하나의 이미지로 합쳐서 관리하는 기법을 의미합니다.
웹을 제작하다 보면 이미지가 점점 증가하게 되고 그만큼 용량이 커지기 때문에 로딩 시간이 길어지게 됩니다. 이때 이미지 스프라이트를 사용하면 이미지를 다운받기 위한 서버 요청이 줄고 로딩시간을 절약할 수 있게 됩니다.
또한, 여러 이미지 파일을 관리하는 대신 몇 개의 스프라이트 이미지 파일만을 관리하면 되므로 매우 간편합니다.

💡 그럼 다음의 예제를 통해 이미지 스프라이트 기법을 이해해보도록 합시다!

---

#2. 이미지 스프라이트를 사용해보자! : 피그마

다수의 아이콘을 한 번에 넣기 위해 이미지를 작업해보겠습니다. 우선 36x36의 크기로 50px 씩 간격을 맞춰 나열해줍니다. 여기서 포인트는 코딩을 할 때 편하도록 왼쪽 위 모서리에 맞춰서 정렬하는 것 입니다! 그 뒤 백그라운드 이미지에 넣을 svg 파일로 저장합니다.

! 피그마 Tip !
이미지 스프라이트 기법을 사용할 땐 한 프레임 안에 한 번에 작업한 뒤 저장하는 게 중요!

#3. 이미지 스프라이트를 사용해보자! : HTML / CSS

작업했던 이미지를 코딩하기 위해선 ir효과와 background 속성이 필요합니다. 먼저 ir은 웹 표준을 준수하기 위해 alt 속서을 대변해주고 백그라운드의 url을 통해 아이콘을 삽입하여 각 간격에 맞게 position을 조정해주면 됩니다.
위 예제에서는 간격을 각 50px씩 작업했기 때문에 마찬가지로 50px씩 간격을 맞춰서 백그라운드 - 포지션을 정해줍니다.

! ir 사용 방법 !
.ir {
    display: block;
    overflow: hidden;
    font-size: 0;
    line-height: 0;
    text-indent: -9999px;
}
ir 효과 (이미지 대체 효과 == alt) : 가상요소를 두어서 alt 속성을 선언하여 웹 표준을 준수시켜야 한다. 더보기는 읽히지만 페이지 화면에서 시각적으로는 보이지 않는다.

! background 사용 방법 !
background: url(파일 경로 or 이미지 링크) : 이미지를 백그라운드에 삽입한다.
ex) background: url(img/img_bg01_01.jpg) no-repeat center;
background - position : 백그라운드 내에서 이미지의 위치를 설정한다.
ex) background-position: -50px 0;

💡 그럼 다음의 예제를 통해 이미지 스프라이트를 이해해보도록 합시다!

! 설명 !
1. html에서 아이콘을 삽입할 a태그와 span태그를 5개 만들고 텍스트를 정해준 뒤 css속성에서 ir효과를 사용할 수 있도록 선택자에 ir을 선언해줍니다.
2. background 속성을 사용하여 이미지 스프라이트 기법을 사용합니다.
3. background: url() = 삽입할 이미지 링크 또는 경로를 선언합니다.
4. background - position 속성과 :nth-child()란 가상 클래스를 통해 각 해당 자식에게만 background - position 속성을 부여해주어 간격을 맞춰줍니다.
= 이미지의 좌표값을 옮겨서 해당 이미지를 하나씩 보이도록 합니다.

---

다음 시간에는 심화 버전으로 이미지 스프라이트 기법을 사용한 이미지 페이지를 실습해보겠습나다. 고생많으셨습니다🤩