아이디 비밀번호 | 회원가입 | 비밀번호분실
   
 새로운소식
 FAQ
 웹프로그램
 웹DB
 웹서버
 웹프로그램수정
 해피칼럼
 골드팁
 
제작의뢰
웹프로그램 판매몰
 
현재위치: 메인 해피포럼 황금 : 게시물 읽기
  2005-11-17 (13:58:41) from 211.199.40.171
  작성인 : HappyCGI 조회수 : 6833   
제목 : [HTML] 스타일로 표현할 수 있는 여러가지 링크모양

 

우리가 처음 HTML을 배울때 기본적으로 접하게 되는 링크는 퍼런색 글씨에 밑줄이 좌악 그어져 있으며
그것도 모자라 누르고 난 링크는 튀튀한 보라색으로 죽은듯한 색상으로 변하게 됩니다.;;;
여기서도 역시 우리의 갈증을 풀어줄 녀석은 스타일시트가 되겠습니다.
우선 스타일시트내에서 링크설정방법을 알아본 후에 사례별 탐구를 해보도록 하겠습니다.

#1.스타일시트 내에서 링크의 설정방법
<style type="text/css">
a:link {color:#1E5893; text-decoration:none; }
a:visited {color:#1E5893; text-decoration:none; }
a:active {color:#1E5893; text-decoration:none; }
a:hover {color:#448CF9; text-decoration:underline; }
</style>
위의 태그를 <head></head>태그 사이에 넣어시면 해당문서의
모든 링크에 위의 설정이 적용됩니다.


a:link - 일반적으로 눈에 보이는(방문한적이 없는) 링크의 기본모양.
a:visited - 방문한 적이 있는 링크의 모양.
a:active - 활성화된 상태에서의 링크의 모양.(링크가 눌린상태)
a:hover - 마우스가 오버됐을 때 변화하는 모양.

--------------------------------------------------------------------------------------------------------

일반적으로는 위의 모양처럼 폰트 색상(color)과 텍스트의 모양(text-decoration)정도의 설정만 해서 모양을
만드는 경우가 많지만 기타의 경우도 아래쪽에서 살펴보도록 하겠습니다. 

#2.여러가지 적용예제
a:link {color:#1E5893; text-decoration:none; }
a:visited {color:#1E5893; text-decoration:none; }
a:active {color:#1E5893; text-decoration:none; }
a:hover {color:#448CF9; text-decoration:none; }
...................................................................................
효과미리보기

a:link {color:#1E5893; text-decoration:none; }
a:visited {color:#1E5893; text-decoration:none; }
a:active {color:#1E5893; text-decoration:none; }
a:hover {color:#448CF9; text-decoration:underline; }

...................................................................................
효과미리보기

a:link {color:#1E5893; text-decoration:none; }
a:visited {color:#1E5893; text-decoration:none; }
a:active {color:#1E5893; text-decoration:none; }
a:hover {color:#448CF9; text-decoration:underline overline; }

...................................................................................
효과미리보기

a:link {color:#1E5893; text-decoration:none; }
a:visited {color:#1E5893; text-decoration:none; }
a:active {color:#1E5893; text-decoration:none; }
a:hover {color:#448CF9; text-decoration:none;background:#FDF3C4;}

...................................................................................
효과미리보기

a:link {color:#1E5893; text-decoration:none; }
a:visited {color:#1E5893; text-decoration:none; }
a:active {color:#1E5893; text-decoration:none; }
a:hover {color:#448CF9; text-decoration:none;font-weight:bold}

...................................................................................
효과미리보기

a:link {color:#1E5893; text-decoration:none; }
a:visited {color:#1E5893; text-decoration:none; }
a:active {color:#1E5893; text-decoration:none; }
a:hover {color:#448CF9; text-decoration:none;border-bottom:1 dotted #E0450A}

...................................................................................
효과미리보기

a:link {color:#1E5893; text-decoration:none; }
a:visited {color:#1E5893; text-decoration:none; }
a:active {color:#1E5893; text-decoration:none; }
a:hover {color:#448CF9; text-decoration:none;border:1 dotted #0000FF;}

...................................................................................
효과미리보기




HappyCGI's SIGN
개발자의 미덕은

게으름(Laziness)
참지말기(Impatience)
교만(Hubris)


   메모
jyume
2006-09-16
22:43:30
미리보기가 않되네요..페이지를 찾을수 없다구 하네요...--;;

:네맞아요: :화나는군요: :잠와: :우울해: :이건아냐: :왕하하: 왕웃음~ 놀램~

  

 
제목
작성인
조회
등록일
[HTML] 스타일로 표현할 수 있는 여러가지 링크모양
HappyCGI
6834
2005-11-17
 



  HOME | 회사소개 | 제작의뢰 | 개인정보취급방침 | CGIMALL | 자료실 | 사이트등록 | 랭킹100 | 포럼 | 초보가이드 | 질문과답변 | 배너광고
Copyrightⓒ1997~2008 HappyCGI All rights reserved
Powered By HappyCGI