처음 블로그를 만들고 멋진 글을 남겨야한다는 압박에 보다시피 글을 쓰는 횟수가 저조하다.
점점 스스로 좁아지고 블로그가 의미가 없어진다는 느낌을 받는 순간.
보여주기 위한 블로그가 아닌 스스로 공부할 수 있는 블로그를 만들어보자는 생각을 했다.
그래서 쉽지만, 괜찮았던 결과물들을 정리해보는 방향으로 설정했다.
혹시 유치한 예제들을 만나면 그냥 읽지 않아도 된다. ㅋㅋ

Rollover(롤오버)메뉴를 만들때 기존에는 javascript의 도움을 받아왔다.
난 개발자가 아니기 때문에 기존에 사용하는 사이트에서 긁어오거나 에디터에서 자동으로 생성되는 소스를 그대로 사용했던 기억이 있다.
그런데, CSS로 Rollover메뉴를 쉽게 만들 수 있는 방법을 아는 순간 경악했다.
이런 간단한 방법이 있단 말인가! 왜 몰랐지.
역시 공부를 해야해…. 라며 자책했다.
소스? 어마어마하게 줄어든다. 게다가 전혀 모르는 소스가 아닌 아는 소스라는 사실!

Html

<ul id="tab">
	<li id="gi"><a href="#">채용정보</a></li>
	<li id="ht"><a href="#">헤드헌팅</a></li>
</ul>

CSS

#tab {
	list-style:none;
}
#tab li {
	float:left;
}
#gi a {
	display:block;
	width:60px;
	height:25px;
	text-indent:-5000px;
	background:url(/cssdic/ex/rollover/01.gif) no-repeat left top;
}
#ht a {
	display:block;
	width:60px;
	height:25px;
	text-indent:-5000px;
	background:url(/cssdic/ex/rollover/02.gif) no-repeat left top;
}
#gi a:hover {
	background-position:0 -25px;
}
#ht a:hover {
	background-position:0 -25px;
}

위 방법은 html에서 메뉴를 이미지가 아닌 텍스트로 구성하고, 이미지 대체 기법으로 작업한 것이다.
그냥 바로 메뉴 이미지를 넣고 해도 무방하다. (text-indent 삭제)

원리는 CSS의 :hover가상클래스를 이용한 방식이다.
마우스 on상태와 over상태의 두 상황이미지를 하나로 만들고,
마우스 on시에 :hover가상클래스를 이용해 위치값을 변경해서 이미지가 바뀌게 하는 것이다.

 

이 방식말고도 여러 방식들이 가능하고, IE에서는 버그(?)도 있다.
버그 관련해서는 따로 포스팅 할 기회가 있을 것 같다.

어쨌든 디자이너들은 이 방식으로 개발자한테 당당해지자!!!
별것도 아닌걸 가지고 콧대세우는 개발자말이다……..