메뉴 같은 곳의 마우스 오버 효과를 낼때 사용되는 기법중에 좀 특이한 것이 있습니다. 사이트들 둘러볼때도 가끔 보이고, 최근에는 어떤분이 메일로 물어보시기도 하고, 웹 접근성 연구소에 질문이 올라와있기도 합니다. 처음 이 기법을 봤을 때는 이걸 왜 이런식으로 만들었나 의아해 하면서도 많이 사용안되는 기법이라고 생각하고 무시해 왔는데, 생각보다 많이 사용하고 있는 기법인 것 같습니다.

<style type="text/css">
#menu a img.menuon {
	display: none;
}
#menu a img.menuoff {
	display: inline;
}
#menu a:hover img.menuon {
	display: inline;
}
#menu a:hover img.menuoff {
	display: none;
}
</style>

<!-- ... 중략 ... -->

<ul id="menu">
	<li>
		<a href="menu1.html">
			<img src="menu1_off.png" class="menuoff" alt="메뉴1">
			<img src="menu1_on.png" class="menuon" alt="메뉴1">
		</a>
	</li>
	<li>
		<a href="menu2.html">
			<img src="menu2_off.png" class="menuoff" alt="메뉴2">
			<img src="menu2_on.png" class="menuon" alt="메뉴2">
		</a>
	</li>
	<li>
		<a href="menu3.html">
			<img src="menu3_off.png" class="menuoff" alt="메뉴3">
			<img src="menu3_on.png" class="menuon" alt="메뉴3">
		</a>
	</li>
</ul>

이렇게 이미지 두개를 사용하여 자바스크립트를 사용하지 않고 CSS를 이용해서 이미지 롤 오버 효과를 만드는 기법입니다. 자바스크립트를 사용하지 않고 CSS만으로 이미지 롤오버 효과를 만들어 내는 재미있는 방법이지만 큰 문제가 있는 방법이기도 합니다. 바로 HTML에 이미지 두개가 사용된다는 것입니다. 의미적으로 봐서 메뉴에 해당하는 이미지는 하나면 충분하고 그 옆에 있는 이미지는 중복된 콘텐츠입니다.

웹표준이나 웹접근성을 고려하여 콘텐츠를 제작할 때 중요한 것이 HTML, CSS, 자바스크립트를 구분하여 사용해야 한다는 것입니다. 아마 많이들 들어보셨고 CSS로 디자인을 분리하는 것들이 이것에 포함되는 것은 다들 알고 계실 것입니다. 여기에 들어있는 좀 더 깊은 의미는, HTML로 해야 하는 일을 CSS나 자바스크립트로 하지 않고, CSS로 할일을 HTML이나 자바스크립트로 하지 않고, 자바스크립트로 해야 할 일을 CSS나 HTML로 하지 않는 다는 것입니다. 각각의 영역을 다른 것들이 침범하지 않게 한다는 것입니다.

위에 사용된 예는 롤오버된 이미지를 보여주는 자바스크립트로 해야 하는 동적인 일을 HTML과 CSS로 처리를 해서 문제가 발생된 것입니다. 자바스크립트를 자제해서 사용해야 한다고 말은 하지만 그렇다고 자바스크립트를 써야 하는 곳에도 사용하지 말라는 의미는 아닙니다. 오히려 이런 경우와 같이 억지로 자바스크립트를 사용하지 않다보면 그 부작용이 더 커지게 됩니다.

HTML은 콘텐츠를, CSS는 콘텐츠의 표현을, 자바스크립트는 동적인 기능을 담당하고 있습니다. 각 기술들의 역할을 충분히 이해하고 적절한 곳에 최소화하여 사용하는 것이 중요합니다.