CSS로 링크 색상 설정하기
웹 페이지에서 링크는 브라우저 기본 설정에 따라 주로 파란색으로 표시됩니다. CSS를 사용하면 이러한 링크 색상을 원하는 색으로 자유롭게 변경할 수 있습니다.
링크 색상을 설정하려면 a:link 가상 클래스(pseudo-class) 선택자와 color 속성을 함께 사용하면 됩니다. 아래 예제 코드를 직접 실행해 결과를 확인해 보세요.
예제
<html>
<head>
<style>
a:link {
color:#000000
}
</style>
</head>
<body>
<a href = "">My Link</a>
</body>
</html>위 코드에서 a:link는 아직 방문하지 않은 일반 링크를 대상으로 하며, color:#000000은 해당 링크의 색상을 검정색으로 지정합니다. 이렇게 하면 브라우저의 기본 파란색 대신 지정한 색상이 적용됩니다.
참고: 링크 상태별 스타일 지정
링크는 상태에 따라 서로 다른 가상 클래스를 사용해 개별적인 스타일을 적용할 수 있습니다.
- :link – 아직 방문하지 않은 일반 링크
- :visited – 사용자가 이미 방문한 링크
- :hover – 마우스 커서를 올렸을 때
- :active – 클릭하는 순간
이처럼 링크의 상태별로 스타일을 조합하면 사용자에게 더 명확한 시각적 피드백을 제공하고, 웹사이트의 사용성과 디자인 완성도를 높일 수 있습니다.