:focus

CSS :focus 의사 클래스는 양식의 입력 칸 등 포커스를 받은 요소를 나타냅니다. 보통 사용자가 요소를 클릭 또는 탭하거나, 키보드 Tab 키로 선택했을 때 발동합니다.

/* Selects any <input> when focused */
input:focus {
  color: red;
}

참고: :focus는 포커스를 받은 요소 자체에만 해당합니다. 자손이 포커스를 받았을 때의 요소를 선택해야 하면 :focus-within을 사용하세요.

구문

Error: could not find syntax for this item

예제

HTML

<input class="red-input" value="저는 포커스를 받으면 빨갛게 됩니다."><br>
<input class="blue-input" value="저는 포커스를 받으면 파랗게 됩니다.">

CSS

.red-input:focus {
  background: yellow;
  color: red;
}

.blue-input:focus {
  background: yellow;
  color: blue;
}

결과

접근성 고려사항

낮은 시력을 가진 사용자도 시각적 포커스 지시자를 볼 수 있어야 합니다. 이는 또한 맑은 날의 외부처럼 밝은 공간에서의 스크린 사용자처럼 다른 사람에게도 도움이 될 수 있습니다. WCAG 2.1 SC 1.4.11 Non-Text Contrast는 시각적 포커스 지시자의 대비를 최소한 3:1로 요구하고 있습니다.

Accessible Visual Focus Indicators: Give Your Site Some Focus! Tips for Designing Useful and Usable Focus Indicators

`:focus { outline: none; }`

절대 포커스의 기본 외곽선(시각적 포커스 지시자)을 대체 외곽선 없이 제거하지 마세요. 대체 외곽선은 WCAG 2.1 SC 1.4.11 Non-Text Contrast 기준을 통과해야 합니다.

Quick Tip: Never remove CSS outlines

명세

Specification	Status	Comment
HTML Living Standard The definition of ':focus' in that specification.	Living Standard	Defines HTML-specific semantics.
Selectors Level 4 The definition of ':focus' in that specification.	Working Draft	No change.
Selectors Level 3 The definition of ':focus' in that specification.	Recommendation	No change.
CSS Level 2 (Revision 1) The definition of ':focus' in that specification.	Recommendation	Initial definition.

브라우저 호환성

BCD tables only load in the browser

같이 보기

:focus-visible (en-US) Experimental
:focus-within