CSS 스프라이트 : 설명, 기본 기술 및 유용한 권장 사항

현대 웹 사이트는 빠르고 아름답고 멋 있어야합니다.개발 단계에서나 고객과의 작업 중에도 효과적입니다. 일반적으로 인터넷 자원을 만드는 각 회사는 디자인, 스타일, 안정성, 속도 및 기타 자질을 갖춘 방문객을 유인하기 위해 자체 얼굴을 가지고 노력합니다.

스프라이트의 유용한 속성

CSS 스프라이트는 고품질로 향상 될 수 있습니다.사이트 특성 및 회사 이미지. 본질적으로 이것은 매우 복잡한 개발자 도구는 아니지만 리소스를 개발하는 프로세스와 작업 속도를 향상시킵니다.

무엇보다도 코드가 단순화되어알려진 의미에서, CSS 스프라이트가 사용된다는 사실 때문에 가까운 친척들과 비슷하게되는 다른 자원들과 이식 가능해집니다. 동일한 그래픽 아이디어, 대화 요소의 디자인 스타일, 태그의 구조 및 내용을 사용할 수 있기 때문입니다.

일반적인 사이트 개발 프로세스가 필요합니다.많은 사진을 찍으십시오. 아주 자주,이 그림은 공간을 거의 차지하지 않지만 항상 별개의 파일입니다. 모든 서버의 운영 체제에서 파일을 여는 것은 시간 소모적 인 작업이지만 13x13 픽셀로 파일을 열 때 시간이 크게 다르지 않고 16x52x52 픽셀로 파일을 열 때도 크게 달라지지 않습니다. 첫 번째 경우에는 16 개의 파일과 16 개의 열기 / 읽기 작업이 필요하며 두 번째 경우에는 하나의 파일 만 열어 16 개의 그림을 얻을 수 있습니다.

주제에 그러한 파일 세트를 작성하는 경우(가로 메뉴, 대화 형식, 계산기 단추, 일정 디자인 요소 ...) 그런 다음 이미지 세트를 사이트에서 사이트로 전송할 수 있습니다.

동전의 뒷면

CSS 스프라이트를 사용하기에는 너무 빠른 팬이있는 경우, 신중하게 문제를 연구하고 구식 방식으로 작업하는 것이 더 실용적이라는 것을 분명히 보여주는 사람들이 있습니다.

사실 16 개의 이미지 파일 대신16 개의 그림으로 된 파일이 하나있을 것입니다. 16 개의 열기 / 읽기 작업 대신에 하나의 파일이 있습니다. 그러나 모든 브라우저에는 캐시가 있으며 마지막 수단으로 만로드됩니다. 또한 페이지 요소는 대개 첫 번째 페이지 방문시로드되며 나중에 수정 된 페이지 만로드됩니다.

또 다른 측면. 일반적으로 사진은 잘라내어 하나의 파일에 붙이지 않습니다. 어떻게 든이 기술은 관습을 발전 시켰고 관습이라고 말할 수 있습니다. 디자이너는 레이아웃을 만들고 레이아웃은 조각을 사용합니다. 레이아웃의 미세한 부분을 잘라냅니다. 스프라이트에 반대하는 사람들은 여러 이미지를 하나의 파일로 수집하는 것은 힘든 작업이며 페이지 개발의 전체 시간을 증가시킵니다.

이 직업은 CSS 스프라이트보다 실용적이라고 생각하여 HTTP 요청 수를 고려하고 최적화하는 일부 개발자가 있습니다.

이 모든 점은 의심의 여지가 없지만 의견은 훨씬 더 중요합니다. 모든 것이 합리적인 범위 내에서 적용되어야합니다.

자동화 및 CSS 스프라이트

CSS 스프라이트 생성기를 실행하는 데 아무런 의미가없는 경우디자인의 올바른 부분을 얻으면, 평소와 같이이 부분을 구성하는 것을 막을 수있는 방법은 없습니다. 일반적인 기술로 수백 장의 사진을 잘라야하는 경우 JavaScript 함수를 스케치하여 필요한 경우 스프라이트에서 원하는 영역을 선택하여 표시하는 것이 좋습니다.

그러나 스프라이트가2 또는 3 개의 요소 또는 12 개 또는 2 개의 - 좋아요. 그러나 스프라이트에 100 개의 드로잉이있는 경우 물론 JavaScript 함수를 작성하는 데 아무런 문제가 없지만 그러한 큰 스프라이트를 만드는 데 얼마나 많은 작업을 할 것인가 ... 또한, CSS 스프라이트 생성기는 원하는 그림과 CSS 코드를 작성하므로 스프라이트의 구성 요소가 몇 개인 지 중요하지 않습니다. 사이트 수정, 디자인 변경, 새 요소 삭제 및 추가시 문제가 발생합니다. 스프라이트를 개발할 때 스프라이트를 사용하는 방법에 대해 생각하지 말고 나중에 변경하는 방법을 고려해야합니다.

스프라이트 사용의 주제 이점

CSS 프로그래밍 언어와 달리상대적으로 정적 인 일련의 규칙으로, 전체 동적 특성은 규칙 및 해당 기능 내용 (표준에 따라)에 의해 결정됩니다. 복잡한 스프라이트 인 HTML, CSS를 고려해 보면 디자인 기능의 주제 라이브러리를 만들 수 있습니다.

예를 들어 완성 된 메뉴 옵션은 다음과 같습니다. 단순히 여러 CSS 규칙, js- 함수를 연결하고 코드에 여러 HTML div를 포함하면 결과를 얻을 수 있습니다. 스프라이트 이미지의 내용을 변경하여이 메뉴의 모양을 변경할 수 있습니다. 함수 본문을 지정하여 기능을 조정할 수 있습니다.

종류의 선택권을 얻으십시오객체 지향 프로그래밍 (OOP). 의심 할 여지없이, 이것은 밝은 아이디어 일 것이지만, 실제 언어로 다른 OOP 사투리에 비해 너무 밝게 나타나지는 않을 것입니다. 그것은 PLO가 되살아 났고 태양 아래서 그 자리를 정복하는 것이 비정상적으로 빠른 90 년대 초반에야 구체적인 아이디어와 표현의 특정 형태였습니다. 오늘날 개발자들은 다양한 러시아어가없는만큼 많은 방언을 제시했습니다.

완구 - 스프라이트의 황금색 바닥

흥분과 프로그래밍은 호환되지 않는 개념입니다.게임을 쓰는 프로그래머의 자격은 일상적인 일상 (단순한 코딩)과 창의적인 (새로운 기술, 아이디어의 설계 및 개발)과 현저하게 다릅니다.

게임 디자인은 벡터 그래픽에 호소합니다.SVG 스프라이트 + CSS 규칙의 조합은 주장 될뿐만 아니라 종종 개발자의 (사이트) 객체에서 실제 게임 객체로 변합니다. 특히 인기있는 게임 Counter Strike가 스프라이트를 조건에 적용하고 폭발, 피, 시력 등 아주 의미있는 동의어를 스프레이합니다.

"install css v34 sprites"문구개시는 아주 정상적이고 이해할 수 있습니다. Sprites는 응용 분야에서 유용성을 발견했을뿐만 아니라 특정 소비자 집단에 충분히 기능적으로 접근 가능하고 이해할 수있는 틈새 시장을 형성했습니다.

CSS 스프라이트 : 예제

특정 언어의 페이지를 전환하는 데 다양한 옵션이 사용되지만 언어 선택기가 아이콘으로 실행되는 경우 스프라이트를 사용하는 솔루션은 다음과 같이 보일 수 있습니다.

명백한 스프라이트의 결함

우선, 힘들고 꼼꼼합니다.그 과정. 디자인을 작은 조각들로 잘라내는 것이고, 또 다른 하나는 작은 조각들로부터 하나의 그림을 모으는 것입니다. 캔버스의 아이디어를 적용하고 사이트에 사용 된 모든 이미지를 넣어, 그것은 절대적으로 unpromising입니다.

CSS 스프라이트 생성기를 사용하더라도 어려움특히 사이트 디자인을 다시해야 할 때 피할 수 없습니다. 수십 개의 그림을 스프라이트에 배치하는 것은 요소 배열이 아니며 그래픽은 그래픽이며 대개 화면에 표시되며 원하는 요소를 찾기 위해 코드에서 배열로 검색되지 않습니다.

표준 및 다음 개발자가 주장스프라이트는 배경 규칙과 연관되어 있기 때문에 이것은 배경 요소 일 뿐이며 사이트 요소가 아닙니다. 페이지 요소의 그래픽 구성 요소는 img 태그를 조작해야합니다.

배경을 거의 알지 못하는 단순한 근거에 동의하기가 어렵습니다. 그것은 단순한 배경 일뿐입니다. 무엇보다 작은 요소 또는 전체 페이지 전체입니다.

한편, 그래픽 구성 요소는 스프라이트 사용에 심각한 장애물이됩니다.

합리적인 사용

"인터넷 기술"그리고 "첨단 기술"은 동의어로 간주됩니다. 사실 그것은 시간이 많이 걸리고 어떤 곳에서는 매우 낮은 기술 작업입니다. Sprite는 JavaScript 또는 PHP의 순수 프로그래밍과 필요한 기능 개발, 정보로 사이트 채우기 프로세스 설정 또는 백그라운드 백업 생성과 같은 기타 병목 현상과 구분되지 않습니다.

사용 된 시스템의 힘과 원근법사이트 관리는 실용적인 응용 프로그램의 미묘한 차이로 인해 때로는 평준화되며, 수동으로 자원을 개발하면 일반적으로 하나 또는 다른 알고리즘을 1001 번 다시 작성해야합니다.

위의 맥락에서, 그것은 합리적으로 중요합니다.현대적인 도구가 제공하는 모든 것을 사용하는 한계. 하나를 다른 사람에게 해가되는 것에 열성적으로 적용해서는 안되며 사이트 건물의 황금률은 다음과 같이 말합니다 : 가능한 한 빨리 작업을 넘겨야하는 방법을 생각할 필요가 없습니다. 예기치 않은 상황이 발생했을 때 신속하게 해결할 수 있도록 실행하는 방법 어떤 문제.

</ p>>