CSS image sprites

이미지 스프라이트는 단일 이미지에 삽입된 이미지의 모음이다.

이미지가 많은 웹 페이지는 로드하는 데 시간이 오래 걸리고 여러 서버 요청을 생성할 수 있다.

이미지 스프라이트를 사용하면 서버 요청 수가 줄어들고 대역폭이 절약된다.

CSS image sprite - 예제

세 개의 개별 이미지를 사용하는 대신 이 단일 이미지("img_navsprites.gif")를 사용한다:

<!DOCTYPE html>
<html>
<head>
<style>
#home {
  width: 46px;
  height: 44px;
  background: url(img_navsprites.gif) 0 0;
}

#next {
  width: 43px;
  height: 44px;
  background: url(img_navsprites.gif) -91px 0;
}
</style>
</head>
<body>

<img id="home" src="img_trans.gif" width="1" height="1">
<img id="next" src="img_trans.gif" width="1" height="1">

</body>
</html>

<img id="home" src="img_trans.gif"> - src 속성을 비워 둘 수 없으므로 작은 투명 이미지만 정의한다.
표시된 이미지는 CSS에서 지정한 배경 이미지가 된다.
너비: 46px; 높이: 44px; - 사용할 이미지의 부분을 정의한다
background: url(img_navsprites.gif) 0; - 배경 이미지와 위치를 정의한다(왼쪽 0px, 위쪽 0px)

이것이 이미지 스프라이트를 사용하는 가장 쉬운 방법입니다. 이제 링크와 호버 효과를 사용하여 확장하려고 합니다.

CSS Image Sprites - Navigation 리스트 만들기

스프라이트 이미지("img_navsprites.gif")를 사용하여 탐색 목록을 생성한다.

링크가 될 수 있고 배경 이미지도 지원하므로 HTML 목록을 사용한다:

<!DOCTYPE html>
<html>
<head>
<style>
#navlist {
  position: relative;
}

#navlist li {
  margin: 0;
  padding: 0;
  list-style: none;
  position: absolute;
  top: 0;
}

#navlist li, #navlist a {
  height: 44px;
  display: block;
}

#home {
  left: 0px;
  width: 46px;
  background: url('img_navsprites.gif') 0 0;
}

#prev {
  left: 63px;
  width: 43px;
  background: url('img_navsprites.gif') -47px 0;
}

#next {
  left: 129px;
  width: 43px;
  background: url('img_navsprites.gif') -91px 0;
}
</style>
</head>
<body>

<ul id="navlist">
  <li id="home"><a href="default.asp"></a></li>
  <li id="prev"><a href="css_intro.asp"></a></li>
  <li id="next"><a href="css_syntax.asp"></a></li>
</ul>

</body>
</html>

위의 코드를 실행하면 아래 그림과 같다.

홈 이미지 스프라이트를 클릭하면 'default.asp'가 실행이 되고,

왼쪽화살표 이미지 스프라이트를 클릭하면 'css_intro.asp'가 실행이 되고,

오른쪽화살표 이미지 스프라이트를 클릭하면 'css_syntax.asp'가 실행이 된다. 위의 코드를 실행하면 아래 그림과 같다.

CSS image sprite - Navigation List 만들기 활용 예제

#navlist {position:position;} - 위치가 상대적으로 설정되어 내부에서 절대적으로 위치할 수 있다
#navlistli {margin:0;margin:0;list-style:margin;position:absolute;top:0;} - 마진 및 패딩이 0으로 설정되고, 목록 스타일이 제거되며, 모든 목록 항목이 절대적으로 위치한다.
#navlistli, #navlista{높이:44°C;display:block;} - 모든 이미지의 높이는 44°C 이다.

이제 각 특정 부품에 대한 위치 지정 및 스타일 지정을 시작한다:

#home {left:0px;width:46px;} - 왼쪽 끝까지 위치하며 이미지의 너비는 46px이다.
#home {background:url(img_navsprites.gif) 0 0;} - 배경 이미지와 위치를 정의한다(왼쪽 0px, 위쪽 0px)
#prev {left:63px;width:43px;} - 오른쪽에 63px 위치(#홈 너비 46px + 아이템 사이에 약간의 여유 공간), 너비는 43px이다.
#prev {background:url('img_navsprites.gif') -47px 0;} - 오른쪽에 배경 이미지 47px를 정의합니다(#홈 너비 46px + 1px 선 분할기)
#next {left:129px;width:43px;} - 오른쪽에 129px 위치(#prev 시작은 63px + #prev 너비 43px + 여유 공간), 너비 43px
#next {background:url('img_navsprites.gif') -91px 0;} - 오른쪽 배경 이미지 91px 정의 (#홈 너비 46px + 1px 라인 분할기 + #프리브 너비 43px + 1px 라인 분할기)

CSS Image Sprites - Hover Effect

이제 탐색 목록에 호버 효과를 추가하려고 한다.

팁: :hover 셀렉터는 링크뿐만 아니라 모든 요소에서 사용할 수 있다.

새 이미지("img_navsprites_hover.gif")에는 호버 효과에 사용할 내비게이션 이미지 3개와 이미지 3개가 포함되어 있다:

이 파일은 하나의 단일 이미지이며 6개의 별도 파일이 아니기 때문에 사용자가 이미지 위를 가리킬 때 로딩 지연이 발생하지 않다.

호버 효과를 추가하기 위해 코드 세 줄만 추가한다:

<!DOCTYPE html>
<html>
<head>
<style>
#navlist {
  position: relative;
}

#navlist li {
  margin: 0;
  padding: 0;
  list-style: none;
  position: absolute;
  top: 0;
}

#navlist li, #navlist a {
  height: 44px;
  display: block;
}

#home {
  left: 0px;
  width: 46px;
  background: url('img_navsprites_hover.gif') 0 0;
}

#prev {
  left: 63px;
  width: 43px;
  background: url('img_navsprites_hover.gif') -47px 0;
}

#next {
  left: 129px;
  width: 43px;
  background: url('img_navsprites_hover.gif') -91px 0;
}

#home a:hover {
  background: url('img_navsprites_hover.gif') 0 -45px;
}

#prev a:hover {
  background: url('img_navsprites_hover.gif') -47px -45px;
}

#next a:hover {
  background: url('img_navsprites_hover.gif') -91px -45px;
}
</style>
</head>
<body>

<ul id="navlist">
  <li id="home"><a href="default.asp"></a></li>
  <li id="prev"><a href="css_intro.asp"></a></li>
  <li id="next"><a href="css_syntax.asp"></a></li>
</ul>

</body>
</html>

#home a:hover {background: url('img_navsprites_hover.gif') 0 -45px;} - 3개의 호버 이미지 모두에 대해 동일한 배경 위치를 지정하고, 아래로 45px만 지정한다. 위의 코드를 실행하면 아래 그림과 같다. 홈 이미지에 마우스를 올려놓으면 홈 이미지 스프라이트가 그림자진것처럼 어둡도록 스타일을 지정하였다.

지금까지 CSS Image Sprite에 대한 정의, 활용 측면에서 네비게이션 리스트에서 활용, 호버 효과 등의 실습을 통해 개념을 익혔다.

꼭 손으로 눈으로 머리로 익히며 실습하기를 바란다.

모두 화이팅입니다.!!!

출처 : 이 글의 출처는 w3schools사이트를 참고하였으며 필자가 추가하여 정리한 글입니다.

저작자표시 비영리 변경금지

'HTML > CSS문법' 카테고리의 다른 글

CSS Form - input (0)	2023.09.07
CSS Attribute Selector(속성 선택자) (0)	2023.09.06
CSS image gallery (3)	2023.09.04
CSS dropdown (2)	2023.09.03
CSS 수평 네비게이션 바 (0)	2023.09.02

enjoyCoding

CSS image sprites

CSS image sprites

CSS image sprite - 예제

CSS Image Sprites - Navigation 리스트 만들기

CSS Image Sprites - Hover Effect

'HTML > CSS문법' 카테고리의 다른 글

댓글

티스토리툴바

CSS image sprites

CSS image sprites

CSS image sprite - 예제

CSS Image Sprites - Navigation 리스트 만들기

CSS Image Sprites - Hover Effect

'HTML > CSS문법' 카테고리의 다른 글

관련글

댓글

티스토리툴바