CSS 강좌 / 링크 꾸미는 방법

CSS로 링크를 꾸밀 때는 평소에도 링크임을 알아볼 수 있는 표시를 남기고, 방문 여부·마우스·키보드 상태를 각각 설정합니다. 기본 밑줄을 유지하고 :link·:visited·:hover·:active의 색상과 :focus-visible의 윤곽선을 구분하면 이동할 수 있는 대상과 현재 조작 중인 대상을 확인하기 쉽습니다.

링크의 기본 모양을 먼저 정하기

a {
  text-decoration: underline;
  text-underline-offset: 0.15em;
}

링크는 href가 있는 a 요소로 만듭니다. 글자를 파란색으로 칠하는 것만으로는 실제 링크가 되지 않습니다. 밑줄은 색을 구분하기 어려운 독자에게도 이동 가능한 부분을 알려 줍니다. text-underline-offset은 글자와 밑줄의 간격을 조절합니다. 여기서 em은 링크의 글자 크기를 기준으로 합니다.

“클릭”처럼 목적지를 알 수 없는 문구보다 “방문 안내”처럼 연결 내용을 설명하는 이름을 사용하세요. 일반 링크를 버튼처럼 보이게 만들기 전에 탐색인지 동작인지 구분해야 합니다. 다른 문서로 이동하는 요소는 링크, 현재 화면에서 동작을 실행하는 요소는 보통 button이 적합합니다.

네 가지 색상 상태와 규칙 순서

a:link { color: #1756a9; }
a:visited { color: #6b438c; }
a:hover { color: #b53239; }
a:active { color: #8a2630; }

여러 상태가 동시에 맞을 수 있습니다. 방문한 링크 위에 마우스를 올리면 visited와 hover가 겹칩니다. 위 예제처럼 선택자 우선순위가 같고 같은 속성을 지정했다면 뒤에 있는 규칙이 적용됩니다. 따라서 link → visited → hover → active 순서를 쓰면 방문 여부와 관계없이 마우스를 올린 색과 누르는 색을 확인하기 쉽습니다. 각 상태의 선택 조건은 상태를 선택하는 가상 클래스에서 다른 조건 선택자와 함께 비교합니다.

이 순서가 모든 규칙을 이기는 것은 아닙니다. 더 구체적인 선택자나 다른 캐스케이드 조건이 있으면 결과가 달라집니다. 색이 바뀌지 않을 때는 개발자 도구에서 어떤 color 선언이 적용되는지 확인하세요. :active는 선택한 메뉴를 계속 표시하는 상태가 아닙니다. 현재 페이지 메뉴 표시가 필요하면 별도 클래스나 aria-current 같은 의미 표시를 함께 검토합니다.

키보드 포커스는 눈에 보이게 남깁니다

a:focus-visible {
  outline: 3px solid #e58c1f;
  outline-offset: 3px;
}

포커스는 키보드 입력을 받을 대상을 뜻합니다. Tab으로 링크에 이동했을 때 현재 위치가 보이지 않으면 사용자가 어디에서 Enter를 눌러야 할지 알기 어렵습니다. :focus-visible은 브라우저가 포커스 표시가 필요하다고 판단하는 상황에 적용됩니다. 보통 키보드 이동에서 나타나지만 모든 클릭·입력 상황을 단순히 두 종류로 나누는 것은 아닙니다. 링크와 같은 초점 원리를 입력 요소에 적용할 때는 입력창의 초점과 오류 상태를 구분하세요.

outline은 요소 주변에 윤곽선을 그립니다. outline-offset은 요소와 선 사이의 간격입니다. 원래 포커스 표시를 outline: none으로 없애고 대체 표시를 제공하지 않는 방식은 피하세요. 예제는 밑줄과 윤곽선을 동시에 유지합니다. 동작 조건은 MDN의 :focus-visible 설명을 참고하세요.

두 파일로 실행하는 전체 예제

같은 폴더에 links.html과 visit.html을 만듭니다. 첫 코드는 links.html, 다음 코드는 visit.html에 UTF-8로 저장합니다. 첫 번째 링크는 실제 별도 파일로 이동하고, 두 번째 링크는 현재 페이지 안의 운영 시간 제목으로 이동합니다.

<!doctype html>
<html lang="ko">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>링크 상태 실습</title>
  <style>
    body { margin: 24px; font: 1rem/1.7 sans-serif; color: #333; }
    main { max-width: 65ch; }
    a { text-decoration: underline; text-underline-offset: 0.15em; }
    a:link { color: #1756a9; }
    a:visited { color: #6b438c; }
    a:hover { color: #b53239; }
    a:active { color: #8a2630; }
    a:focus-visible { outline: 3px solid #e58c1f; outline-offset: 3px; }
    nav li + li { margin-block-start: 0.7em; }
  </style>
</head>
<body>
  <main>
    <h1>작은 정원 방문 안내</h1>
    <nav aria-label="안내 링크"><ul>
      <li><a href="visit.html">별도 페이지의 방문 안내</a></li>
      <li><a href="#hours">이 페이지의 운영 시간</a></li>
    </ul></nav>
    <h2 id="hours">운영 시간</h2>
    <p>오전에는 식물 관리 작업을 합니다. 이 예제에서 시간은 가상 안내문이며 실제 시설 정보가 아닙니다.</p>
    <p>링크 위에 마우스를 올리거나 키보드 Tab으로 이동해 색상과 윤곽선을 확인하세요.</p>
  </main>
</body>
</html>

<!doctype html>
<html lang="ko"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1"><title>방문 안내</title></head>
<body><h1>방문 안내 페이지</h1><p>첫 번째 링크가 여는 별도 문서입니다.</p><p><a href="links.html">링크 실습으로 돌아가기</a></p></body></html>

마우스와 키보드로 결과 확인하기

1. links.html을 열고 첫 번째 링크 위에 마우스를 올립니다. 붉은색으로 바뀌는지 확인하세요. 마우스 버튼을 누른 채 유지하면 진한 붉은색을 볼 수 있습니다. 놓는 순간 페이지가 이동하므로 클릭이 끝난 뒤에는 active 색이 계속 남지 않습니다.
2. 첫 링크를 열고 브라우저 뒤로 가기로 돌아옵니다. 포인터를 링크 밖으로 옮긴 뒤 방문 색을 확인하세요. 새 프로필·비공개 창·방문 기록 삭제 상태에서는 결과가 달라질 수 있고, 이미 방문한 주소는 처음부터 방문 상태일 수 있습니다.
3. 포인터를 링크 밖에 두고 Tab으로 첫 링크에 이동합니다. 주황색 윤곽선이 나타나는지 확인하고, 다시 Tab으로 다음 링크에 이동합니다. Shift+Tab은 반대 순서로 이동합니다.
4. 첫 번째 링크에 포커스를 둔 채 Enter를 누릅니다. visit.html이 열리는지 확인하세요. 돌아온 뒤 두 번째 링크를 Enter로 활성화하면 운영 시간 제목으로 이동해야 합니다.

visited의 표시에는 개인정보 보호를 위한 제한이 있습니다. color 같은 일부 색상 속성은 사용할 수 있지만, 방문 여부를 알아내려고 크기·이미지 등을 자유롭게 바꿀 수는 없습니다. 브라우저는 getComputedStyle() 등에서 방문한 색을 그대로 알려 주지 않을 수 있으므로 계산된 스타일 값만으로 방문 이력을 판정하지 마세요. 세부 제한은 MDN의 :visited와 개인정보 보호 설명에 설명되어 있습니다.

상태 변화가 보이지 않을 때

• 링크 이동이 안 되면 href의 파일명과 visit.html의 위치를 확인합니다. 두 파일을 같은 폴더에 두었는지부터 점검하세요.
• 방문 색 대신 호버 색만 보이면 포인터를 링크 밖으로 옮깁니다. 개발자 도구에서 강제로 hover를 켰다면 해제합니다.
• 키보드 이동이 안 되면 href가 있는 실제 링크인지 확인합니다. 브라우저·운영체제의 키보드 탐색 설정도 영향을 줄 수 있습니다.
• 포커스 선이 잘리면 부모 요소의 overflow와 주변 공간을 확인합니다. 모바일 터치에서는 hover가 데스크톱과 다르게 동작할 수 있으므로 필수 정보를 호버에서만 보여 주지 않습니다.

규칙 순서를 바꾸는 실습을 마치면 원래 순서로 되돌려 두세요. 개발자 도구에서 임시로 수정한 CSS는 새로고침하면 파일에 저장된 값으로 돌아가지만, 방문 기록은 새로고침만으로 초기화되지 않습니다.