웹 페이지에서 링크를 클릭하거나 키보드 Tab 키로 이동했을 때, 해당 링크는 '포커스(focus)' 상태가 됩니다. CSS의 :focus 가상 클래스를 사용하면 이렇게 포커스가 맞춰진 링크의 색상을 자유롭게 변경할 수 있습니다.
색상 값은 색상 이름(예: red, blue), HEX 코드(예: #0000FF), RGB, RGBA, HSL 등 유효한 모든 CSS 색상 형식을 사용할 수 있습니다.
기본 문법
a:focus {
color: 원하는_색상값;
}예제
아래 코드를 실행하면 링크에 포커스가 맞춰졌을 때 글자색이 파란색(#0000FF)으로 변경되는 것을 확인할 수 있습니다.
<html>
<head>
<style>
a:focus {
color: #0000FF;
}
</style>
</head>
<body>
<a href = ""> 데모 링크입니다 </a>
</body>
</html>참고 사항
:focus 스타일은 단순히 디자인 요소를 넘어 접근성 측면에서도 중요합니다. 마우스를 사용하지 않는 사용자가 현재 어떤 요소에 위치해 있는지 시각적으로 인식할 수 있도록, 포커스 상태에는 배경색이나 밑줄 등 다른 시각적 효과를 함께 적용하는 것이 좋습니다.