시작페이지로 즐겨찾기추가
로그인
회원가입 l 출석체크 l 마이페이지 l CGIMALL
자료실 사이트등록 랭킹100 프로그램리뷰 관리자추천자료 초보가이드
커뮤니티
전체 펼쳐보기
퀵메뉴링크 jquery , CSS , PHP , Javascript , 무료폰트 , ASP
상세검색
> 커뮤니티 > 골드팁 상세보기
커뮤니티 구인구직
사이트등록
현재접속자 새로고침
게시판타이틀 골드팁 / 상세보기
트위터로 보내기 미투데이로 보내기 싸이월드 공감
추천수 414 | 조회수 8,733 | 등록일 2005-11-17 13:58:41

닉네임

HappyCGI

제목

[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;}

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

추천스크랩소스보기 목록
jyume 2006-09-16 22:43:30
답글

미리보기가 않되네요..페이지를 찾을수 없다구 하네요--;;

이전게시글 [HTML] word-break:break-all, nowrap 유용하게 쓰기 2005-11-17 13:57:11
다음게시글 [html] 이미지 툴바를 없애보자 2005-11-17 14:02:15