티스토리 뷰

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

css link 사용하기

이번 글에서는 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

댓글
댓글쓰기 폼
네이버 이웃추가
«   2019/10   »
    1 2 3 4 5
6 7 8 9 10 11 12
13 14 15 16 17 18 19
20 21 22 23 24 25 26
27 28 29 30 31    
글 보관함