웹 페이지를 향상시키기 위해 CSS 스프라이트를 구현하는 방법



이 기사는 CSS SPrite에 대한 상세하고 포괄적 인 지식과 웹 사이트를 부드럽게 만드는 데 사용할 수있는 방법을 제공합니다.

스프라이트의 개념은 한동안 존재했습니다. 화면에 애니메이션을 표시하는 프로세스의 속도를 높이기 위해 게임 업계에서 가장 일반적으로 사용되는 기술 중 하나입니다. 이 기사에서는 CSS Sprite의 도움으로 다음 순서로이 기술이 웹 페이지에서 사용자 경험을 개선하는 데 어떤 도움이되는지 특히 살펴 봅니다.

스프라이트 란?

스프라이트는 게임에서 더 큰 장면의 일부인 단일 이미지입니다. 그런 다음 여러 스프라이트가 스프라이트 시트라는 큰 이미지로 결합됩니다. 스프라이트 시트가 메모리에로드되면 다른 스프라이트가 빠르게 연속적으로 렌더링되어 애니메이션 효과를줍니다. 이것은 게임에서 장면을 생성하기 위해 수십에서 수백 개의 서로 다른 스프라이트에 대해 동시에 수행됩니다.





CSS 스프라이트

자바의 가상 기능이란?

기본 아이디어는 여러 이미지를로드하여 표시하는 것보다 이미지를로드하고 필요할 때마다 이미지의 일부를 표시하는 것이 훨씬 빠르다는 것입니다.



CSS Sprite 란 무엇입니까?

CSS 스프라이트는 웹 개발자가 웹 페이지의 성능을 최적화하기 위해 자주 사용하는 기술입니다. 이 기술에서는 일반적으로 동일한 크기의 여러 작은 이미지가 하나의 큰 이미지로 결합됩니다. 스프라이트 시트 또는 타일 ​​세트 . 이 스프라이트 시트는 필요할 때마다 개별 요소를 표시하는 데 사용됩니다.

일반적으로 로고, 탐색 화살표, 버튼과 같은 요소는 거의 동일한 치수이고 웹 페이지에서 자주 사용되기 때문에 스프라이트 시트에 포함됩니다.

웹 개발에 도움이되는 예?

일반적으로 웹 페이지를 디자인하는 동안 이미지는 개별 파일로 저장되고 사용됩니다. 따라서 사용자가 웹 페이지를 열면 브라우저는 이러한 각 파일에 대해 HTTP 요청을하고 별도로 다운로드하여 표시해야합니다. 이로 인해 특정 웹 페이지에 버튼, 아이콘, 로고와 같은 작은 이미지가 많이 포함될 수 있으므로 페이지로드 시간이 길어집니다.



CSS 스프라이트는 개발자가 자주 사용되는 작은 이미지를 하나의 큰 이미지로 결합하는 데 도움이됩니다. 그런 다음 브라우저는 파일을 하나만 다운로드해야합니다.이미지를 오프셋하여 필요한 섹션을 표시합니다.

CSS 스프라이트 사용의 장점

일반 이미지에 비해 CSS 스프라이트를 사용하면 두 가지 주요 이점이 있습니다.

  • 더 빠른 페이지 로딩 : 시트가 다운로드되는 즉시 웹 페이지에 사용 된 이미지가 나타나므로 페이지 로딩 시간이 향상됩니다.

  • 처리량 증가 및 리소스 사용량 감소 : 이 기술은 페이지로드 속도를 높여 최종 사용자 경험을 향상시킬뿐만 아니라그러나 HTTP 요청 수가 줄어들 기 때문에 네트워크 혼잡도 감소합니다.

개발자는 CSS Sprite로 작업 할 때 무엇을해야합니까?

개별 이미지로 작업 할 때 개발자는 HTML 태그로 간단히 작업 할 수 있습니다. 필요한 경우 CSS에서 스타일을 지정합니다. 그러나 CSS Sprite로 작업 할 때 개발자는 두 가지 특정 작업을 수행해야합니다.

  • 스프라이트 시트 생성

웹 페이지를 개발하는 동안 개발자가 CSS 스프라이트를 사용하기로 결정하면 먼저 버튼, 로고 등 원하는 요소를 모두 격자 모양의 패턴으로 병합하여 스프라이트 시트를 만들어야합니다. 이것은 Photoshop 또는 Gimp와 같은 이미지 편집 프로그램을 사용하여 수행 할 수 있습니다. 스프라이트 시트를 만드는 데 도움이되는 온라인 도구도 많이 있습니다. 이러한 도구는이 문서의 뒷부분에서 설명합니다.

  • 다음을 사용하여 스프라이트의 특정 요소에 액세스합니다. CSS 배경 위치 특성

스프라이트 시트가 준비되면 개발자는 CSS 속성을 사용하여 시트의 다른 부분에 액세스해야합니다.

  • 폭: 스프라이트의 폭
  • 신장: 스프라이트의 높이
  • 배경: 스프라이트 시트에 대한 참조
  • 배경 위치 : 스프라이트 시트의 필요한 부분에만 액세스하기위한 오프셋 값 (픽셀)

CSS 스프라이트 시트를 만드는 방법은 무엇입니까?

이미지 편집 소프트웨어를 사용하여 작은 이미지를 격자로 정렬 할 수 있지만 두 가지 쉬운 방법이 아래에 설명되어 있습니다.

1. 온라인 스프라이트 시트 생성 도구

링크: toptal.com/developers/css/sprite-generator/

이 도구는 무료로 사용할 수있을뿐만 아니라 스프라이트 시트를 참조하는 동안 사용할 수있는 필수 CSS 코드도 제공합니다. 또한 요소 사이의 패딩 및 정렬 변경과 같은 다양한 속성을 사용하여 조작 할 수 있습니다.

2. Sprity로 스프라이트 시트 생성

Grunt, Node 또는 Gulp를 사용하는 경우 PNG, JPG 등과 같은 다양한 형식의 스프라이트 시트를 만드는 데 도움이되는 Sprity라는 패키지를 설치할 수 있습니다.

먼저 다음을 사용하여 Sprity를 ​​설치해야합니다.

npm 설치 sprity -g

그런 다음 스프라이트 시트를 생성하려면 다음 명령을 사용하십시오.

sprity ./output-directory/ ./input-directory/*.png

CSS 스프라이트로 작업하는 방법?

이 예에서는 다음 스프라이트 시트를 사용합니다.

위의 이미지에서 볼 수 있듯이 6 개의 아이콘 (Instagram, Twitter, Facebook)이 격자 모양의 패턴으로 배열되어 있습니다. 첫 번째 행에는 정상 상태가 있고 두 번째 행에는 호버 상태가 있습니다 (마우스 커서를 가져 가면 나타나는 이미지).

위에서 논의한 도구를 사용하여 스프라이트 시트를 만들었다면 CSS에서 필요한 오프셋을 이미 알고 있지만 다른 도구를 사용했거나 단순히 스프라이트 시트를 제공 받았다면 걱정하지 마십시오. 필요한 요소에 대한 오프셋을 얻는 데 도움이됩니다.

이제 MS Paint를 사용하여 6 개의 아이콘 각각에 필요한 오프셋을 얻는 매우 간단한 방법을 살펴 보겠습니다. 스프라이트 작업에 이상적인 솔루션은 아니지만 마우스 커서의 좌표를 제공하는 기능이 있으므로 필요한 X 및 Y 좌표를 얻는 데 사용할 수 있습니다.

먼저 스프라이트 시트 이미지 (작은 이미지가 모두 포함 된 그리드)를 열고 마우스 커서를 잡으려는 스프라이트의 왼쪽 상단 모서리로 가져옵니다.

스프라이트의 왼쪽 상단 지점 (인스 타 그램 이미지 왼쪽 상단)의 좌표가 있으면 CSS 코드를 사용하여 필요할 때마다이 특정 스프라이트를 표시 할 수 있습니다.

배경 : url ( 'img_sprites.png')
배경 위치 : 0 0
너비 : 125px
높이 : 125px

아이콘이 해당 크기이므로 너비와 높이를 125 픽셀로 사용하고 있습니다. 같은 행에서 다음 이미지 (Twitter)를 가져 오기 위해 다음 코드를 사용합니다.

배경 : url ( 'img_sprites.png')
배경 위치 : -128px 0px
너비 : 125px
높이 : 125px

위의 스 니펫에서 background-position 속성을 확인하세요. (-128px, 0)은 스프라이트 시트를 왼쪽으로 128 픽셀 (요소 사이의 패딩을 고려)으로 오프셋하고 Y 축에서 0 픽셀을 오프셋한다는 것을 의미합니다. twitter hover 아이콘에 액세스하면 background-position 속성은 다음과 같습니다.

배경 위치 : -128px -128px

이런 식으로 이제 CSS를 사용하여 스프라이트 시트의 각 구성 요소에 액세스 할 수 있습니다. 이를 수행하는 방법에 대한 완전한 HTML 및 CSS 코드를 살펴 보겠습니다.

1 단계: 필요한 HTML 코드 작성

아래 코드에서는 단순히 세 개의 링크를 추가합니다. 또한 HTML을 스타일 시트 (screen.css)와 연결합니다.

수업='인스 타 그램 아이콘'> href='#'>인스 타 그램

수업='트위터 아이콘'> href='#'>트위터

수업='페이스 북 아이콘'> href='#'>페이스 북

2 단계: 필요한 CSS 작성. 먼저 공유 아이콘 클래스의 스타일을 지정합니다. 여기에서 우리가 만든 스프라이트 시트를 참조하고 있음을 알 수 있습니다.

/ * 공유 아이콘 클래스 * /

span.icon 링크,

span.icon a : 방문{

디스플레이:블록

텍스트 들여 쓰기:-9999 픽셀

Java에서 2 진수에서 10 진수로

배경 이미지: url (./ img_sprites.png)

배경 반복:반복하지 않음

}

3 단계 : 오프셋을 사용하여 스프라이트 시트에서 개별 아이콘 가져 오기.

/ * Instagram 아이콘 * /

span.instagram 링크,

span.instagram a : 방문{

:125px

신장:125px

배경 위치:0 0

}

/ * 트위터 아이콘 * /

span.twitter 링크,

span.twitter a : 방문{

:125px

자바에서 전원을 사용하는 방법

신장:125px

배경 위치:-128px 0

}

/ * Facebook 아이콘 * /

span.facebook 링크,

span.facebook a : 방문{

:125px

신장:125px

배경 위치:-257px 0

}

4 단계 : 오프셋을 사용하여 스프라이트 시트에서 호버 아이콘 가져 오기.

span.instagram a : hover{배경 위치:0 -128px}

span.twitter a : hover{배경 위치:-128px -128px}

span.facebook a : hover{배경 위치:-255px -128px}

CSS 스프라이트를 사용하는 회사

업계의 많은 유명 인사들은 CSS Sprites를 사용하여 웹 사이트의 반응성을 향상시킵니다. Google, Facebook, Amazon과 같은 회사는 특정 사용자에 대한 세션 당 HTTP 요청 수를 줄이는 데 도움이되므로이 방법을 광범위하게 사용합니다. 이러한 회사가 주어진 순간에 수백만 명의 고객에게 서비스를 제공한다는 점을 고려할 때 이것은 큰 이점입니다.

이제 CSS 스프라이트가 무엇이며 어떻게 작업하는지 파악 했으므로 CSS를 배우는 여정에 한 걸음 더 가까워졌습니다. 스프라이트와 같은 개념은 개발자가 웹 페이지에서 모든 성능을 추출하는 것이 매우 중요해 졌기 때문에 오늘날의 게임 체인저입니다.

우리를 확인하십시오 강사 주도의 라이브 교육 및 실제 프로젝트 경험과 함께 제공됩니다. 이 교육을 통해 백엔드 및 프런트 엔드 웹 기술을 다루는 기술을 능숙하게 사용할 수 있습니다. 여기에는 웹 개발, jQuery, Angular, NodeJS, ExpressJS 및 MongoDB에 대한 교육이 포함됩니다.

질문이 있으십니까? 'HTML 이미지'블로그의 댓글 섹션에 언급 해 주시면 다시 연락 드리겠습니다.