CSS 하이퍼링크 꾸미기
CSS 하이퍼링크 꾸미기
ㆍ 이번글에서는 CSS로 링크에 Style을 입혀보겠습니다.
ㆍ 지난글에서 HTML 하이퍼링크 만드는법을 배웠으므로
그대로 가져와서 CSS 코드만 추가시켜보도록 하겠습니다.
ㆍ 하이퍼링크를 건 Text의 상태별 색깔을 변경시켜보도록
하겠습니다(마우스 올렸을때, 눌렀을때 등)
먼저 지난글에서
하이퍼링크 만드는법을
알아봤습니다.
CSS에서는
4가지정도 Style을
적용시켜보도록
하겠습니다.
방문하지 않은(열어보지 않은) 주소일 때 Text의 색깔
방문한(접속했었던) 주소일 때 Text의 색깔
접속을 하기 위해 하이퍼링크가 걸린 Text에 마우스를 올렸을때 색깔
접속을 하기 위해 하이퍼링크가 걸린 Text를 클릭했을때(마우스 때기 전) 색깔
먼저
방문하지 않은 하이퍼링크가 걸린 Text의 색깔
a요소를 선택자로 사용하여
스타일을 입혀주면 됩니다
a:link{
color:원하는색;
}
기본은 이렇게 적어주시면
됩니다.
그럼 적용시킨 코드를
한번 보도록 하겠습니다
<html>
<head>
<meta charset = "utf-8">
<style>
a:link {
color: green;
}
</style>
<title>Hello World</title>
</head>
<body>
<a href = "http://itpangpang2.tistory.com/" target="_blank">ITPANGPANG </a>
</body>
</html>
위와 같이
color:green;
방문하지 않은
사이트의 주소가 걸린
Text의 색깔을 초록색으로
바꿨습니다.
그리고 주소는 itpangpang뒤에
숫자 2를 붙였습니다.
본 주소는 이미 방문을 하였기 때문에..
결과를 한번 보도록 하겠습니다.
예 초록색으로
잘 나왔습니다.
그런데 저 밑줄..
은근히 거슬리지 않습니까?
개인차이겠지만..
전 저 밑줄까지 없애버리겠습니다.
그리고 이번엔 색깔을
rgb로 넣어보겠습니다.
밑줄을 없애기 위해서는
text-decoration: none;
을 추가해주시면 됩니다
코드로 확인해보시죠
<html>
<head>
<meta charset = "utf-8">
<style>
a:link {
text-decoration: none;
color: rgb(34, 116, 28);
}
</style>
<title>Hello World</title>
</head>
<body>
<a href = "http://itpangpang2.tistory.com/" target="_blank">ITPANGPANG </a>
</body>
</html>
이렇게 한줄을 추가하고
색깔도 rgb로 적용하고
실행결과를 보겠습니다
밑줄이 제거된 것을
확인 할 수 있습니다.
아 혹시 밑줄이
땡기시는 분은
text-decoration: underline;
none을 underline으로
바꾸시면 됩니다
자 다음은
방문한 적이 있는 주소가 하이퍼링크로 걸린 Text
나머지는 간단합니다
a:link에서 link부분을
visited로 살포시
바꿔주면 끝납니다
밑줄 여부는 아까처럼
text-decoration으로
해주시면 됩니다.
<html>
<head>
<meta charset = "utf-8">
<style>
a:visited{
color: blue;
}
a:link {
text-decoration: none;
color: rgb(34, 116, 28);
}
</style>
<title>Hello World</title>
</head>
<body>
<a href = "http://itpangpang.tistory.com/" target="_blank">ITPANGPANG </a>
<p><a href = "http://itpangpang2.tistory.com/" target="_blank">ITPANGPANG2 </a></p>
</body>
</html>
좀 요란하긴 하지만...
style 부분만
봐주시면 됩니다.
방금 말씀드린
a:visited
방문한적이 있는
text는 파란색
위에서 썼던
방문한적이 없는
text는 초록색으로
나타내었습니다.
결과로 보겠습니다
예 잘 나왔습니다.
ITPANGPANG 본래 주소는
자주 방문한 링크이므로
파란색으로 나왔습니다.
자 다음으로..
마우스 관련 스타일
2가지를
한번에 보겠습니다..
사실 별 거 아닌데
나눠 쓰니..
뭔가 이상해서 한번에..!
사용방법은
a:hover
a:active
입니다
a:hover은
Text에 마우스를 올렸을때(over)
색깔입니다.
a:active는
Text를 마우스로 클릭(손가락 때기전)
색깔입니다
코드 바로 본 후에
결과를 보겠습니다.
<html>
<head>
<meta charset = "utf-8">
<style>
a:visited{
color: blue;
}
a:link {
text-decoration: none;
color: rgb(34, 116, 28);
}
a:hover {
color: yellow;
}
a:active {
color: red;
}
</style>
<title>Hello World</title>
</head>
<body>
<a href = "http://itpangpang.tistory.com/" target="_blank">ITPANGPANG </a>
<p><a href = "http://itpangpang2.tistory.com/" target="_blank">ITPANGPANG2 </a></p>
</body>
</html>
보시는 대로 별거 없습니다
마우스를 올렸을때
노란색으로 바꾸고
클릭했을때
빨간색으로 바꿉니다.
결과로 보겠습니다.
첫번째는 위의 text에
마우스를 over했을때
(노란색 변경된것 확인)
두번째는 아래 text에
마우스를 over했을때
(노란색 변경된것 확인)
세번째는 위의 text를
클릭했을때
(빨간색 변경된것 확인)
네번째는 아래의 text를
클릭했을때
(빨간색 변경된것 확인)
빨간색 글씨가 2개씩
보이는건 클릭한
상태에서 일부러
드래그 해서...
그렇습니다..
다음은 JavaScript로
슝슝~
'웹(Web) > CSS' 카테고리의 다른 글
| inline, block 요소 (0) | 2016.12.11 |
|---|---|
| CSS 기본(font-size, color, background, border) (0) | 2016.11.12 |
| HTML문서에 .CSS Link하기(외부 스타일시트) (1) | 2016.10.03 |
| CSS로 표를 꾸며보자 (0) | 2016.07.03 |
| CSS로 Hello World 꾸미기(Internal Style tag) (0) | 2016.06.19 |