Computer >> 컴퓨터 >  >> 프로그래밍 >> CSS

CSS :visited 가상 클래스 – 방문한 링크 스타일링 완벽 가이드

가상 클래스(Pseudo Class)는 요소나 CSS 선택자의 다양한 상태를 표현하기 위해 사용되는 선택자입니다. 그중 :visited 가상 클래스는 해당 링크가 이미 방문된 상태임을 나타내는 역할을 합니다.

:visited 가상 클래스는 주로 하이퍼링크(<a> 태그)와 함께 사용되며, 사용자가 한 번이라도 클릭해 방문한 링크에 별도의 스타일을 적용할 수 있습니다.

문법(Syntax)

a:visited { color: green; }

아래에서 다양한 상황별로 :visited 가상 클래스의 실제 활용 예제를 살펴보겠습니다.

예제 1: 기본 사용법

<html>
<head>
    <style>
        a:visited { color: green; }
    </style>
</head>
<body>
    <a href="https://www.tutorialspoint.com">클릭하여 학습하기</a>
</body>
</html>

설명

링크를 처음 볼 때는 일반적인 링크 색상인 파란색으로 표시됩니다. 그러나 해당 링크를 한 번이라도 방문한 적이 있다면 글자 색이 초록색(green)으로 자동으로 변경됩니다.

예제 2: 테두리(Border) 스타일 적용

<html>
<head>
    <style>
        /* :visited 상태의 스타일 변화를 잘 보이게 하기 위한 기본 스타일 설정 */
        a { background-color: white; border: 1px solid white; }
        a:visited { border-color: yellow; }
    </style>
</head>
<body>
    <a href="https://www.tutorialspoint.com">클릭하여 학습하기</a>
</body>
</html>

설명

이 예제에서는 링크를 방문한 후 1px 두께의 노란색(yellow) 테두리가 링크에 적용됩니다. 방문 전과 후의 시각적 차이를 명확하게 확인할 수 있습니다.

예제 3: 배경색(Background) 변경

<html>
<head>
    <style>
        /* :visited 상태의 스타일 변화를 잘 보이게 하기 위한 기본 스타일 설정 */
        a { background-color: white; }
        a:visited { background-color: seagreen; }
    </style>
</head>
<body>
    <a href="https://www.tutorialspoint.com">클릭하여 학습하기</a>
</body>
</html>

설명

링크를 한 번 방문하면 배경색이 시그린(seagreen) 색상으로 변경됩니다. 이처럼 :visited를 활용하면 사용자가 어떤 링크를 이미 확인했는지 직관적으로 알 수 있게 해줍니다.

스타일링 제한 사항

개인정보 보호와 보안상의 이유로, 브라우저는 :visited 가상 클래스에 적용할 수 있는 CSS 속성을 제한하고 있습니다. 사용 가능한 속성은 다음과 같습니다.

  • color
  • background-color
  • border-color, border-top-color, border-bottom-color, border-left-color, border-right-color
  • column-rule-color
  • outline-color
  • SVG 속성: fill, stroke

이 외의 속성(예: font-size, margin, display 등)은 :visited 상태에서 적용되지 않으므로 주의해야 합니다.

브라우저 호환성

ChromeFirefoxEdgeIESafariOpera
11지원지원13.5