CSS 이용한 Text를 이미지로 대체하기

요즘 부쩍 CSS에 관련된 글들을 많이 포스팅하고 있는데 데꾸벅이 가장 많이 사용하며, 실수도 하고 혹은 후배들에게 알려주고 싶은 부분이기 때문이다.  중간중간 CSS-TRICK의 글을 인용했음을 미리 알린다.

CSS Zengarden 사이트에 들어가서 스타일시트를 없앤후 보면 아래 그림과 같이 텍스트로만 나오는것을 볼 수 있을 것이다. 단순 텍스트가 어떻게 이미지로 대체되는지 그 방법에 대해서 알아보고 대부분의 CSS 관련 책이나 가이드에 제시해 주던 text-indent를 이용한 이미지 대체 문제를 좀더 심도있게 다루어 보고자 한다.

CSS기능을 끈상태의 CSSZengarden

마크업의 모든 제목이 <h>태그를 이용하여 구조적으로 만들어져 있다.

CSS기능을 사용한 CSSZengarden 

<h>태그의 텍스트를 이미지를 사용하여 좀더 비주얼하게 표현하였다.

1. 많이 쓰는 고전적인 방법 

HTML:

<h1 class="main-logo">Techbug</h1>

CSS:

h1.main-logo {

width: 350px; height: 75px;

background: url(images/header-image.jpg);

text-indent: -9999px;

}

이와 같이 사용하였을때 CSS기능을 끈다면 원래 텍스트파일인 Techbug가 나온다. 물론 이 방법이 나쁘지는 않지만 대부분의 사용자들은 CSS기능을 끄더라고 이미지를 보고 싶어한다는  문제점이 있다.

그래서 아래와 같은 새로운 방법에 대해서 생각해 본다.

2. 새로운 방법

HTML:

<h1 class="main-logo">

    <a href="#"><img src="images/header-image.jpg" alt="Techbug" /></a>

</h1>

CSS:

h1.main-logo {

width: 350px; height: 75px;

background: url(images/header-image.jpg);

text-indent: -9999px;

}

CSS는 위와 같은 방법으로 코딩되어 있으나 마크업자체는 변경되었다. 이와같은 방법으로 처리했을 경우 CSS기능을 끄더라도 이미지는 출력되며, 이미지 출력기능을 끄더라도 이미지의 대체텍스트인 "Techbug"를 그대로 사용자에게 보여줄수 있는 장점이 있다.

물론 위와 같이 <h1>태글를 사용하여 검색엔진에 의해 접근이 가능하게 하고 싶으나 대부분 개발자들은 로고를 이미지로 만들고 싶어하므로 위와 같은 방법으로 두가지 조건을 모두 만족 시킬수 있다.

• [Google.com] 이미지 대체와 구글
• [mezzoblue.com] 텍스트를 이미지로 대체하기
• 번역사이트

위의 두 사이트를 참고로 CSS 기능을 껐을때와 Image기능을 껐을때의 기능을 중심으로 9가지 방법들을 소개하고자 한다. [테스트 페이지]  몇가지 방법은 오래된 방법임을 밝히며 FF2, Opera9, Safari3, IE6에서 테스트 하였다.

Technique #1

<h1 id="technique-one">
	<span>CSS-Tricks</span>
</h1>

h1#technique-one {
	width: 250px;
	height: 25px;
	background-image: url(logo.gif);
}
h3#technique-one span {
	display: none;
}

참조:
이기술은 FIR(Fahrmer Image Replacement)를 참조하였으며 텍스트를 둘러싼 <Span>태그를 숨기고 부모객체인 <H1>태그에 백그라운드 이미지를 대체하였다. 이 방법은 텍스트를 이미지로 잘 대체하였으나 검색로봇에는 별로 좋지 않은 방법이다.

Technique #2

<h1 class="technique-two">
	CSS-Tricks
</h1>

h1.technique-two {
	width: 2350px; height: 75px;
	background: url("images/header-image.jpg") top right;
	margin: 0 0 0 -2000px;
}

참조:
Radu Darvas가 사용한 방법으로 복잡한 레이아웃에는 문제를 보이는 경우가 발생할수 있으며 다른 기술들 보다 그렇게  효과적이지는 않다.

 

Technique #3

<h1 class="technique-three">
	CSS-Tricks
</h1>

h1.technique-three {
	width: 350px; height: 75px;
	background: url("images/header-image.jpg");
	text-indent: -9999px;
}

참조:
Mike Rundle의 방법으로 요즘 가장 많이 사용되는 방법이기도 하다.  가장 간단한 방법이기도 하며 들여쓰기에 음수값을 집어넣어 텍스트를 왼쪽으로 밀어버린 방법이나 가끔 몇몇 브라우저에서는 원치않는 스크롤바가 생기기도 한다.

Technique #4

<h1 class="technique-four">
	<a href="#">
		<img src="images/header-image.jpg" alt="CSS-Tricks" />
	</a>
</h1>

h1.technique-four {
	width: 350px; height: 75px;
	background: url("images/header-image.jpg");
	text-indent: -9999px;
}

참조:
처음 이 방법을 제안한 사람은 알수 없으나 Phark이 사용했던 방법의 한가지이다. 또한 데꾸벅이 자주가는 Smashing Margazine의 헤더파일에 적용된 것이기도 하다. 텍스트노드 속성을 가진 <a>태그를 이용한 방법으로 위 3번째 방법과 동일하게 사용하였다. CSS기능을 끄고 Image기능을 켰을때 이미지가 보이기는 하나 문제는 웹호환성(Section508 :장애우를 위한 웹접근성 지침) 에 위배되는 경우가 생긴다. ALT의 텍스트가 일반적인 웹텍스트이긴 하나 검색엔진에는 효과적이지 못하다. 

 

Technique #5

<h1 class="technique-five">
	<img src="images/blank.gif" alt="CSS-Tricks" />
	<span>CSS-Tricks</span>
</h1>

h1.technique-five {
	width: 350px; height: 75px;
	background: url("images/header-image.jpg");
}
h1.technique-five span {
	display: none;
}

참조:
Radu Darvas가 사용했던 방법으로 1x1픽셀짜리 투명이미지를 마크업에 사용하였다. 이미지를 껐을때도 ALT속성으로 대체 텍스트를 제공할수 있다. 매우 효과적인 방법으기는 하나 CSS와 Image 모두 껐을 경우 텍스트가 두개 나타나는 효과가 발생한다.

 

Technique #6

<h1 class="technique-six">
	CSS-Tricks
</h1>

h1.technique-six {
	width: 350px;
	padding: 75px 0 0 0;
	height: 0;
	background: url("images/header-image.jpg") no-repeat;
	overflow: hidden;
}

참조:
Seamus Leahy와 Stuart Langridge가 사용했던 방법으로 padding값을 이용하여 높이를 지정하였으며 overflow속성을 이용해 스크롤링 버그를 해결하였다.  웹접근성관련하여 효과적인 방법이나 overflow:hidden으로 인해서 이미지가 커질경우 숨겨지는 버그가 있으며 옛날버전의 IE에서는 box Model Hack을 써야 하는 경우가 생긴다.

 

Technique #7

<h1 class="technique-seven">
	<span>CSS-Tricks</span>
</h1>

h1.technique-seven {
	width: 350px; height: 75px;
	background: url("images/header-image.jpg") no-repeat;
}
h1.technique-seven span {
       display: block;
	width: 0;
      height: 0;
      overflow: hidden;
}

참조:
Leon Dwyer가 사용했던 방법으로 이 기술은 overflow:hidden으로 width:0, height:0인 블럭-레벨 요소를 집어넣었다. 텍스트를 숨겨서 로고까지 읽던 스크린리더 사용자에게는 좋은 방법이다. (데꾸벅 주: 기본적으로 웹표준 유효성 체크를 통과하기 위해 항상 대체텍스트를 써야하는 이유로 기존 스크린 리더들은 쓰잘데기 없는 것 까지 읽어서 오히려 방해가 되는 경우가 있다.) 

 

Technique #8

<h1 class="technique-eight">
	<span></span>CSS-Tricks
</h1>

h1.technique-eight {
	width: 350px; height: 75px;
	position: relative;
}
h1.technique-eight span {
	background: url("images/header-image.jpg");
	position: absolute;
	width: 100%;
	height: 100%;
}

참조:
Levin Alexander가 사용한 방법으로 텍스트를 밀어넣는 대신 텍스트를 절대값위치로 항상 위쪽에 표시해야 하며 이미지를 투명한 이미지를 사용했을 경우 문제가 발생할 수 있다.

Technique #9

<h1 class="technique-nine">
	CSS-Tricks
</h1>

h1.technique-nine {
	width: 350px; height: 75px;
	background: url("images/header-image.jpg") no-repeat;
	font-size: 1px;
	color: white;
}

참조:
Russ Weakley가 사용했던 방법으로 다른 방법과 달리 텍스트를 숨기는것이 아니라 아예 1pix로 작게 만들어서 사용한다. 단점으로는 글자색과 배경색이 다르면 아주 작게라도 나타난다는 문제점이 있다.

사족

위 방법들이 정답이라는 뜻이 아니라 이 보다 더 좋은 방법도 있으리라 본다. 사실 국내의 웹표준을 지킨 다수의 웹사이트에서는 이보다 더 좋은 방법을 사용하고 있으리라 생각한다. 데꾸벅이 사용하는 방법들도 몇가지 있지만 같은 표현을 위해 얼마나 많은 방법들이 존재하는지 알 수 있었다.