CSS 스프라이트에 대해 설명하고 페이지나 사이트에서 이를 구현하는 방법을 설명합니다.

CSS 스프라이트는 대부분 사이트나 앱의 아이콘을 만드는 것과 관련이 있습니다. 또한 게임의 애니메이션에도 일반적으로 사용됩니다. 여기에서는 아이콘을 다룰 것입니다.

뭐
모든 아이콘을 하나의 이미지 파일로 결합합니다. 그리고 다른 아이콘은 background-position 속성을 사용하는 픽셀 위치나 svg<use> 태그로 참조됩니다.

일반적으로 Fontawesome 또는 IcoMoon과 같은 다양한 아이콘 공급자가 CDN을 통해 제공하는 아이콘을 사용합니다. 그러나 전체 아이콘 시스템을 브라우저로 보내기 때문에 크기가 일반적으로 큽니다. 아이콘은 CDN에서 하나씩 가져오므로 로드 시간이 지연됩니다.

CSS 스프라이트를 사용하면 앱에서 사용하는 아이콘만 선택하여 아이콘 시스템의 크기를 줄일 수 있습니다. 또한 모든 아이콘을 하나의 파일로 결합하여 하나의 응답으로 클라이언트에 전달하기 때문에 HTTP 요청 수를 줄입니다. 이렇게 하면 브라우저에서 개별 아이콘을 더 빠르게 사용할 수 있습니다.

어떻게
CSS 스프라이트를 사용하기 전에 스프라이트 생성기를 사용하여 이미지 파일을 생성해야 합니다. 다양한 스프라이트 생성기를 온라인 또는 npm 패키지로 사용할 수 있습니다. png 또는 svg의 두 가지 유형의 스프라이트를 사용할 수 있습니다.

.png 스프라이트
png 스프라이트를 사용하여 이미지를 배경 이미지로 <div> 에 배치합니다. 여기서 주목해야 할 중요한 점은 아이콘으로 가득 찬 전체 이미지를 배경 이미지로 사용하고 있다는 것입니다. 그런 다음 아이디어는 아이콘의 너비와 높이인 background-position 속성을 사용하여 관심 있는 아이콘에 집중하는 것입니다.
background-position 속성은 <div> 에서 사용할 배경 이미지의 시작점을 설정합니다. 아이콘이 48px 이미지 내부에 가로로 있으면 기본적으로 background-image-x: -48px; 와 0 사이의 모든 것을 숨기는 48px 를 설정합니다. 수직으로 내부에 32px 있으면 background-position-y: 32px; 로 설정하여 수직으로 0-32px까지 모든 것을 숨깁니다. 우리는 width의 height와 <div>를 아이콘 자체의 너비, 높이, 패딩 및 여백으로 설정하여 뒤에 오는 아이콘을 숨깁니다.

this codepen 에서 png 스프라이트의 예를 참조하십시오.

png 스프라이트 사용의 한 가지 단점은 스프라이트를 원하는 방식으로 스타일을 지정할 수 없다는 것입니다. 예를 들어 아이콘의 특정 상태에 대한 색상을 변경할 수 있습니다. 동일한 스프라이트의 각 색상과 음영에 대한 스프라이트를 포함해야 합니다.

.svg 스프라이트.svg 파일을 사용하는 스프라이트는 다른 접근 방식을 취합니다. 관련된 배경이 없습니다. 단계에는 다음이 포함됩니다.

온라인 도구 또는 this one과 같은 npm 패키지를 사용하여 .svg 스프라이트 파일을 생성합니다. 출력 스프라이트에서 각 아이콘 이미지는 <group> 속성이 지정된 svg<symbol> 또는 id 태그에 배치됩니다.

HTML 문서의 상단에 스프라이트 파일을 포함합니다. 스프라이트id를 사용할 수 있어야 나중에 문서에서 아이콘을 참조할 수 있기 때문에 이는 중요합니다. 이를 수행하는 방법에는 여러 가지가 있습니다. 한 가지 방법은 <object> 요소를 사용하는 것입니다.

<object data="sprite.svg" type="image/svg+xml" style="display: none;">
  ...
</object>

또 다른 중요한 것은 display: none; 요소에 대해 <object>를 설정하는 것입니다.

그런 다음 아이콘을 추가하려는 섹션에서 <svg> 요소를 추가합니다. <svg> 요소 안에 <use> 태그를 넣고 스프라이트 파일에 정의된 id로 선택한 아이콘을 참조합니다.

<div class="social-links">
  <svg viewBox="0 0 32 32" class="icon icon-facebook">
    <use href="#facebook-square"></use>
  </svg>
</div>

그런 다음 원하는 대로 <svg> 아이콘으로 class 아이콘의 스타일을 지정할 수 있습니다.

예를 보려면 this pen 을 참조하십시오.


참조

CSS Image Sprites

Implementing image sprites in CSS

Icon System with SVG Sprites

Using SVG