중복된 이미지 태그 두개를 사용한 CSS 롤오버 효과

June 30, 2009 11:57 PM

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

<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에 이미지 두개가 사용된다는 것입니다. 의미적으로 봐서 메뉴에 해당하는 이미지는 하나면 충분하고 그 옆에 있는 이미지는 중복된 콘텐츠입니다. 이미지 태그를 두개 사용하여 CSS를 껐을 때 메뉴 이미지가 두개씩 나오고 있다.

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

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

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

Trackbacks

TrackBack URL: http://hyeonseok.com/soojung/trackback.php?blogid=535
  • 이미지 롤오버.... from HTML문서로 이어지는 Web세상

    음...신현석님의 블로그에서 이미지가 마우스 롤오버 이벤트를 가질때 두개의 이미지를 가지고 css로 효과를 냈을때에 문제점에 대해서 작성한 포스트가 있는데... 솔직히 한번도 그렇게 사용...

Comments

  • HFK 2009-07-01 18:07

    처음엔 CSS에서 백그라운드 이미지 두 장을 통해 롤오버 효과를 내는거였나 싶었는데, 자세히 보니 아예 IMG를 두개씩 넣어버렸네요; 스타일을 꺼버리면 이미지가 두 개씩 중복되어 나타나겠죠? 어떻게 보면 참 희한한 발상이긴 한데..;; 좀 그렇네요.

  • 연가시 2009-07-03 22:07

    예제가 잘못된 게 아닌가요?
    저대로라면 menuon 이 계속 보이지 않을텐데요.

  • 신현석 2009-07-05 11:07

    CSS가 지원될 때에는 menuon이 보이지 않습니다. 이미지는 CSS를 제거한 모습입니다. 혼란스러운 것 같아서 이미지 순서를 좀 바꿨습니다.

  • 연가시 2009-07-06 13:07

    아뇨, 이미지가 아니라 위의 소스 얘기였는데요. menuon 을 display: none 하고 나서 마우스를 올리면 menuoff 를 none 으로 하고 menuon 을 inline 으로 해야 하는 게 아닌가 싶어서요. 저대로라면 마우스를 올려도 계속 menuoff 부분만 보이지 않나요.

  • 신혀석 2009-07-06 14:07

    아, 그렇군요! 수정했습니다. 알려주셔서 감사합니다.

  • 이슬빛 2009-09-06 17:09

    자주 쓰던 방식인데 접근성이 문제가 된다고 해서 사용하지 않고 있습니다.
    하지만 요긴하게 쓸수 있었던 방식이죠^ㅡ^
    CSS로 롤오버시에 레이어를 띄우는 방법도 있었는데 아직 완벽하지 않아서 쓰지 않고 있습니다만 정말 재미 있죠 CSS.... 자스를 이렇게 팠으면 현석님이 준 완벽가이드를 이렇게 골치아프게 보고 있지 않을텐데...어려운 자스..ㅠ_ㅠ)

  • 뚱이마덜 2009-12-09 15:12

    소스 잘 봤는데.. ie6버젼에선 적용이 되지 않던데. 왜그런건가요? ㅠㅠ

  • 신현석 2009-12-09 23:12

    IE6에서는 안되네요. 좋은 방법이 아니니 사용하지 마세요. :)

  • kiere 2010-07-09 01:07

    제가 뭔가 잘못 알고 있는지는 몰라도 <a> 태그를 이용해서 링크하고
    CSS 에서 위치만 정의해주면 큰 문제는 없는것 같은데요. 파이어폭스로
    상기 소스에서 스타일 부분 제거하면 그냥 텍스트만 나오지 이미지는 나오지 않습니다.

  • 신현석 2010-07-09 09:07

    텍스트냐 이미지냐가 문제가 아니라 콘텐츠가 두번 중복되는게 문제입니다.

Post a comment

:

: 공개 되지 않습니다. Gravatar를 표시 합니다.

:

: HTML 태그를 사용할 수 없습니다.