지난 8월 10일에 있었던 CSS & 웹표준 실무 적용 워크샵에서의 질문을 블로그를 통해서 답해드립니다. 작은 카메라용 크로스 가방을 매고 있던 여성분인데. 이 예제 글이 도움이 되길 바랍니다.

제목에 고급이라는 단어를 붙였듯이, 이 방법은 기존의 CSS 롤오버 버튼을 만드는 방법보다 효율으로 버튼을 만들 수 있는 방법입니다. 기존처럼 CSS 포지셔닝을 이용하되, 1개의 배경이미지로 마우스 오버와 아웃 때 둥근 모서리의 배경이미지를 바꿀 수 있습니다.

이 방법은 하나의 버튼보다는 여러개의 버튼들로 구성된 탭 네비게이션에서 보다 효율적으로 사용할 수 있으며, 완성된 네비게이션에서 HTML 코드를 확인하실 수 있습니다.

배경이미지 : (text zoom을 고려하여 크게 만들었음)

사용된 CSS :

* {
	margin:0;
	padding:0;
	}

body {
	font:normal .75em/1.5em "돋움", Dotum, AppleGothic, verdana, sans-serif;
	background:#65BEDC;
	}

a {
	text-decoration:none;
	}

#header { /*자식 요소들을 쉽게 위치시키기 위해 상대적인 위치를 부여*/
	position:relative;
	width:60em;
	height:10em;
	margin:10em auto;
	border:3px solid #fff;
	background:#94D5E6;
	}

#nav { /*부모(header)를 참조한 절대적인 위치*/
	position:absolute;
	bottom:0;
	left:2em;
	}

	#nav li {
		float:left;
		list-style:none;
		margin-right:.5em; /*오른쪽 배경이미지를 위한 여백*/
		background:#2395B6 url(bg-nav.png) 0 -40px no-repeat;
		}

		#nav li a {
			display:block;
			padding:.75em 1.5em .25em 1em;/*#nav li에서 지정된 여백을 제외하고 설정*/
			margin-left:5px;
			background:#2395B6 url(bg-nav.png) 100% -40px no-repeat;
			color:#fff;
			font-weight:bold;
			}

	#nav li:hover,
	#nav li.active {
	background-color:#fff;
		background-position:0 0;
		}
		#nav li:hover a,
		#nav li a:hover,
		#nav li.active a {
		background-color:#fff;
		background-position:100% 0;
		color:#369;
		}

의견을 남겨boa요~