글목록(li 태그) 표시에 대한 새로운 아이디어 :: HTML일반[SSISO Community]
 
SSISO 카페 SSISO Source SSISO 구직 SSISO 쇼핑몰 SSISO 맛집
추천검색어 : JUnit   Log4j   ajax   spring   struts   struts-config.xml   Synchronized   책정보   Ajax 마스터하기   우측부분

HTML일반
[1]
등록일:2008-04-01 14:16:34 (0%)
작성자:
제목:글목록(li 태그) 표시에 대한 새로운 아이디어

다음은 전형적인 글목록인 <li> 태그를 사용한 것이 아니다. 대신 특수 문자(•)를 이용하였다.

예제는 첨부한 파일을 참고하세요.

 

<a href="/channel/index.asp?cid=2"><span class="myBullet"></span>뉴스</a><br>
<a href="/channel/index.asp?cid=3"><span class="myBullet"></span>e비즈니스</a><br>
<a href="/channel/index.asp?cid=4"><span class="myBullet"></span>웹개발</a><br>
<a href="/channel/index.asp?cid=5"><span class="myBullet"></span>테크</a>

 

글목록 표시 •를 class가 myBullet인 <span> 태그로 감쌌다. 그렇다면 myBullet 클래스에 대한 스타일 정의는 어떻게 되어 있을까?

 

<style type="text/css">
<!--
a { text-decoration: none; color: #333333}
a:hover { text-decoration: none; color: #336699}
a .myBullet { color: silver}
a:hover .myBullet { color: #CC0000}
-->
</style>

 

myBullet 클래스에 대한 a태그 스타일과 a:hover에 대한 스타일을 정의한 것인데 a:hover 발생시 color 속성을 #CC0000으로 변경해 주는 것이 핵심이다.

 

어려운 내용은 아니지만 이런 기법을 통해 CSS에 대한 새로운 아이디어를 많이 얻을 수 있으리라 생각한다.

 

http://korea.internet.com/


[본문링크] 글목록(li 태그) 표시에 대한 새로운 아이디어
[1]
코멘트(이글의 트랙백 주소:/cafe/tb_receive.php?no=3416
작성자
비밀번호

 

SSISOCommunity

[이전]

Copyright byCopyright ⓒ2005, SSISO Community All Rights Reserved.