Magento에서 CSS 스프라이트를 구현하는 방법은 무엇입니까?

Question

안녕하세요 저는 Magento 용 CSS 스프라이트에 대한 자습서를 찾고 있습니다. GTspeed, Webo와 같은 몇 가지 플러그인을 발견했지만 지금까지 아무 것도 달성하지 못했습니다.

도와 주시겠습니까?

Answer 1

노크 CSS 스프라이트

당신이 여섯 개 이미지를 메인 웹 페이지 디자인에서 사용중인 브라우저가 개별적으로 다운로드 할 수있다 상상해보십시오. 두 이미지를 하나의 이미지로 결합하면 페이지 속도를 크게 줄일 수 있습니다. 이렇게하면 페이지를 표시하는 데 필요한 왕복 횟수가 줄어들어 사이트가 더 빨라집니다.

이제 6 개의 이미지를 다운로드하는 대신 웹 페이지를 다운로드하면됩니다. 이것은 CSS 스프라이트의 아름다움입니다. 하나의 자원이지만 여러 가지 용도. 대부분의 웹 페이지는 디자인에 여러 개의 작은 이미지를 사용합니다. 배경 이미지, 코너 이미지, 아이콘, 메뉴 항목 등.이 작은 이미지는 페이지 속도의 관점에서 보았을 때 실제로 합쳐집니다.

각 이미지를 다운로드해야합니다. 즉, 웹 브라우저가 서버에 이미지를 요청해야하고, 서버가 이미지를 보내야하고, 브라우저가 이미지를 표시해야합니다. 하나 또는 두 개의 이미지에서만 이러한 현상이 발생했다면 문제가되지 않지만 더 많은 이미지가로드 될수록 페이지 속도가 더 나 빠지게됩니다. 이 시나리오의 솔루션은 이미지 스프라이트로, 여러 개의 작은 이미지를 하나의 이미지로 결합하여 웹 페이지를 훨씬 빠르게 표시 할 수 있습니다. CSS 스프라이트에 이미지를 결합하는 방법

CSS 스프라이트를 만들 때 두 가지 주요 단계가 있습니다. 먼저 이미지를 만들어야하고 두 번째로 이미지를 배치해야합니다. 이미지 결합

여기서 간단한 예제를 사용합니다. 스타일을 목적으로 웹 페이지에 표시하고자하는 두 개의 이미지가 있고이를 하나로 결합하고자한다고 가정 해 보겠습니다. 우리는 스프라이트를 만들기 위해 이미지의 크기를 알아야합니다. 두 이미지가 동일한 크기 (50 x 50 픽셀) 인 예제를 사용합니다.

이러한 이미지를 결합하려면 100 x 50 픽셀의 이미지를 만듭니다. 우리는이 이미지를 무언가라고 부르며 "sprite.png"라고 부르 자. 이제 결합 된 이미지를 얻었으므로 이미지에 대해 알고있는 것을 사용하여 웹 페이지에서 올바르게 표시 할 수 있습니다.

결합 된 이미지의 너비는 50 픽셀이고 높이는 100 픽셀입니다. 따라서 첫 번째 이미지 (확성기)가 새 이미지의 상위 50 픽셀에 있고 두 번째 이미지 (웃는 얼굴)가 이미지의 아래쪽 50 픽셀에 있다고 말할 수 있습니다. 우리는이 지식을 사용하여 이미지를 페이지에 올바르게 배치 할 수 있습니다. 본질적으로, 웃는 얼굴을 원할 때 메가폰과 이미지의 아래쪽 절반을 원할 때 이미지의 위쪽 절반을 표시합니다. 우리는 그 일에 대해 가지 방법이 ...이 예를 들어 페이지

의 이미지는 우리가 된 div에 배경 이미지로 이미지를 사용합니다

위치. 즉, HTML에 빈 div 태그를 만들어 이미지를 표시합니다. 우리가 메가폰 이미지를 우리 페이지의 어딘가에 나타나게하려면 "확성기"의 CSS div 클래스를 만들 수 있습니다. .megaphone {width : 50px; 높이 : 50px; 배경 : url (images/sprite.png) 0 0x;}

위의 CSS 코드는 이미지 "스프라이트"를 호출하는 메가폰 이미지의 너비와 높이 (50x50 픽셀)를 말합니다.png "라고 부릅니다. 마지막으로 스프라이트의 작동 방식을 나타내는"0 0x "부분을 말합니다."0 0px "에서 시작하도록 이미지를 말하면 이미지가 0 픽셀 X 그리고 0 픽셀 Y. 당신이 두려워하게하거나 나쁜 대수학 숙제를 꺼내지 말아라. 그것은 정말로 "처음부터 이미지 시작"과 "왼쪽에서 이미지 시작"을 말하고있다. 우리는 이미지를 CSS에서 50 픽셀 아래로 표시하고 (즉, 확성기가있는 곳) 이미지가 표시되므로 이미지가 표시되지 않습니다. 이제 웃는 얼굴을 보면서 코드가 어떻게 변경되는지 살펴 보겠습니다. "smile"라는 CSS 클래스를 만듭니다 ... .smile {너비 : 50px, 높이 : 50px, 배경 : url (images/sprite.png) 0 -50px}}

우리는 여전히 너비 높이, 우리는 여전히 동일한 이미지를 호출하고 있지만 우리가 변경 한 부분은 "0-50 픽셀"부분입니다. 이것은 우리가 지금 다른 곳에서 시작하도록 이미지를 말하고 있기 때문입니다. 구체적으로 말하자면 이미지가 50 픽셀 아래로 시작해야한다는 것입니다 (-50px). 이것은 웃는 얼굴 이미지가 결합 된 이미지의 아래쪽 절반 (맨 아래에서 50 픽셀)까지 시작되지 않기 때문입니다. CSS가 완료되었으므로 이미지가 나타나기를 원하는 곳에서 HTML의 div를 호출 할 수 있습니다. 우리가 확성기를 원하는 경우 우리는 단지 "메가폰"

라는 빈 사업부를 입력 우리는 우리가 CSS로 이미지를 결합하는 기본이다 "미소"

라는 사업부를 입력 웃는 얼굴을하려는 경우 스프라이트,하지만 그것을 할 수있는 많은 방법이 있으며 귀하의 페이지에 가장 적합한 것을 탐험 가치가있다. 위의 튜토리얼은 스프라이트의 작동 방식을 일반적으로 보여 주었으며 절대로 깊이있는 토론이 아닙니다.