위의 두 사이트를 참고로 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로 작게 만들어서 사용한다. 단점으로는 글자색과 배경색이 다르면 아주 작게라도 나타난다는 문제점이 있다.

사족

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