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

사용된 이미지 예제

댓글 남기기

  1. 오오 좋은 롤오버 팁이네요. 번거롭게 자바스크립트 사용할 필요도 없고 구태여 이미지를 2개나 불러올 필요도 없고… 좋은 팁 감사합니다. 블로그 스킨 만들때 적극 활용해야겠네요 ^^;

  2. 사실 CSS:opcity 속성을 이용하는 편이 더 편리하답니다. CSS2에서는 아직 opacity 속성을 규정하진 않지만, 대부분의 브라우저가 자체적으로 제공하고 있기 때문입니다.

    아마 CSS3에서는 정식 속성이 되지 않을까요? ^_^