CSS에서 의사 클래스(pseudo-class)는 선택자 뒤에 붙여 해당 요소의 특별한 상태를 지정하는 데 사용되는 키워드입니다. 의사 클래스를 활용하면 일반적인 선택자보다 훨씬 세밀하게 요소를 제어할 수 있습니다. 예를 들어 마우스 오버(hover), 체크됨(checked), 방문함(visited) 같은 특정 상태일 때만 스타일을 적용할 수 있습니다.
의사 클래스란?
의사 클래스는 콜론(:) 기호를 사용하여 표기하며, 문서 트리 구조에는 나타나지 않지만 사용자의 동작이나 요소의 상태에 따라 동적으로 변하는 정보를 반영할 때 유용합니다. 특히 하이퍼링크(<a> 태그) 스타일링에서 가장 널리 사용됩니다.
주요 링크 관련 의사 클래스
:link– 아직 방문하지 않은 링크에 적용됩니다.:visited– 사용자가 이미 방문한 링크에 적용됩니다.:hover– 마우스 포인터가 요소 위에 올라가 있는 상태에 적용됩니다.:active– 요소가 클릭되어 활성화된 순간에 적용됩니다.
팁: 링크 의사 클래스는 :link → :visited → :hover → :active(LVHA 순서)대로 작성해야 각 스타일이 서로 덮어쓰이지 않고 올바르게 적용됩니다.
CSS 의사 클래스 예제
다음은 CSS에서 의사 클래스를 사용하는 방법을 보여주는 전체 코드입니다 −
<!DOCTYPE html>
<html>
<head>
<style>
body {
font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
}
a {
font-size: 18px;
font-weight: bold;
}
a:link {
color: rgb(17, 0, 255);
}
a:visited {
color: rgb(128, 0, 107);
}
a:hover {
color: rgb(255, 105, 243);
}
a:active {
color: rgb(255, 153, 0);
}
</style>
</head>
<body>
<h1>의사 클래스 예시</h1>
<a href="#">샘플 링크 텍스트입니다</a>
<h2>위 링크에 마우스를 올리거나 클릭하면 의사 클래스가 작동하는 것을 확인할 수 있습니다</h2>
</body>
</html>
실행 결과
위 코드를 실행하면 다음과 같은 화면이 출력됩니다 −
링크 위에 마우스를 올렸을 때(hover) − 링크 색상이 분홍색 계열로 변경됩니다.
링크를 클릭하는 순간(active) − 주황색으로 변경되며 클릭 중임을 시각적으로 알려줍니다.
같은 페이지로 다시 돌아왔을 때(visited) − 한 번 방문한 링크는 보라색 계열의 '방문함' 상태로 표시됩니다.
이처럼 의사 클래스를 활용하면 사용자의 인터랙션에 따라 실시간으로 반응하는 직관적인 웹 UI를 손쉽게 구현할 수 있습니다.