본문 바로가기
공부/웹디자인

드림위버 ) 텍스트 하이퍼링크(롤오버 등)

by Ohming 2011. 12. 29.
336x280(권장), 300x250(권장), 250x250, 200x200 크기의 광고 코드만 넣을 수 있습니다.
출처 : 실력이 탐나는 드림위버 CS5

롤오버 할때 거의 이미지로 작업을 하곤 했었는데 CSS로 작업을 해도 깔끔하게 예쁜 것 같다.
이미지 낭비할 필요없이 말이다. 그래서 이 방법도 까먹게 될까봐 기록!

이게 기본 텍스트 하이퍼링크인데 파란색들이 보기 싫다.
그래서 먼저 'a'에 속성을 주자

글씨색과 padding을 지정해서 텍스트 하이퍼링크 메뉴 상하좌우에 안쪽 여백을 생성했다.

그리고선 하이퍼링크의 롤오버 상태 선택자 'a:hover',  하이퍼링크 활성 상태 선택자 'a:active'의 속성을 함께 지정하였다.

글씨 색은 흰색, 글의 배경색을 회색으로 주어서 마우스를 갖다대면 회색 배경의 희색글씨로 바뀌도록 하였다.

그래서 이게 완성! 오오 이쁘다 이뻐. 쓸만하다.


댓글