이미지 처리하는 방법(Image Replacement , Image Sprite)
- 퍼블리셔/css
- 2011. 2. 21. 06:00
이미지 확장자에 대한글과 이미지를 만들때 배경색을 넣어서 만드는 방법을 알아봤습니다.
여기서 배경색을 넣어서 만드는 방법은 png파일을 ie 6 에서 보여질때 다른 브라우져와 동일하게 보여지기 위한 방법이였습니다.
그럼 위의 기법에 대해서 잠깐 알아보겠습니다.
Image Replacement : 의미있는 어떤 요소를 이미지로 처리하고 요소에 해당하는 텍스트 넣되 시각적으로는 안보이게 하는 방법입니다.이 기법의 장점은 접근성을 떨어뜨리지 않으면서도 검색엔진으로부터 높은 가중치를 받을 수 있다는 점 입니다.
Image Sprite : 이미지 파일을 하나로 합쳐서 배경으로 처리하는 것으로 웹 문서 전송 속도를 높이는 기법 입니다.
자세한 것은 설명을 예를 들면서 이야기 하겠습니다.
예를들어 티스토리의 스킨을 예로 들어 보겠습니다. 그중에 타이틀 부분의 html 은 아래와 같습니다.
<div id="title">
<h1><a href="[#\#_blog_link_##]" title="[#\#_title_##]"><span>[#\#_title_##]</span></a></h1>
</div>
css 를 볼까요?
#title h1 a{
width:730px; /* 너비 */
height:100px; /* 높이 */
background:url(images/button.png) no-repeat 0 0; /* 배경 */
display:block; /* 블럭지정 */
}
필요에 따라서 display:inline-block; 로 지정하기도 합니다.
배경으로 지정하는 이미지는 크기가 위에서 지정한 너비와 높이로 되어야 정확하게 맞겠죠.
저의경우 블로그에 사용된 이미지 하나 하나를 모두 합쳐서 하나의 이미지로 만들었습니다.
그런다음 배경으로 지정했는데요. 배경에 보면 -800이라고 나온것이 있습니다.
코드를 먼저 보시죠.
#title h1 a{
width:730px;
height:100px;
background:url(images/button.png) no-repeat 0 -800px;
display:block;
margin-top:20px;
}
배경의 속성은 background:이미지주소 반복여부 위치 배경색; 이렇게 지정이 되는데요. 지정을 안하면 기본으로 지정이 됩니다.
즉 배경색의 경우 지정을 안했기때문에 기본값으로 나옵니다.
또 하나 0 과 -800 이 나오는데요.
0은 왼쪽에서 부터의 거리이고 , -800 은 위에서 800px 만큼 떨어져있다는 겁니다.
즉 x값 , y값이 되는거죠.
왼쪽에 붙어있으니 0px 가 되고 위에서 800만큼 내려왔으니 -800px 를 지정한겁니다.
아래이미지를 보시면 많은 이미지가 있다고 가정하시고 그중에 노랑색 이미지가 현재 설정하는 title h1 a에 해당하는 이미지라고 하면 아래처럼 보입니다.
배경을 지정했으면 <span> 으로 감싼부분을 안보이게 처리합니다.
#title h1 span{
text-indent:-9999px;
}
text-indent :이 속성은 블럭(block)에서 텍스트 첫번째 줄의 들여쓰기를 지정합니다. 음수값도 적용이 되기때문에 -9999px 줌으로써 화면상에는 안보이게 하는것입니다.
하지만 검색엔진에는 걸린다든가, 인쇄시는 보인다는 점도 참고하시면 됩니다.
이와 비슷하게 display:none; 를 적용한다든가, visibility:hidden 를 사용해서 안보이게 하는것도 효과는 거의 같습니다.
하지만 text-indent 를 보편적으로 많이 사용합니다.