실질적인 소스 파일:
index.html 파일:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>검색엔진 최적화를 위한 CSS 팁 1</title>
<link rel="stylesheet" href="css/styles.css" type="text/css" />
</head>
<body>
<div class="wrapper">
<h1><a href="http://www.bmlee.com">검색엔진 최적화</a></h1>
</div>
</body>
</html>
styles.css 파일:
h1
{
width: 148px;
height: 36px;
background: url(http://www.bmlee.com/seo/images/logo.gif) no-repeat top;
text-indent: -99999px;
}
h1 a
{
display: block;
width: 148px;
height: 36px;
}
대충 아시겠지만, 굳이 설명을 드리자면, 현재 CSS 파일에는 h1 태그에 대한 속성만 있습니다.
h1의 속성에는 백그라운드에 로고 이미지를 깔아주었고, 이미지의 가로와 세로값을 넣어두었습니다.
중요한 부분은 text-indent 인데 이부분이 h1 태그에 들어가는 텍스트를 99999px 만큼 화면의 왼쪽으로 보내버리는 부분입니다. 그래서 소스보기에
는 텍스트가 있지만 실질적인 화면에서는 보이지 않는 것입니다.
'px' 대신 'em'을 써도 무관합니다.
그리고 h1 a 는 h1 내에있는 링크의 속성을 나타내는데요, 이부분에 이미지의 가로와 세로값을 정해주고 display를 block으로 설정해 주셔야만 로고
의 크기만큼 클릭이 가능한 부분으로 만들수 있습니다.
어쩌면 <img src="images/logo.gif" alt="검색엔진 최적화"> 처럼 사용하시는 분들도 계시겠지만, 그보다는 위의 예제처럼 CSS를 사용하여 <h1>
태그내에 텍스트와 이미지를 동시에 집어넣는것이 검색엔진 최적화에 더 효과적입니다.
<h1> 대신 상황에 따라 <h2>나 <h3>를 사용해도 무관합니다.
별로 어렵지 않으면서도 쉽게 검색엔진 최적화를 시작할수 있는 방법입니다.
유용하다고 생각하시면 적극 응용하시길 바랍니다.
발췌 http://www.seo-korea.com/