CSS로 활성 링크 주변의 점선 테두리 제거하는 방법

하이퍼링크를 클릭하거나 키보드로 포커스를 이동하면 기본적으로 링크 주변에 점선(outline)이 나타납니다. 이는 브라우저의 기본 동작으로, 사용자가 현재 어떤 요소에 포커스가 있는지 시각적으로 알려주는 접근성 기능입니다. 하지만 디자인상 이 점선이 거슬린다면 CSS의 outline 속성을 활용해 손쉽게 제거할 수 있습니다.

해결 방법

링크 요소와 활성(active) 상태, 포커스(focus) 상태의 outline 속성을 none으로 선언하면 됩니다.

a, a:active, a:focus {
    outline: none;
}

예제 코드

실제 예제를 통해 활성 링크 주변의 점선을 제거하는 방법을 살펴보겠습니다.

<!DOCTYPE html>
<html>
<head>
<title>CSS로 링크 주변 점선 제거하기</title>
</head>
<style>
div {
    color: #000;
    padding: 20px;
    background-image: linear-gradient(135deg, #dc3545 0%, #9599E2 100%);
    text-align: center;
}
a, a:active, a:focus {
    outline: none;
}
</style>
<body>
<div>
<h1>HTML Links Demo</h1>
<a href="https://google.com" target="_blank">Go To Google</a>
</div>
</body>
</html>

실행 결과

위 코드의 실행 결과는 다음과 같습니다.

적용 전

링크를 클릭하면 주변에 점선 테두리가 표시됩니다.

CSS로 활성 링크 주변의 점선 테두리 제거하는 방법

적용 후

outline: none; 스타일을 적용하면 링크 클릭 시 점선이 더 이상 나타나지 않습니다.

CSS로 활성 링크 주변의 점선 테두리 제거하는 방법

참고 사항

점선을 제거하면 디자인은 깔끔해지지만, 키보드 사용자가 현재 포커스 위치를 파악하기 어려워질 수 있습니다. 접근성을 고려한다면 :focus-visible 선택자를 사용해 마우스 클릭 시에는 outline을 숨기고, 키보드 탐색 시에는 유지하는 방식을 권장합니다.