웹 사이트 페이지를 꾸미기 위해 본문의 타이틀 부분을 텍스트 이미지로 만드는 경우가 자주 있다. 순수 HTML 코드에서는 헤드라인의 경우<h1>~<h7> 태그들을 이용하는 것이 원칙이지만 좀 더 페이지를 차별적으로 만드려는 사람들에겐 매력적이질 못하다. 웹에서는 다양한 글꼴을 사용할 수 없기 때문에 웹 페이지를 꾸미기 위해 타이틀 부분을 <h1>~<h7> 태그 대신 텍스트를 이미지로 만들어 사용하는 것도 바로 이런 이유 때문이다.

하지만 이럴 경우 검색엔진 로봇이 이 타이틀 부분을 인식하지 못하는 문제가 있다. 타이틀이 텍스트가 아니고 이미지이기 때문이다.

물론 img 태그의 alt 속성을 이용하여 작성하는 방법도 있지만 이보다 더 좋은 방법은 CSS를 이용하는 것이다. 즉, 타이틀에 해당하는 부분을 <h1>~<h7> 태그를 그대로 이용하여 작성하되 CSS 기법을 이용하여 이 텍스트 부분은 숨기고 대신 그 자리에 이미지를 삽입하는 것이다.

아래 "반갑습니다"란 이미지가 바로 그 예이다. 아래에 "반갑습니다"란 이미지만 나와 있지만 사실 HTML 소스 코드에는 <h3>반갑습니다</h3>가 그 자리에 들어 있다.

[예제]

반갑습니다

위 예제의 HTML 코드 부분은 다음과 같이 되어 있다.

<h3> 태그의 ID 속성에 "imgreplace"란 이름을 할당하였다. 이 속성을 통해 CSS 스타일을 적용하는 것이다. 그러면 이제 CSS 코드 부분을 살펴보도록 하자.

h3#imgreplace는 <h3> 태그의 imgreplace란 ID의 스타일을 재정의하는 부분이다. h3#imgreplace span은 imgreplace란 ID의 <h3> 태그 안에 들어 있는 <span> 태그의 스타일을 재정의하는 것이다.

우선 <h3> 태그로 정의한 텍스트 영역을 화면에 보이지 않게 하기 위해 imgreplace란 ID의 <h3> 태그내에 있는 <span> 영역을 화면에서 보이지 않게 만든다(display:none).

그리고 imgreplace란 ID의 <h3> 태그는 배경 이미지를(background-image) 텍스트 대신 삽입하고 싶은 이미지 경로로 잡아주고, 배경 이미지 반복 여부(background-repeat)를 반복하지 않음(no-repeat)로 설정한 후 이미지의 높이(height)를 설정해 준다.

이렇게 하면 화면에는 <h3> 부분에서 정의한 텍스트가 나타나지 않고 대신 텍스트 이미지가 나타나게 된다. 텍스트가 화면에는 나타나지 않지만 검색엔진은 소스 코드에 들어있는 <h3> 태그를 인식하기 때문에 향후 이 타이틀 부분도 검색엔진에 등록시킬 수 있게 된다.

위 예제를 포함한 전체 소스 코드를 간단히 정리하면 다음과 같다.