in 웹 디자인

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개를 사용했다.

사용된 이미지 예제