CSS Sprites(스프라이트)

CSS Sprites 기술은 이미지를 단일 파일로 병합하여 이미지 자원에 대한 HTTP 요청의 수를 줄이는 방법입니다.

스프라이트 이미지는 무엇인가요

서브 스프라이트는 X와 Y 좌표에서 정의된 지점에서 소 이미지를 큰 이미지로 조합한 二차원 이미지입니다.

조합 이미지에서 단일 이미지를 표시하려면 CSS를 사용할 수 있습니다. background-position속성, 표시할 이미지의 정확한 위치를 정의합니다.

CSS Image Sprite의 장점

많은 이미지, 특히 많은 작은 이미지(예: 아이콘, 버튼 등)을 가진 웹 페이지는 오랜 시간이 걸리며 여러 서버 요청을 생성할 수 있습니다.

이미지 스프라이트 대신 단일 이미지를 사용하면 브라우저가 서버로부터 발생하는 HTTP 요청의 수를 크게 줄일 수 있습니다. 이는 웹 페이지의 로드 시간과 사이트의 전반적인 성능을 크게 향상시키는 데 매우 효과적입니다.

다음 예제를 확인하면 명확한 차이를 볼 수 있습니다. 첫 번째로 마우스 포인터를 Sprite 버전이 아닌 브라우저 아이콘에 올리면 일정 시간 후 슬라이드 이미지가 나타납니다. 이는 슬라이드 이미지가 마우스가 오버되면 서버에서 로드되기 때문입니다. 일반 이미지와 슬라이드 이미지는 모두 다른 이미지이기 때문입니다.

Sprite 버전에서는 모든 이미지가 하나의 이미지에 병합되기 때문에 마우스를 올리면 즉시 마우스 오버 이미지가 표시되어 부드러운 마우스 오버 효과를 생성합니다. CSS Sprite를 사용하면 사용자가 병합된 이미지에 접근하여 HTTP 요청 횟수를 줄일 수 있으며, 파일 전체 크기도 줄어들어 접근성을 높일 수 있습니다.

스프라이트 이미지를

을 통해10개의 단일 이미지를 하나의 이미지로 조합하여mySprite.png로 이 sprite 이미지를 만듭니다. 자신이 좋아하는 이미지 편집 도구를 사용하여 자신의 스프라이트를 만들 수 있습니다.

Image sprite에서 아이콘 표시

마지막으로, CSS를 사용하여 필요한 스프라이트 이미지의 일부만 표시할 수 있습니다.

먼저, 스프라이트 이미지를 로드하는 .sprite 클래스를 만들어야 합니다. 이는 모든 항목이 공통된 배경 이미지를 공유하기 때문에 중복을 피하기 위함입니다.

.sprite {
　　　　background:　url("images/mySprite.png")　no-repeat;
}

이제, 표시할 각 항목에 클래스를 정의해야 합니다. 예를 들어, 인터넷 익스플로어 아이콘을 표시하려면, 이미지 스프라이트는 CSS 코드입니다.

.ie {
　　　　width:　50px;　/*　Icon width　*/
　　　　height:　50px;　/*　Icon height　*/
　　　　display:　inline-block;　/*　Display icon as inline block　*/
　　　　background-position: 0　-200px;　/*　Icon background position in sprite　*/
}

지금 문제가 생겼습니다. 이 픽셀 값을 어떻게 얻을 수 있을까요background-position답을 찾아보겠습니다. 첫 번째 값은 배경의수평 위치두 번째는 배경의수직 위치번째에 위치하기 때문에, 인터넷 익스플로어 아이콘의 왼쪽 상단이 왼쪽 경계에 닿기 때문에, 그와 출발점의 수평 거리(즉 이미지 스프라이트의 왼쪽 상단)는0또한, 그는5개 위치에 있습니다따라서 그와 출발점의 직립상 거리는 스프라이트의 위치에서4 X 50px = 200px로, 각 아이콘의 높이가50px입니다.

인터넷 익스플로어 아이콘을 표시하려면, 그의 왼쪽 상단을 출발점으로, 즉 이미지 스프라이트(mySprite.png)의 왼쪽 상단으로 이동해야 합니다. 또한, 이 아이콘의 직립상 거리는200px따라서 전체 배경 이미지(mySprite.png)를 직립상으로 이동해야 합니다200px이를 위해 음수로 값을 적용해야 합니다-200px기본적으로 음수는 그를 직립상으로 이동시키며, 양수는 그를 아래로 이동시킵니다. 그러나, 인터넷 익스플로어 아이콘의 왼쪽 상단에 픽셀이 없기 때문에 수평 이동은 필요하지 않습니다.

CSS Image Sprite를 사용하여 네비게이션 메뉴를 만드는 방법

이전 섹션에서는 이미지 스프라이트에서 단일 아이콘을 표시하는 방법을 배웠습니다. 이는 이미지 스프라이트를 사용하는 가장 간단한 방법입니다. 지금은뒤집기 효과네비게이션 메뉴로 나아가기 위해.

여기서는 같은 스프라이트 이미지를 사용하겠습니다（mySprite.png）를 사용하여 네비게이션 메뉴를 만듭니다.

네비게이션 기본 HTML

HTML로 만든 무序列표의네비게이션 메뉴 시작.

<ul　class="menu">
　　　　<li　class="firefox"><a　href="#">Firefox</a></li>
　　　　<li　class="chrome"><a　href="#">Chrome</a></li>
　　　　<li　class="ie"><a　href="#">Explorer</a></li>
　　　　<li　class="opera"><a　href="#">Opera</a></li>
　　　　<li　class="safari"><a　href="#">Safari</a></li>
</ul>

CSS로 네비게이션에 적용

다음 각 섹션에서는 CSS를 사용하여 위의 예제에서 제공된 간단한 무序列표를 악성 이미지 기반 네비게이션으로 변환하는 방법을 설명합니다.

단계1로 목록 구조를 초기화합니다.

기본적으로 HTML 무序列표으로 표시되는 목록으로 설정. 필요한 경우list-style-type속성을 설정하여 기본 목록 기호를 제거합니다. none.

ul.menu　{
　　　　list-style-type:　none;
}
ul.menu　li　{
　　　　padding:　5px;
　　　　font-size:　16px;
　　　　font-family:　"Trebuchet　MS",　Arial,　sans-serif;
}

단계2：각 링크에 일반 속성 설정

이 단계에서는 모든 링크가 공유할 공통 CSS 속성을 설정하겠습니다. 예를 들어:color，background-image，display，padding와.

ul.menu　li　a　{
　　　　height:　50px;
　　　　line-height:　50px;
　　　　display:　inline-block;
　　　　padding-left:　60px;　/*　To　sift　text　off　the　background-image　*/
　　　　color:　#3E789F;
　　　　background:　url("images/mySprite.png")　no-repeat;　/*　As all link share the same background-image　*/
}

단계3: 각 링크의 기본 상태 설정

지금, 우리는 각 메뉴 항목에 클래스를 정의해야 합니다. 왜냐하면 이미지 스플릿 내의 각 항목은 다른background-position예를 들어, Firefox 아이콘은 이미지 스플릿의 시작점 즉 왼쪽 상단에 위치하기 때문에 이동이 필요하지 않습니다. 따라서 이 경우 배경 이미지의 수직 및 수평 위치는 0이 됩니다. 유사하게, 다른 아이콘도 이미지 스플릿 내에 배경 위치를 정의할 수 있습니다.

ul.menu li.firefox a {
　　　　background-position: 0 0;
}
ul.menu li.chrome a {
　　　　background-position: 0　-100px;
}
ul.menu li.ie a {
　　　　background-position: 0　-200px;
}
ul.menu li.safari a {
　　　　background-position: 0　-300px;
}
ul.menu li.opera a {
　　　　background-position: 0　-400px;
}

단계4: 링크��러지는 상태 추가

��러지는 상태를 추가하면 위의 링크와 같은 원리입니다. 그들의 왼쪽 상단을 이미지 스플릿의 시작점(즉, 왼쪽 상단)으로 이동하면 됩니다. 우리가 위에서 했던 것처럼. 그러면background-position다음 공식을 사용하여 간단히 계산할 수 있습니다:

��러지는 상태의 수직 위치 = 정상 상태의 수직 위치 - 50px

마우스��러지는 이미지가 기본 상태 아래에 있기 때문에, 각 아이콘의 높이는 모두50px. 아이콘의��러지는 상태도 수평 이동이 필요하지 않습니다. 왜냐하면 아이콘의 왼쪽 상단에 픽셀이 없기 때문입니다.

ul.menu li.firefox a:hover {
　　　　background-position: 0　-50px;
}
ul.menu li.chrome a:hover {
　　　　background-position: 0　-150px;
}
ul.menu li.ie a:hover {
　　　　background-position: 0　-250px;
}
ul.menu li.safari a:hover {
　　　　background-position: 0　-350px;
}
ul.menu li.opera a:hover {
　　　　background-position: 0　-450px;
}

모든 것을 완료했습니다! 전체 과정을 결합한 후, 이는 우리의 최종 HTML과 CSS 코드입니다: