[CSS] 링크(link) 스타일링

 

📌 링크(link) 스타일링

 

기본 스타일

• 링크는 밑줄이 그어져 있다.
• 방문하지 않은 링크는 파란색
• 방문한 링크는 자주색
• 활성 링크는 빨강색
• 링크를 가리키면 마우스 포인터가 작은 손 아이콘으로 바뀐다.
• 탭 키를 눌러 키보드로 이 페이지의 링크에 초점을 맞출 수 있다. (초점이 맞춰진 링크에는 주위에 윤곽선이 표시)
  

 

 

:link 

: 방문하지 않은 링크

a:link {
  color: green;
}

 

 

:visited 

: 이미 방문한 링크

a:visited {
  color: silver;
}

 

 

 

:active 

: 활성화 된 링크

a:active {
  color: red;
}

 

 

 

:hover

: 마우스를 링크 위에 올렸을 때

a:hover {
  color: yellow;
}

 

 

 

:focus 

: 키보드로 링크 영역에 이동했을 때

a:focus {
  color: yellow;
}

 

 

See the Pen link by nadia kwon (@nadia-kwon) on CodePen.

 

---

참고

 

스타일링 링크 - Web 개발 학습하기 | MDN