[CSS] 가상 클래스 정리

CSS 가상 클래스는 요소의 상태(state) 나 사용자와의 상호작용에 따라
스타일을 적용할 수 있게 해주는 선택자입니다.

 

1. 가상 클래스란?

가상 클래스는 : 기호로 시작하며,
HTML에 실제로 존재하는 클래스는 아니지만,
브라우저가 판단한 특정 상태를 기준으로 요소를 선택합니다.

a:hover {
  text-decoration: underline;
}

마우스를 올렸을 때만 스타일 적용

 

2. 대표적인 가상 클래스들

1️⃣ :hover

button:hover {
  background-color: #eee;
}

• 마우스를 올렸을 때
• 가장 자주 쓰이는 가상 클래스

2️⃣ :active

button:active {
  transform: scale(0.98);
}

 

3️⃣ :focus

input:focus {
  outline: none;
  border-color: blue;
}

• 포커스를 가진 상태
• 키보드 접근성에서 매우 중요

4️⃣ :visited

a:visited {
  color: purple;
}

 

• 이미 방문한 링크
• 보안상 제한된 속성만 변경 가능

 

3. 가상 클래스는 “상태”를 본다

핵심 개념은 이겁니다.

 

가상 클래스는 요소의 구조가 아니라
사용자의 행동이나 브라우저 상태를 기준으로 동작한다.

4. 개발자 도구에서 가상 클래스 확인하기

Chrome DevTools에서는 요소를 선택한 뒤
Force state 기능으로 가상 클래스를 강제로 적용할 수 있습니다.

• :hover
• :active
• :focus
• :visited

👉 실제로 마우스를 올리지 않아도 스타일 확인 가능

 

 

 

정리하면

 

가상 클래스는
‘요소가 어떤 상태에 있는가’를 기준으로 스타일을 적용하는 CSS 선택자다.