pseudo-class :hover :focus :active

핵심 개념

:hover는 마우스 오버, :focus는 키보드/클릭 포커스, :active는 클릭 중 상태입니다. :nth-child(n)으로 특정 순서의 자식을 선택할 수 있습니다. 가상 클래스는 별도 클래스 없이 상태 기반 스타일링을 가능하게 합니다. transition과 함께 사용하면 부드러운 상태 전환이 가능합니다. :hover 스타일을 지우며 인터랙션이 사라지는 것을 확인하십시오.

코드 분석

CSS3📋 코드 (4줄)

<style>.pc-btn{padding:10px 20px;background:#0d1117;color:#e8e8e8;border:1px solid #333;cursor:pointer;font-family:monospace;font-size:13px;transition:all 0.2s;margin:4px;}.pc-btn:hover{background:#10b981;color:#080808;border-color:#10b981;}.pc-btn:active{transform:scale(0.96);}.pc-inp{padding:10px;background:#080808;color:#e8e8e8;border:1px solid #333;display:block;width:200px;margin-top:10px;font-family:monospace;outline:none;transition:border 0.2s;}.pc-inp:focus{border-color:#10b981;}</style>
<button class='pc-btn'>HOVER ME</button>
<button class='pc-btn'>CLICK ME</button>
<input class='pc-inp' placeholder='focus me' />

AI 프롬프트

🤖 AI에게 잘 물어보는 법 — 모델·전략별 프롬프트

Claude

무료: Sonnet 4.6 / Pro $20/mo: Opus 4.6

이 CSS 'pseudo-class' 코드에서
레이아웃·우선순위·반응형 버그를 찾고
수정 코드와 원인을 단계별로 설명해줘.

ChatGPT

무료: GPT-5.5 / Plus $20/mo: GPT-5.5 Pro

'pseudo-class'를 사용한 실전 UI 컴포넌트를
3가지 만들어줘. 모바일 반응형까지 포함된 완성 코드로.

Gemini

무료: 2.5 Flash / Pro $19.99/mo: 3.1 Pro

이 CSS 'pseudo-class' 관련 코드 전체를 분석해서
중복 속성, 미사용 셀렉터, 성능 저하 요소를
우선순위별로 정리해줘.

Grok

무료: Grok 4.1 / SuperGrok $30/mo

'pseudo-class'가 2026년에도 최선의 방법인지
최신 CSS(컨테이너 쿼리, :has, 서브그리드 등) 기능과 비교해서
솔직히 평가해줘.

⭐ 이것만 기억하세요

pseudo-class :hover :focus :active는 이 3가지만 확실히 잡으세요

1.버튼에 hover 효과가 없으면 사용자가 클릭 가능한 요소인지 인지하지 못해 클릭률이 떨어집니다

2.:hover는 마우스 올림, :focus는 키보드 포커스, :active는 클릭 순간 — 세 상태가 사용자 인터랙션의 기본 피드백입니다

3.다음 챕터에서 HTML에 없는 가상 요소를 CSS로 생성하는 ::before와 ::after를 배웁니다

💬 이 챕터 질문 보기

CSS3 · CH.26 — 질문하거나 답변을 확인하세요

→

진행도 26 / 34

← 커리큘럼으로 ← 목록으로 (CSS3)