HTML, CSS: a, a:link, a:visited 의 차이?

Sangmin Na·2021년 6월 1일
1

CSS

목록 보기
1/1
post-thumbnail

개선을 위한 정보 혹은 틀린 정보가 있다면 자유롭게 코멘트를 작성해주세요 :D

a

<a href="http://www.naver.com">네이버</a>

a는 anchor(닻)의 약자이다. HTML 안에서 a태그는 현재 페이지에서 다른 페이지로 연결해주는 태그이다. 다른 페이지에 정착할 수 있도록 anchor(닻)을 내린다고 생각하면 된다. a태그의 기본적인 내용은 mdn 혹은 w3school 를 참고하면 많은 정보가 있습니다 :)

Pseudo-class?

a:link는 css에서 a 태그를 스타일링 할 때 사용되는 pseudo-class 이다.
그렇다면 psuedo-class는 무엇이냐? 직역을 하면 가짜 클래스, 모조의 클래스라고도 할 수 있다. 즉, 클래스는 아니지만 클래스처럼 작동한다고 생각하면 된다.
psuedo-class는 태그뒤에 :을 붙여 사용한다. 어떤 특정한 상황에 따라서 스타일링을 하고자 할 때 사용된다.

a:link는 사용자가 방문하기전 상태를 나타낸다. 인터넷을 사용해보았다면 링크를 클릭하기전 글씨가 파란색(Default)인걸 알 수 있다. 이는 a:link를 통해 글씨 색을 변경할 수 있다.

a:visited

a:visited는 방문하기 후 상태를 나타낸다. 인터넷을 사용해보았다면 링크를 클릭하기전 글씨가 보라색(Default) 알 수 있다. 이는 a:visited을 CSS에서 글씨 색을 변경할 수 있다.

Which one to use?

a {} 로 사용해서 스타일링 한다면 link와 visited 둘 다 모두 스타일링이 적용된다.
a:link는 방문하기 전에 변경된다.
a:visited는 방문후에 스타일링이 변경된다.
a만 사용하거나 a:link, a:visited 모두 사용하여 스타일링 하는 것이 보편적이다.

Reference

0개의 댓글