[css] 링크(link) 클릭했을 때, 마우스올렸을 때 (visited, hover, active) 07

[css] 링크(link) 클릭했을 때, 마우스올렸을 때 (visited, hover, active)

이번 글에서는 css에서 링크를 꾸며주는 속성을 알아보도록하겠습니다.

원래 html에서는 a태그를 사용해서 속성을 주게되면 링크를 걸 수 있었습니다.

a에 href에 주소를 입력해서 말이죠. target을 통해서 클릭시액션도 지정할 수 있었습니다.

하지만 css에서는 링크의 기본색상 그리고 클릭했을 때 색상

클릭을 할 때 그 순간색상, 이미 방문한 링크일 때 색상을 설정할 수 있습니다.

이것을 해보도록 하겠습니다.

저 같은 경우는 위와 같이 코드를 짯습니다.

첫번째 a:link 선택자를 사용하면 기본 링크의 스타일을 지정할 수 있습니다.

색상은 파란색을 주었고요. 원래 링크에는 기본으로 밑줄이 생기는데

text-decoration속성에서 none를 사용해서 밑줄을 제거했습니다.

a:visited 속성은 보면 살짝 아시겠죠?

바로 한 번 이상 방문 한 링크게 대해서 스타일을 지정하는 것 입니다.

#00ff00을 사용해서 초록색으로 지정했습니다. rgb아시죠?

그 다음 a:hover속성입니다.

이 건 그냥 마우스를 갖다가 댔을 때 스타일을 지정할 수 있습니다.

방문했건 안했건 지정하게되면 따르게 됩니다.

그 다음은 a:active속성입니다.

이 속성을 사용하게되면 클릭하는 그 찰나의 순간을 스타일할 수 있습니다.

청록색으로 지정해 주었습니다.

위에서 저는 그냥 테스트를 위해 링크를 만들었습니다.

이때 사용할 수 있는 것이 #입니다.

#은 임시링크로서 클릭해도 아무런 연결이 없습니다.

홈페이지를 개발하거나 일부가 아직 개발이 안된 경우에 이런 임시링크를 사용합니다.

그래서 테스팅시 아주 편리하게 사용이 가능하죠.

이렇게 css에서 사용하는 링크효과 4가지를 알아보았습니다.

감사합니다.

●줄간격 정렬, 밑줄 (text-align-decoration,line-height) 04

●글자에 그림자 넣기 text-shadow (+글꼴, 크기 : font-family-size) 05

●글자 굵게 기울기 속성 (font-style, -weight) 아작내버리기 06