콘텐츠마케팅

라이트 모드와 다크 모드에서 CSS 스프라이트를 사용하는 방법

CSS 스프라이트는 웹 개발에서 사용되는 기술입니다. HTTP 웹 페이지에서 만든 요청. 여러 개의 작은 이미지를 하나의 큰 이미지 파일로 결합한 다음 CSS를 사용하여 해당 이미지의 특정 섹션을 웹 페이지의 개별 요소로 표시합니다.

CSS 스프라이트 사용의 주요 이점은 웹 사이트의 페이지 로드 시간을 개선하는 데 도움이 될 수 있다는 것입니다. 이미지가 웹 페이지에 로드될 때마다 별도의 HTTP 요청이 필요하므로 로드 프로세스가 느려질 수 있습니다. 여러 이미지를 단일 스프라이트 이미지로 결합하여 페이지를 로드하는 데 필요한 HTTP 요청 수를 줄일 수 있습니다. 이렇게 하면 특히 아이콘 및 버튼과 같은 작은 이미지가 많은 사이트의 경우 더 빠르고 반응이 빠른 웹 사이트가 될 수 있습니다.

CSS 스프라이트를 사용하면 브라우저 캐싱을 활용할 수도 있습니다. 사용자가 웹사이트를 방문하면 브라우저는 첫 번째 요청 후 스프라이트 이미지를 캐시합니다. 이는 브라우저가 이미 이미지를 캐시에 가지고 있기 때문에 스프라이트 이미지를 사용하는 웹 페이지의 개별 요소에 대한 후속 요청이 훨씬 빨라진다는 것을 의미합니다.

CSS 스프라이트는 예전만큼 인기가 없습니다.

CSS 스프라이트는 이전만큼 인기가 없을 수도 있지만 여전히 사이트 속도를 개선하는 데 일반적으로 사용됩니다. 대역폭이 높기 때문에 형식, 이미지 압축, 콘텐츠 전송 네트워크(CDN), 게으른 로딩강력한 캐싱 기술, 우리는 웹에서 예전만큼 많은 CSS 스프라이트를 볼 수 없습니다… 여전히 훌륭한 전략이지만. 많은 작은 이미지를 참조하는 페이지가 있는 경우 특히 유용합니다.

CSS 스프라이트 예제

CSS 스프라이트를 사용하려면 CSS를 사용하여 스프라이트 이미지 파일 내에서 각 개별 이미지의 위치를 ​​정의해야 합니다. 이것은 일반적으로 다음을 설정하여 수행됩니다. background-imagebackground-position 스프라이트 이미지를 사용하는 웹 페이지의 각 요소에 대한 속성입니다. 스프라이트 내에서 이미지의 x 및 y 좌표를 지정하여 개별 이미지를 페이지에 별도의 요소로 표시할 수 있습니다. 다음은 예입니다… 단일 이미지 파일에 두 개의 버튼이 있습니다.

CSS 스프라이트 예제

왼쪽의 이미지를 표시하려면 div에 다음을 제공할 수 있습니다. arrow-left 클래스로 좌표는 해당 면만 표시합니다.

.arrow-left {
  width: 200px;
  height: 200px;
  background: url('sprite.png') no-repeat 0 0;
}

오른쪽 화살표를 표시하려면 div의 클래스를 다음과 같이 설정합니다. arrow-right.

.arrow-right {
  width: 200px;
  height: 200px;
  background: url('sprite.png') no-repeat -200px 0;
}

밝고 어두운 모드를 위한 CSS 스프라이트

이것의 흥미로운 용도 중 하나는 밝고 어두운 모드입니다. 어두운 배경에서는 보이지 않는 어두운 텍스트가 있는 로고나 이미지가 있을 수 있습니다. 나는 라이트 모드를 위한 화이트 센터와 다크 모드를 위한 다크 센터가 있는 버튼의 이 예를 만들었습니다.

CSS 스프라이트 라이트 다크

CSS를 사용하면 사용자가 밝은 모드를 사용하는지 어두운 모드를 사용하는지에 따라 적절한 이미지 배경을 표시할 수 있습니다.

:root {
  --sprite-image: url('sprite.png');
  --sprite-width: 200px;
  --sprite-height: 400px;
  --sprite-x-light: 0;
  --sprite-y-light: 0;
  --sprite-x-dark: -200px;
  --sprite-y-dark: 0;
}

@media (prefers-color-scheme: dark) {
  :root {
    --sprite-x-light: 200px;
    --sprite-x-dark: 0;
  }
}

.icon {
  width: 32px;
  height: 32px;
  background: var(--sprite-image) no-repeat var(--sprite-x-light) var(--sprite-y-light);
}

.icon:hover {
  background-position: var(--sprite-x-dark) var(--sprite-y-dark);
}

예외: 이메일 클라이언트가 이를 지원하지 않을 수 있음

Gmail과 같은 일부 이메일 클라이언트는 밝은 모드와 어두운 모드 사이를 전환하기 위해 제공된 예제에서 사용되는 CSS 변수를 지원하지 않습니다. 즉, 다른 색 구성표에 대해 다른 버전의 스프라이트 이미지 간에 전환하려면 대체 기술을 사용해야 할 수도 있습니다.

또 다른 제한 사항은 일부 이메일 클라이언트가 다음과 같이 CSS 스프라이트에서 일반적으로 사용되는 특정 CSS 속성을 지원하지 않는다는 것입니다. background-position. 이로 인해 스프라이트 이미지 파일 내에서 개별 이미지를 배치하기 어려울 수 있습니다.

Douglas Karr

Douglas Karr 의 CMO입니다. 오픈인사이트 그리고 설립자 Martech Zone. Douglas는 수십 개의 성공적인 MarTech 스타트업을 도왔고, Martech 인수 및 투자에서 5억 달러가 넘는 실사를 도왔으며, 기업이 판매 및 마케팅 전략을 구현하고 자동화하도록 지속적으로 지원하고 있습니다. Douglas는 국제적으로 인정받는 디지털 혁신이자 MarTech 전문가이자 연설가입니다. Douglas는 Dummie's Guide와 비즈니스 리더십 서적을 집필한 작가이기도 합니다.

관련 기사

맨 위로 가기 버튼
닫기

애드블록 감지됨

Martech Zone 은(는) 광고 수익, 제휴 링크 및 후원을 통해 사이트에서 수익을 창출하기 때문에 이 콘텐츠를 무료로 제공할 수 있습니다. 사이트를 볼 때 광고 차단기를 제거해 주시면 감사하겠습니다.