c26. CSS 이미지 스프라이트

CSS 이미지 스프라이트

이미지 스프라이트 (Image Sprites) 는 하나의 이미지 파일에 여러개의 이미지 들을 묶어 놓은 것을 말합니다.

게임을 만들 때나 웹 페이지를 만들 때 여러개의 이미지 들이 사용 되는데, 하나의 이미지 판에 여러 이미지를 배치한 것입니다.

많은 이미지를 갖는 웹 페이지는 이미지 로딩에도 시간이 오래 걸리고, 서버에도 다중 요청을 하게 됩니다.

이미지 스프라이트를 사용하면 (한번에 필요한 이미지를 내려 받으므로) 서버에 요청하는 횟수를 줄이고 데이터 전송량을 절감하게 됩니다.

아래의 하나의 스프라이트를 가지고, 각각의 아이콘을 클릭시 해당 사이트로 이동시키는 기능을 만들어 보겠습니다.

---

먼저 각각의 아이콘 별로 스프라이트 내에서의 영역을 알려주는 아이디 (#facebook) 를 하나씩 지정합니다.
#facebook {
    left: 0px;
    width: 100px;
    background: url('http://www.caltronics.info/images/unused/social-icons.example.png') 0 -100px;
}
화면에 보이게 될 이미지는 페이스북 아이콘 인데, <li> 태그의 배경 (background:) 으로 페이스북 아이콘 영역만 들어 가게 할 것입니다.

아이콘이 차지할 영역의 폭으로 100px 만큼 지정하였습니다. 이미지 스프라이트 하나당 100px 이기 때문입니다.

background: url('http://www.caltronics.info/images/unused/social-icons.example.png') 0 -100px;

배경 이미지를 지정하고, 사용할 영역이 있는 아이콘의 왼쪽, 위 좌표를 알려줍니다. (왼쪽 0, 위에서 -100px 부터 아이콘이 시작됨)

이렇게 선택된 아이콘에, 링크와 호버 효과 (hover effect) 를 줄 것입니다.

---

이 스프라이트 이미지를 가지고 네비게이션 바를 만들고자 합니다. 

HTML 리스트 태그 즉, <li> 태그를 사용하면 링크도 걸 수 있고 백그라운드 이미지도 지정할 수 있습니다.

<style>
#navlist {
position: relative;
}

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

#navlist li, #navlist a {
height: 76px;
display: block;
}
/*
#navlist {position:relative;} => ul 태그에 지정하여 ul 태그는 페이지의 흐름에 따라 상대적 위치를 갖게 하고, 내부의 li 태그는 절대위치를 갖게 할 것입니다.
#navlist li {margin:0;padding:0;list-style:none;position:absolute;top:0;} => li 태그는 ul 태그 내에서 마진, 패딩 을 모두 없애고 상위 ul 태그에 붙어 다니도록 절대위치로 지정하였습니다.ㅏ
#navlist li, #navlist a {height:76px;display:block;} => 모든 이미지 들이 76px 의 블록에 담길 것입니다.
*/

#twitter {
left: 0px;
width: 76px;
background: url('http://cdn3.crunchify.com/wp-content/uploads/2013/06/CSS-Sprite-Example.png') -2px -2px;
}
/* 이미지 폭 76px, 스프라이트에서 보여줄 시작점을 2, 2 로 하기 위해, 왼쪽으로 -2px, 위쪽으로 -2px 옮겼습니다. 스프라이트에 테두리 선이 있어서 이것이 안보이도록 하기 위함입니다.*/

#facebook {
left: 100px;
width: 76px;
background: url('http://cdn3.crunchify.com/wp-content/uploads/2013/06/CSS-Sprite-Example.png') -78px -2px;
}

#vimeo {
left: 200px;
width: 76px;
background: url('http://cdn3.crunchify.com/wp-content/uploads/2013/06/CSS-Sprite-Example.png') -228px -2px;
}

#twitter a:hover {
background: url('http://cdn3.crunchify.com/wp-content/uploads/2013/06/CSS-Sprite-Example.png') -2px -79px;
}
/* 호버 되었을 때 배경이미지가 스프라이트 내에서 2, 79 지점에서 시작됩니다. 따라서 스프라이트를 왼쪽으로 -2px, 위쪽으로 -79px 옮겼습니다.*/

#facebook a:hover {
background: url('http://cdn3.crunchify.com/wp-content/uploads/2013/06/CSS-Sprite-Example.png') -78px -79px;
}

#vimeo a:hover {
background: url('http://cdn3.crunchify.com/wp-content/uploads/2013/06/CSS-Sprite-Example.png') -228px -79px;
}

</style>
<ul id="navlist">
<li id="twitter"><a href="https://twitter.com/" target="_blank"></a></li>
<li id="facebook"><a href="https://www.facebook.com/" target="_blank"></a></li>
<li id="vimeo"><a href="https://vimeo.com" target="_blank"></a></li>
</ul>

---

이미지 스프라이트에 호버 효과 (hover effect) 를 주려면, #twitter a:hover {} 와 같이 a 태그에 :hover 가상-클래스 (즉, a 태그위로 마우스가 올라오면) 를 설정해 주면 됩니다.

우리의 스프라이트는 아래와 같이 4종류의 다른 색상을 가지고 있습니다. 이중에서 위의 예제에서는 두번째 이미지 들이 hover 상태에서 나타나도록 하였습니다.

스프라이트가 단일 이미지 이므로, 호버 되었을 때 이미지 로딩 지연이 발생하지 않습니다.

---

[광고] Udemy 동영상 강의로 보기