CSS 포지셔닝 예제

CSS만으로 롤오버 이미지 만들기라는 지난 글에서 CSS의 Opacity(불투명도) 속성을 이용하여 롤오버 이미지를 만들었다. Opacity 속성은 IE, FF, NN의 3대 브라우저에서 제공하는 속성으로 W3C의 CSS2 기준에 없는, 즉 비표준 스타일 요소이다. 브라우저가 제대로 표현해주는 것에서 만족한다면 Opacity 는 훌륭한 CSS 속성이다. 하지만 웹표준에 관심이 있거나 이를 지키려 노력한다면, CSS 포지셔닝을 이용해서 Opacity를 표현할 수 있다.

올블로그는 국내 블로그 매타 사이트의 양대 산맥 중 하나이다. 올블로그 메인페이지에서 좌측 하단에 위치한 배너들을 CSS 포지셔닝을 이용하여 롤오버 이미지 버튼으로 만들어 봤다. 예제는 이곳에서 확인할 수 있다.

사용된 CSS :

body {margin: 0; padding: 0;}
.banner {margin: 10px; width: 160px;}
.banner p {font: 14px/20px san-serif;}
ul, ul li {list-style: none;	margin: 0;	padding: 0;}
ul li a{
	display: block;
	height: 50px;
	margin: 5px 0;
	text-decoration: none;
	text-indent: -5000px;
	background-position: top left;
	background-repeat: no-repeat;
}
ul li a:hover {background-position: 0 -55px;}
#allblog a {background-image: url(allbolg.gif);}
#d-korea a {background-image: url(dynamickorea.gif);}
#dokdo a {background-image: url(dokdo.gif);}

참고로 아래 그림과 같은 배경이미지 3개를 사용했다.