CSS 하이퍼링크 꾸미기

Posted by ITPangPang
2016.06.20 23:46 웹(Web)/CSS


CSS 하이퍼링크 꾸미기



ㆍ 이번글에서는 CSS로 링크에 Style을 입혀보겠습니다.


ㆍ 지난글에서 HTML 하이퍼링크 만드는법을 배웠으므로

    그대로 가져와서 CSS 코드만 추가시켜보도록 하겠습니다.


ㆍ 하이퍼링크를 건 Text의 상태별 색깔을 변경시켜보도록 

    하겠습니다(마우스 올렸을때, 눌렀을때 등)



먼저 지난글에서

하이퍼링크 만드는법을

알아봤습니다.

(HTML에서 하이퍼링크 걸기)


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로 

슝슝~

저작자 표시 비영리 변경 금지
신고
이 댓글을 비밀 댓글로