링크는 기본적으로 밑줄을 가지고 있습니다.
보통 링크를 작성할 때 a 태그를 사용하게 되는데
단순히 a 태그만을 사용한다면 흔하게 볼 수 있는 기본 디자인의 링크로 생성이 됩니다.
이 링크를 CSS를 활용하여 다양하게 디자인 할 수가 있는데요.
간단한 예제를 들어보겠습니다.
<a href="http://www.happycgi.com">기본 링크</a>
위와 같이 입력하면
흔히 볼 수 있는 링크입니다.
기본적으로 링크는 밑줄을 가지고 있습니다.
이 링크의 밑줄 디자인을 변경하려면 아래와 같이 CSS 스타일을 주면 됩니다.
<!-- 밑줄 디자인 -->
<STYLE type="text/css">
a.undertest{
text-decoration: none;
border-bottom: 1px solid green;
padding-bottom: 2px;
}
</STYLE>
<a class="undertest" href="http://www.happycgi.com">링크 밑줄 간격, 색상</a>
<!-- 밑줄 디자인 -->
a 링크의 CSS 스타일 클래스명을 undertest로 정의하였으며
text-decoration: none; 속성은 밑줄의 장식을 없음으로 정의합니다.
border-bottom: 1px solid red; 속성은 밑줄의 굵기를 1px로 하고 색상을 red로 정의합니다.
padding-bottom: 2px; 속성은 밑줄과 문자 간격을 2px 띄우는 것으로 정의합니다.
그러면 결과를 확인 해보겠습니다.
밑줄의 간격이 a 태그를 사용했을 때 보다 떨어져있고
색상도 빨간색이 된 것을 확인할 수 있습니다.
CSS를 활용하면 링크의 디자인을
클릭하기 전, 클릭중일 때, 방문한 링크 3가지로 꾸밀 수도 있습니다.
<!-- 링크 3가지 속성 디자인 -->
<STYLE type="text/css">
a.undertest1{
text-decoration: none;
}
a.undertest1:hover{
color: red;
border-bottom: 1px solid red;
padding-bottom : 2px;
}
a.undertest1:active{
color: #A826FA;
border-bottom : 3px solid #A826FA;
padding-bottom : 2px;
}
a.undertest1:visited{
color: #5FFFEC;
border-bottom : 5px solid #5FFFEC;
padding-bottom : 2px;
}
</STYLE>
<a class="undertest1" href="http://www.happycgi.com">CSS 링크 디자인</a>
<!-- 링크 3가지 속성 디자인 -->
위와 같이 CSS와 a 태그를 정의했습니다.
링크가 처음 나타나는 모양을 확인 해보겠습니다.
링크가 걸린 문장임에도 밑줄이 나타나지 않습니다.
a.undertest1{
text-decoration: none;
}
위 속성으로 인해 밑줄이 사라졌기 때문입니다.
마우스를 올리면 글자와 밑줄이 빨간색으로 변합니다.
a.undertest1:hover{
color: red;
border-bottom: 1px solid red;
padding-bottom : 2px;
}
undertest1 클래스의 hover 일 경우에는
그 아래 입력된 속성을 따릅니다.
링크를 클릭하는 중에는 글자와 밑줄이 RGB값 #A826FA로 변했고
밑줄의 굵기가 3px로 굵어졌습니다.
a.undertest1:active{
color: #A826FA;
border-bottom : 3px solid #A826FA;
padding-bottom : 2px;
}
링크를 클릭하는 중에는 active에 입력된 속성을 따라갑니다.
방문을 한 링크는 글자와 밑줄이 RGB값 #5FFFEC로 변했고
밑줄의 굵기가 5px로 더 굵어졌습니다.
a.undertest1:visited{
color: #5FFFEC;
border-bottom : 5px solid #5FFFEC;
padding-bottom : 2px;
}
방문한 링크의 스타일은
visited에 입력된 속성을 따릅니다.
위의 예제를 잘 활용하면 나만의 링크 디자인을 마음껏 만들 수 있을 것입니다. ^^
|
