[CSS] 하이퍼링크(a href) 글자 색상 변경하기

하이퍼링크의 이벤트별 색상 변경방법을 알아보자.

See the Pen Untitled by 날개를달다 (@pmdgstri-the-flexboxer) on CodePen.

a:link

아직 방문하지 않은 링크의 글자색을 정의한다.

기본색상은 파란색이다. 많은 사람들이 익숙한색

a:visited

사용자가 방문한 적이 있는 링크의 글자색을 정의한다.

기본색상은 보라색이다. 필자는 보통 link색상과 일치시켜둔다.

a:hover

마우스 오버시 링크의 글자색을 정의한다.

위 예제 테스트용에 마우스를 올리면 변경되는것을 확인할수 있다.

a:active

마우스 클릭시 링크의 글자색을 정의한다.

(여기서 클릭시란 마우스를 눌렀다가 떼기전까지의 시간입니다.)

마찬가지로 위 예제 테스트용을 클릭하고 마우스를 떼지 않으면 변경되는것을 확인할수 있다.

※ 위 예제는 편집 가능하니 마음에 드는 색상으로 편집 해봐도 됩니다.

주의사항

link -> visited -> hover -> active 순서로 배치하지 않으면 제대로 작동하지 않을수 있다.

관련글

[CSS] 하이퍼링크(a href) 밑줄 없애기 또는 변경하기/A>

날다의 운영환경
본체	DeskTop
O S	Windows11 Pro
Browser	Google Chrome