웹솔루션개발 22년 노하우! 해피CGI의 모든것

[해피CGI][cgimall][HTML] 스타일로 표현할 수 있는 여러가지 링크모양 본문

웹프로그램밍 자료실/알짜자료 골드팁

[해피CGI][cgimall][HTML] 스타일로 표현할 수 있는 여러가지 링크모양

해피CGI윤실장 2016. 11. 10. 09:22
우리가 처음 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;}
...................................................................................
효과미리보기

 

 

 

홈페이지바로가기 

저작자표시

'웹프로그램밍 자료실 > 알짜자료 골드팁' 카테고리의 다른 글

[해피CGI][cgimall][html] 가는 테이블 만들기  (0) 2016.11.16
[해피CGI][cgimall][HTML] word-break:break-all, nowrap 유용하게 쓰기  (0) 2016.11.14
[해피CGI][cgimall][html] 이미지 툴바를 없애보자  (0) 2016.11.08
[해피CGI][cgimall] [PERL] DBD 설치시 에러 대처법  (0) 2016.11.04
[해피CGI][cgimall] 다중 파일첨부여부 자바스크립트로 테스트하기  (0) 2016.11.02
공유하기 링크
'웹프로그램밍 자료실/알짜자료 골드팁' Related Articles more
Comments