[CSS] 방문한 링크의 색상을 바꿔주는 'a:visited {and}'

2023. 7. 15. 13:16CSS

 'a:visited'는 방문한 링크를 나타내는 앵커(<a>) 요소를 대상으로 지정하고 스타일을 지정하는 데 사용됩니다.

사용자가 링크를 클릭하고 사용자의 브라우저가 이전에 해당 URL을 이미 방문한 경우 해당 링크는 "방문한" 것으로 간주됩니다.

'a:visited'를 사용하면 방문한 링크에 특정 스타일을 적용하여 방문하지 않은 링크와 구별할 수 있습니다.

이는 사용자가 이미 방문한 페이지와 방문하지 않은 페이지에 대한 시각적 신호를 제공하는 데 유용할 수 있습니다.

다음은 CSS에서 'a:visited'를 사용하는 방법의 예입니다.

a:visited {
  color: purple; /* 방문한 링크의 색상을 보라색으로 설정 */
  text-decoration: line-through; /* 방문한 링크에 라인 스루 데코레이션 추가 */
}

이 예에서 CSS 규칙은 방문한 링크를 나타내는 모든 앵커 요소(<a>)에 적용됩니다. 방문한 링크의 색상은 보라색으로 설정되고 방문한 링크의 텍스트에 줄을 그은 텍스트 장식이 추가됩니다.

브라우저는 방문한 링크의 스타일 지정에 특정 보안 및 개인 정보 보호 제한을 적용한다는 점에 유의해야 합니다. 

이는 웹사이트가 CSS 기반 공격을 통해 잠재적으로 사용자의 검색 기록을 추출하는 것을 방지하기 위한 것입니다. 

 

결과적으로 'a:visited'에는 몇 가지 제한 사항이 있습니다.
색상 제한 : 방문한 링크의 색상을 변경할 수 있지만 일반적으로 기본 링크 색상(일반적으로 같은 색상의 음영)에 대한 대비 변경이 최소화된 색상으로 제한됩니다. 이것은 사용자의 탐색 습관에 대한 민감한 정보를 수집하기 위해 링크 색상 변경을 악용하는 웹 사이트를 방지하기 위한 것입니다.


텍스트 장식 제한 : text-decoration 속성은 color, background-color, border-color, outline-color 및 column과 같은 특정 값으로 제한됩니다. 


이러한 제한은 브라우저마다 다르며 일부 최신 브라우저는 개인 정보 보호 문제로 인해 방문한 링크의 스타일을 지정하는 기능을 추가로 제한하거나 제거할 수 있습니다.

방문한 링크에 대한 시각적 신호를 제공하면 사용자에게 도움이 될 수 있지만 개인 정보를 존중하고 잠재적인 보안 위험을 방지하기 위해 방문한 링크의 스타일 지정에 대한 브라우저 제한 사항을 준수해야 합니다.