From da78a9e329e272dedb2400b79a3bdeebff387d47 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:42:17 -0500 Subject: initial commit --- files/ko/web/css/_colon_focus/index.html | 116 +++++++++++++++++++++++++++++++ 1 file changed, 116 insertions(+) create mode 100644 files/ko/web/css/_colon_focus/index.html (limited to 'files/ko/web/css/_colon_focus') diff --git a/files/ko/web/css/_colon_focus/index.html b/files/ko/web/css/_colon_focus/index.html new file mode 100644 index 0000000000..3a3e853e44 --- /dev/null +++ b/files/ko/web/css/_colon_focus/index.html @@ -0,0 +1,116 @@ +--- +title: ':focus' +slug: 'Web/CSS/:focus' +tags: + - CSS + - Layout + - Pseudo-class + - Reference + - Selector + - Web +translation_of: 'Web/CSS/:focus' +--- +
{{CSSRef}}
+ +

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

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

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

+
+ +

구문

+ +
{{CSSSyntax}}
+ +

예제

+ +

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;
+}
+ +

결과

+ +

{{EmbedLiveSample("예제")}}

+ +

접근성 고려사항

+ +

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

+ + + +

:focus { outline: none; }

+ +

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

+ + + +

명세

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName("HTML WHATWG", "scripting.html#selector-focus", ":focus")}}{{Spec2("HTML WHATWG")}}Defines HTML-specific semantics.
{{SpecName("CSS4 Selectors", "#focus-pseudo", ":focus")}}{{Spec2("CSS4 Selectors")}}No change.
{{SpecName("CSS3 Selectors", "#the-user-action-pseudo-classes-hover-act", ":focus")}}{{Spec2("CSS3 Selectors")}}No change.
{{SpecName("CSS2.1", "selector.html#dynamic-pseudo-classes", ":focus")}}{{Spec2("CSS2.1")}}Initial definition.
+ +

브라우저 호환성

+ +
+ + +

{{Compat("css.selectors.focus")}}

+
+ +

같이 보기

+ + -- cgit v1.2.3-54-g00ecf