CSS Sprites 기술 CSS Zengarden의 소유주인 Dave Shea는 2005년 초에 ALA에 이 기술에 대한 자세한 설명을 발표했습니다.
원래는 생산 방법으로 CSS 플레이어들 사이에만 배포되었지만 나중에 빠른 로딩 웹 사이트를 위한 14가지 규칙이 나와 기술자들 사이에 배포되었습니다. 그래서 이 작은 도깨비가 인기를 얻었고 심지어 온라인 생성 도구까지 등장했는데 이는 막을 수 없었습니다. 최근 국내 많은 블로그에서 CSS Sprites가 언급되고 있는데, 가장 유명한 사례가 google.co.kr 아래의 애니메이션입니다. YUI의 최신 릴리스에서는 CSS Sprite도 사용됩니다. 거의 모든 CSS 장식 이미지는 40×2000 이미지로 덮여 있습니다. 주요 소셜 네트워킹 사이트인 Facebook은 최근 모든 아이콘을 덮기 위해 22×1150 이미지를 사용했습니다. 갑자기 CSS Sprite가 어디에나 있었습니다.
CSS 스프라이트 작동 방식
우리는 CSS 혁명 이후로 HTML이 의미론적인 경향이 있다는 것을 알고 있습니다. 일반적으로 장식적인 내용은 더 이상 태그로 작성되지 않지만 렌더링 작업은 CSS에 넘겨집니다. GUI는 다채롭고 다양하고 아름다운 그림으로 장식하는 데 없어서는 안 될 요소입니다. 새로운 시대의 제작 방식은 HTML을 다양한 Hook로 채운 뒤 CSS가 처리하도록 하는 것입니다.
이미지를 사용해야 하는 경우 이는 현재 background-repeat, background-position 등과 결합된 CSS 속성 background-image를 통해 달성됩니다. (여담: 브라우저가 향후 콘텐츠를 지원한다면 현재 단계를 철회하는 이유는 무엇입니까? , 추가 구현 방법). 우리의 주인공은 짐작하셨겠지만 배경 포지션입니다. background-position 값을 조정하면 배경 이미지가 다양한 모습으로 눈앞에 나타날 수 있습니다. 사실 사진의 위치가 바뀌었기 때문에 사진의 전체적인 모습은 변하지 않았습니다. 시계의 날짜와 같습니다. 위치가 한 칸 올라갔기 때문에 오늘은 21이고 내일은 22입니다. 그래서 CSS Sprites는 일반적으로 고정된 크기의 박스(box)에서만 사용할 수 있기 때문에 보여서는 안되는 부분은 가려질 수 있다는 사실을 알고 계실 것입니다.
예를 들어 YUI의 sprite.png를 사용하면 max는 최대화를 나타내고 min은 최소화를 나타냅니다(웹 사이트가 매력적이도록).
<div class="max">최대화</div> <div class="min">최소화</div> |
두 클래스 모두 동일한 이미지를 사용합니다.
.분, .최대 { 너비:16px; 높이:16px; 배경 이미지:url(sprite.png); background-repeat: no-repeat; /*타일링을 원하지 않습니다*/ text-indent:-999em; /*텍스트를 숨기는 방법*/ } |
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <본문> |
회색 구름이 보이는 이유는 배경 위치(기본값 0 0)를 지정하지 않았기 때문입니다. sprite.png를 보면 이 위치가 회색 블록입니다. 좋아요, 최대화를 나타내는 더하기 기호와 최소화를 나타내는 빼기 기호의 위치를 찾아야 합니다. 측정 후 최대화 버튼은 Y축 350px에 위치하고, 최소화 버튼은 Y축 400px에 위치합니다. 어떻게 표시할지 생각해 보세요. 당연히 sprite.png를 업그레이드해야 하며 코드는 다음과 같습니다.
.max { 배경 위치: 0 -350px;} .min { 배경 위치: 0 -400px;} |
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <본문> |
이번에는 성공했습니다!
CSS 스프라이트의 장점
CSS Sprite의 성능이 갑자기 고갈되는 이유는 웹 사이트 성능을 향상시키는 능력과 관련이 있다는 것을 이전에 배웠습니다. 분명히 이것은 큰 장점 중 하나입니다. 일반 제작 방식의 많은 수의 사진이 이제 하나의 사진으로 병합되어 HTTP 연결 수가 크게 줄어듭니다. HTTP 연결 수는 웹 사이트의 로딩 성능에 중요한 영향을 미칩니다.
CSS 스프라이트의 단점
유지 관리 측면에서 이는 일반적으로 양날의 검입니다. 어떤 사람들은 좋아할 수도 있고 어떤 사람들은 그렇지 않을 수도 있습니다. 왜냐하면 사진이 바뀔 때마다 사진을 삭제하거나 내용을 추가해야 하기 때문에 조금 번거로울 것 같습니다. 그리고 사진(특히 수천 픽셀의 사진)의 위치를 계산하는 것도 상당히 불쾌합니다. 물론 성과라는 슬로건 하에서는 이 모든 것을 극복할 수 있다.
영상의 위치를 절대값으로 고정해야 하기 때문에 중심 등의 유연성이 상실됩니다.
앞서 언급했듯이 CSS Sprite를 사용하려면 상자 크기를 제한해야 합니다. 그렇지 않으면 이미지에 방해가 될 수 있습니다. 즉, CSS 스프라이트는 단방향이 아닌 타일 배경과 웹 페이지 크기 조정이 필요한 일부 상황에는 적합하지 않습니다. YUI의 솔루션은 제한된 크기 조정이 유지될 수 있도록 이미지 사이의 거리를 늘리는 것입니다.
CSS 스프라이트 요약
성능은 다른 모든 것보다 우선합니다. CSS 스프라이트는 홍보할 가치가 있는 기술입니다. 고정 크기 아이콘 교체와 같은 FIR에 특히 적합합니다. 호환성을 유지하려면 이미지의 일부를 일정 거리 떨어진 곳에 두는 것이 좋습니다.