CSS 포지셔닝 예제
2005.04.17 ,
오후 02:15 
웹 디자인 
2 comments »
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개를 사용했다.
Hooney라는 ID로 온라인에서 활동하는 조훈입니다. 
2개의 의견이 있습니다. | 당신의 의견을 바랍니다.
1.
Reidin ｜
2005.04.17 ,
오후 10:30 ·
permallink
오오 좋은 롤오버 팁이네요. 번거롭게 자바스크립트 사용할 필요도 없고 구태여 이미지를 2개나 불러올 필요도 없고… 좋은 팁 감사합니다. 블로그 스킨 만들때 적극 활용해야겠네요 ^^;
2.
hooney ｜
2005.04.17 ,
오후 11:09 ·
permallink
사실 CSS:opcity 속성을 이용하는 편이 더 편리하답니다. CSS2에서는 아직 opacity 속성을 규정하진 않지만, 대부분의 브라우저가 자체적으로 제공하고 있기 때문입니다.
아마 CSS3에서는 정식 속성이 되지 않을까요? ^_^
당신의 의견을 바랍니다..
사용할 수 있는 HTML 태그 :
<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>