background 속성 7 - image sprite

배경에 이미지를 넣을 때, 

하나의 이미지 안에 여러개의 이미지를 만들어 넣어

background-position으로 배경이미지를 보이도록 해주는 기법으로,

브라우저에 웹페이지를 로딩할 때 속도를 줄여주기 위해 많이 사용하는 방법이다.

이미지의 좌측 상단이 기준점(0,0) 이므로,

기준점으로 위치를 이동시켜주는 식으로 사용한다.

예를 들어 상단으로 가져오게 되면,

이미지의 위쪽 방향으로 이동시켜야 하므로, 음수(-)방향으로 좌표의 거리만큼 이동시키고

이미지의 좌측 방향으로 이동시켜야 하므로, 음수(-)방향으로 좌표의 거리만큼 이동시킨다.

네이버의 경우 로고를 배경이미지로 사용하려면, 많은 이미지가 있는 .png파일에서 

로고의 위치를 찾아 이미지의 (0,0) 좌표까지의 거리를 재서, 음수방향으로 보내서 로고의 이미지를 배경이미지가 들어갈 자리에 올라오도록 한다. 

블록안에 배경이미지를 활용해 로고를 넣어보자!

 

 

문서 안에 로고가 들어갈 자리에 블록요소(h1)을 넣고, CSS에서는 배경이미지와 배경이미지의 위치속성을 이용해 자리를 잡는다.

이때, 전체 이미지에서 상단에서 317px 위치에 있는 로고를 (0,0) 좌표로 이동해야 하므로, 

background-position 속성에 left, -317px을 넣어 위로 이동 시킨 것이다. 

※ 주의 : 양수가 아닌, 음수방향으로 이동해야 위로 간다. 

 

---

/*css영역*/
h1{
		width:450px;
		height:105px;
		border:1px solid #aaa;
		background-image: url('img/bg_sprite.png');
		background-repeat:no-repeat;
		background-position:left -317px;
}
    
<!--html태그영역-->    

<h1></h1>  

 

배경이미지를 활용해 가로배치 해보자!

 

---

 

 

 

이미지의 위치를 측정하고, 상단에서 떨어진 거리와 좌측에서 떨어진 거리만큼을 잰다. 

각 li태그 안에 배경이미지로 넣고 background-position을 맞춰준다. 

---

/*CSS영역*/

	#imoti>li{
		list-style:none;
		width:36px;
		height:36px;
		float: left;
		margin-right: 40px;
		background-image: url('img/bg_sprite.png');
	}
	#imoti>li:nth-child(1){
		background-position: -840px -184px;
	}
	#imoti>li:nth-child(2){
		background-position: -840px -224px;
	}
	#imoti>li:nth-child(3){
		background-position: -840px -264px;
	}
	#imoti>li:nth-child(4){
		background-position: -840px -304px;
	}
    
    
<!--HTML영역-->

<ul id="imoti">
	<li></li>
	<li></li>
	<li></li>
	<li></li>
 </ul>

 

---

배경이미지의 크기 background-size

px로 절반의 비율로 나타낸 로고!

 

50%로 줄인 경우

 

---

배경이미지의 크기가 일반 웹브라우저의 1:1비율이 아니라, 2배로 제작된 경우에는 그 비율을 절반으로 줄여서 배경이미지를 활용해야 한다.

이때 배경이미지 크기의 단위는 length나 비율 모두 가능하다.

length는 CSS문법에서 사용하는 길이단위를 모두 사용할 수 있다.

그러나, 이미지 크기를 비율(%)로 줄이면, 

배경이미지를 감싸고 있는 상위요소인 div의 크기에 대해 비율로  배경이미지가 통째로 들어간다. 

이를 해결하기 위해, 따라서 고정값(px)으로 줄이고, position을 맞춰준다. 

 

---

/*CSS영역*/
div{
		width:225px;
		height:52px;
		border:1px solid #aaa;
		background-image: url('img/bg_sprite.png');
		background-repeat:no-repeat;
		background-size: 50%;
		background-position:0 0;		
		/*
		이미지 크기를 비율(%)로 줄이면, 
		배경이미지를 감싸고 있는 상위요소인 div의 크기에 대해 비율로 
		배경이미지가 통째로 들어간다. 
		따라서 고정값(px)으로 줄이고, position을 맞춰준다. 
		*/
	}
    
   <!--HTML영역-->
    <div></div>

 

 

---

 

메뉴영역에 배경이미지를 활용한 리스트를 만들자!

 

여기서 메일과 TV메뉴 좌측에는 인라인요소(span)로 태그를 작성하고, 이 곳에 각각의 클래스이름을 부여한 후, 

배경이미지 위치값을 정리하면 된다.

이때, span요소는 인라인 요소이므로 공간의 크기가 적용되지 않으므로, inline-block으로 변경해야 한다. 

그리고, 원래 이미지보다 절반의 크기를 넣으므로, 

위의 로고를 줄인 방법대로 배경이미지의 크기를 절반으로 줄인후, position을 기존 크기의 절반 거리만큼 이동시킨다. 

---

/*CSS영역*/
#gnb{
		list-style:none;
	}
	#gnb li{
		float:left;
		padding:10px;
	}
	#gnb a{
		color:#333;
		font-size:15px;
		text-decoration:none;
		font-weight:bold;
	}
	#gnb .green>a{
		color:#03c75a;	
	}
	.mail, .tv{		
		display:inline-block;
		background-image: url('img/bg_sprite.png');
		background-repeat: no-repeat;
		background-size: 440px 410px;/*880px 820px*/
		vertical-align:top;
	}
	.mail{
		width:21px;
		height:21px;
		background-position: -228px -386px;
		margin:-3px 8px 0 0;
	}
	.tv{
		width:12px;
		height: 14px;
		background-position: -256px -212px;
		margin:4px 8px 0 0;
	}
    

<!--HTML영역-->
<ul id="gnb">
	<li class="green"><a href="#">
		<span class="mail"></span>메일
	</a></li>
	<li class="green"><a href="#">카페</a></li>
	<li class="green"><a href="#">블로그</a></li>
	<li class="green"><a href="#">지식iN</a></li>
	<li class="green"><a href="#">쇼핑</a></li>
	<li class="green"><a href="#">Pay</a></li>
	<li class="green"><a href="#">
		<span class="tv"></span>TV
	</a></li>
	<li><a href="#">사전</a></li>
	<li><a href="#">뉴스</a></li>
	<li><a href="#">증권</a></li>
	<li><a href="#">부동상</a></li>
	<li><a href="#">지도</a></li>
	<li><a href="#">영화</a></li>
	<li><a href="#">VIBE</a></li>
	<li><a href="#">책</a></li>
	<li><a href="#">웹툰</a></li>
 </ul>

 

 

[이미지 출처]위의 이미지는 네이버 배경 이미지