HTML CSS 하이퍼링크 a태그 기본 색상 변경 방법 (body link, alink, vlink)
지난 시간에는 a링크의 텍스트에 밑 줄이 들어가는것을 없애는 방법 및 더 자세한 옵션 활용 방법을 알아봤습니다. 이번에는 a링크의 기본 색상을 변경하는 방법에 대해 알아볼 것입니다. 이 부분도 지난 시간에 살짝 언급을 했었습니다. 링크 텍스트의 기본 색상은 파란색, 한 번 클릭한, 그러니까 최소 한 번이라도 방문한 링크 페이지는 보라색으로 바뀐다는 것을 말입니다. 여러분들께서 직접 구글에서 어떤것을 검색하시고 그 결과에 대한 링크들을 유심히 살펴보세요. 아직 방문하지 않은 검색글은 파란색 텍스트가, 방문한 사이트는 보라색 텍스트 링크로 바뀌어 있을테니까요. 본문에서는 이런 상황별 색상 변경 방법에 대해 안내를 해드릴 것입니다. HTML에서 그리고 CSS에서 사용하는 방법 두 가지를 모두 알려드리겠습니다.
HTML
HTML의 a태그에 직접 사용하는 인라인 방식의 사용법이 있습니다. 방법은 아래와 같습니다.
<body text="#555;" link="#f53;" alink="#ff0;" vlink="#f0f;">
<a href="https://rgy0409.tistory.com" target="_blank">친절한효자손 취미생활</a>
</body>다만 HTML에서의 사용 방법은 a태그가 아닌 body에 직접 사용한다는 것입니다. 즉 이렇게되면 모든 a태그에 일괄 적용이 됩니다. 각 옵션에 대한 설명은 다음과 같습니다.
text : 텍스트 색상
link : 한 번도 방문하지 않은 링크 색상
alink : 클릭하는 동안 색상
vlink : 최소 1회 방문한 링크 색상
이렇습니다. body에 사용하기에 보편적으로 HTML에서의 링크 색상 적용 방법은 현재는 잘 사용하지 않는 편입니다. 구버전에서의 HTML에서 사용했던 방법 중 하나입니다. 그냥 이런것도 있다는걸 알아만 두시면 될 것 같습니다.
CSS
스타일링의 꽃인 CSS에서 링크 태그를 직접 제어해주는것이 훨씬 편리하며 관리에도 용이합니다. 기본 형태는 다음과 같습니다.
See the Pen CSS a link basic color settings by rgy0409 (@rgy0409) on CodePen.
이렇게 쉽고 간편하게 설정이 가능합니다. 각 옵션에 대한 설명은 다음과 같습니다.
a태그만 있는 경우 : 하이퍼링크 텍스트 기본 색상
a:visited : 최소 1회 이상 방문한 하이퍼링크 색상
a:hover : 링크에 마우스를 올렸을 때 변하는 색상
a:active : 링크를 클릭하는 동안 변하는 색상
어렵지 않죠? 백문이 불여일견입니다. 한 번 보는 것 보다는 직접 코드를 입력해 결과를 체험해 보시는게 기억에 오래 남는 법입니다. 바로 실행에 옮겨보시기 바랍니다. 끝.
