[ko] double colon placeholder 번역 (#22925)

* [ko] double colon placeholder 번역 * fix : 리뷰 반영
mdn · Oct 27, 2024 · 531bf54 · 531bf54
1 parent 50d08e5
commit 531bf54
Showing 1 changed file with 24 additions and 24 deletions.
diff --git a/files/ko/web/css/_doublecolon_placeholder/index.md b/files/ko/web/css/_doublecolon_placeholder/index.md
@@ -2,19 +2,19 @@
 title: "::placeholder"
 slug: Web/CSS/::placeholder
 l10n:
-  sourceCommit: 59ef5b046557b45a515b654458667e6da6d0f4aa
+  sourceCommit: 4cb569f768ec9529724f8fb06539f2903a583a41
 ---
 
 {{CSSRef}}
 
-**`::placeholder`** [CSS](/ko/docs/Web/CSS) [의사 요소](/ko/docs/Web/CSS/Pseudo-elements)는 {{HTMLElement("input")}} 혹은 {{HTMLElement("textarea")}} 요소 내의 [placeholder text](/ko/docs/Web/HTML/Element/input#placeholder)를 나타냅니다.
+**`::placeholder`** [CSS](/ko/docs/Web/CSS) [의사 요소](/ko/docs/Web/CSS/Pseudo-elements)는 {{HTMLElement("input")}} 혹은 {{HTMLElement("textarea")}} 요소 안에 있는 [플레이스홀더 텍스트](/ko/docs/Web/HTML/Element/input#placeholder)를 나타냅니다.
 
 {{EmbedInteractiveExample("pages/tabbed/pseudo-element-placeholder.html", "tabbed-shorter")}}
 
-{{cssxref("::first-line")}} 의사 요소에 적용된 CSS 속성의 하위 집합만이 `::placeholder` 와 해당 선택자를 사용하는 규칙에 사용될 수 있습니다.
+{{cssxref("::first-line")}} 의사 요소에 적용할 수 있는 하위 집합의 CSS만이 `::placeholder` 와 그 선택자 규칙에 사용될 수 있습니다.
 
 > [!NOTE]
-> 많은 브라우저에서, 플레이스홀더 텍스트의 외형은 기본적으로 반투명하거나 옅은 회색의 색상을 가집니다.
+> 많은 브라우저에서 플레이스홀더 텍스트의 외형은 반투명하거나 옅은 회색을 기본값으로 가집니다.
 
 ## 구문
 
@@ -24,62 +24,62 @@ l10n:
 }
 ```
 
-## 접근성 고려사항
+## 접근성
 
 ### 색상 대비
 
 #### 대비 비율
 
-플레이스홀더 텍스트는 일반적으로 더 밝은 색상으로 처리되어 어떤 종류의 입력이 유효한지에 대해 제안하며, 이는 실제 입력된 값이 아님을 보여줍니다.
+플레이스홀더 텍스트는 일반적으로 인풋에 어떤 내용이 유효할지룰 더 밝은 색상으로 나타내며, 이는 실제 인풋에 대한 입력이 아닙니다.
 
-인풋의 배경 색상과 플레이스홀더 텍스트 사이의 색상 대비 비율을 충분히 높이는 것은 중요합니다. 낮은 시력을 가진 사람이 이를 읽을 수 있도록 해야 하며, 동시에 사용자가 플레이스홀더 텍스트를 입력된 데이터로 착각하지 않도록 플레이스홀더 텍스트와 인풋 텍스트 사이에 색상 차이가 충분히 존재해야 합니다.
+플레이스홀더 텍스트와 인풋의 배경 사이의 대비 비율을 조정하는 것은 시력이 낮은 사람들도 충분히 읽을 수 있도록 하기 위해 중요하게 생각되며, 플레이스홀더 텍스트와 인풋 텍스트의 색상 사이에 충분한 차이를 두어 플레이스홀더가 입력된 데이터로 착각되지 않도록 하는 것 또한 중요합니다.
 
-색상 대비 비율은 플레이스홀더 텍스트와 인풋의 배경 색상 값의 밝기를 비교하여 결정되어야 합니다. [웹 콘텐츠 접근성 가이드라인 (WCAG)](https://www.w3.org/WAI/standards-guidelines/wcag/)을 충족시키기 위해서는, 텍스트 콘텐츠에는 4.5:1의 비율이 요구되고 머릿말 같은 큰 텍스트는 3:1 의 비율이 요구됩니다. 큰 텍스트는 18.66px의 굵은 글씨체 혹은 24px 이상으로 정의됩니다.
+색상 대비 비율은 플레이스홀더 텍스트와 인풋 배경 색상의 명도를 비교하여 찾습니다.[웹 콘텐츠 접근성 가이드라인 (WCAG)](https://www.w3.org/WAI/standards-guidelines/wcag/)을 충족시키기 위해서는, 텍스트 콘텐츠에는 4.5:1의 비율이 요구되고 머릿말 같은 큰 텍스트는 3:1 의 비율이 요구됩니다. 큰 텍스트는 18.66px의 [굵은 글씨체](/ko/docs/Web/CSS/font-weight) 혹은 24px 이상으로 정의됩니다.
 
 - [WebAIM: 색상 대비 확인](https://webaim.org/resources/contrastchecker/)
 - [MDN Understanding WCAG, Guideline 1.4 explanations](/ko/docs/Web/Accessibility/Understanding_WCAG/Perceivable#guideline_1.4_make_it_easier_for_users_to_see_and_hear_content_including_separating_foreground_from_background)
 - [Understanding Success Criterion 1.4.3 | W3C Understanding WCAG 2.0](https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-contrast.html)
 
 #### 사용성
 
-충분한 색상 대비를 가진 플레이스홀더 텍스트는 입력된 값으로 해석될 수도 있습니다. 플레이스홀더 텍스트는 사용자가 {{htmlelement("input")}} 요소에 콘텐츠를 입력할 때 사라집니다. 이 두 가지 상황은 낮은 인지력을 가진 사람에게는 성공적인 폼 작성에 방해가 될 수도 있습니다.
+충분한 색상 대비를 가진 플레이스홀더 텍스트는 입력된 인풋으로 해석될 수 있습니다. 플레이스홀더 텍스트는 사용자가 {{htmlelement("input")}} 요소에 콘텐츠를 입력했을 때 사라져야 합니다. 이러한 상황은 성공적인 폼 완성을 방해할 수도 있는데, 특시 인지 능력이 낮은 사용자들에게 특히 자주 발생합니다.
 
-플레이스홀더의 정보를 제공하는 대신에 사용할 수 있는 대안 접근은 인풋 외부에 시각적으로 가까운 위치에 포함시키고, [`aria-describedby`](/ko/docs/Web/Accessibility/ARIA/Attributes/aria-describedby) 를 사용하여 프로그래밍 방식으로 {{HTMLElement("input")}} 요소와 해당 힌트를 연결하는 것입니다.
+플레이스홀더 정보를 제공하는 대안 접근은 이를 인풋 외부의 가까운 거리에 위치시키고, [`aria-describedby`](/ko/docs/Web/Accessibility/ARIA/Attributes/aria-describedby)를 사용하여 프로그래밍적으로 {{HTMLElement("input")}}과 힌트를 연관짓는 것입니다.
 
-이 구현을 통해 인풋에 정보가 입력되어도 힌트 내용이 계속 제공되며, 페이지가 로드될 때 인풋에는 사전 입력된 내용이 없이 나타나게 됩니다. 대부분의 스크린 리더 기술은 `aria-describedby` 를 사용하여 입력란의 라벨 텍스트가 발표된 후 힌트를 읽어주며, 스크린 리더 사용자가 추가 정보를 불필요하다고 생각하면 이를 음소거할 수 있습니다.
+이러한 구현을 통해 힌트 콘텐츠는 인풋에 정보가 입력되어도 유효하며, 페이지가 로드될 때 인풋에 미리 입력된 내용이 없이 나타나게 됩니다. 대부분의 화면을 읽는 기술은 `aria-describedby` 를 사용하여 인풋의 라벨 텍스트를 읽은 후 힌트를 읽어주고, 스크린 리더 사용자는 이 정보가 불필요하다고 생각되면 음소거를 할 수도 있습니다.
 
 ```html
-<label for="user-email">Your email address</label>
-<span id="user-email-hint" class="input-hint">Example: [email protected]</span>
+<label for="user-email">이메일 주소</label>
+<span id="user-email-hint" class="input-hint">예시: [email protected]</span>
 <input
   id="user-email"
   aria-describedby="user-email-hint"
   name="email"
   type="email" />
 ```
 
-- [폼 필드 안의 플레이스홀더는 해롭다 — Nielsen Norman Group](https://www.nngroup.com/articles/form-design-placeholders/)
+- [폼 안의 플레이스홀더는 해롭다 — Nielsen Norman Group](https://www.nngroup.com/articles/form-design-placeholders/)
 
 ### 윈도우 고대비 모드
 
-플레이스홀더 텍스트는 [윈도우 고대비 모드](https://www.smashingmagazine.com/2022/06/guide-windows-high-contrast-mode/)에서 렌더링될 때 유저가 입력한 것과 동일한 스타일을 가집니다. 이는 일부 사람들로 하여금 어떤 콘텐츠가 입력된 것인지, 어떤 콘텐츠가 플레이스홀더인지 구분하기 어렵게 만들 수 있습니다.
+플레이스홀더 텍스트는 [윈도우 고대비 모드](https://www.smashingmagazine.com/2022/06/guide-windows-high-contrast-mode/)가 렌더될 때, 사용자가 입력한 텍스트 콘텐츠와 동일한 스타일로 나타납니다. 이는 일부 사용자들에게 어떠한 콘텐츠가 입력되었는지, 그리고 어떤 콘텐츠가 플레이스홀더인지 쉽게 구별할 수 없게 만듭니다.
 
 ### 라벨
 
-플레이스홀더는 {{htmlelement("label")}} 요소의 대체제가 아닙니다. [`for`](/ko/docs/Web/HTML/Element/label#for) 와 [`id`](/ko/docs/Web/HTML/Global_attributes#id) 특성의 조합을 사용하여 인풋과 프로그래밍 방식으로 연결된 라벨이 없다면 스크린 리더와 같은 보조 기술이 {{htmlelement("input")}} 요소를 파싱할 수 없습니다.
+플레이스홀더는 {{htmlelement("label")}} 요소의 대체 요소가 아닙니다. [`for`](/ko/docs/Web/HTML/Element/label#for) 와 [`id`](/ko/docs/Web/HTML/Global_attributes#id) 속성을 조합하여 프로그래밍 방식으로 입력 필드와 연결된 라벨이 없으면, 스크린 리더와 같은 보조 기술이 {{htmlelement("input")}} 요소를 해석할 수 없습니다.
 
-- [Placeholders in Form Fields Are Harmful — Nielsen Norman Group](https://www.nngroup.com/articles/form-design-placeholders/)
+- [폼 안의 플레이스홀더는 해롭다 — Nielsen Norman Group](https://www.nngroup.com/articles/form-design-placeholders/)
 
 ## 예제
 
-### 플레이스홀더의 외형 변경하기
+### 플레이스홀더 외형 변경하기
 
-이 예제는 플레이스홀더 텍스트의 스타일을 조정할 수 있는 방법에 대해 소개합니다.
+아래 예제는 플레이스홀더 텍스트의 일부 스타일을 변경하는 방법을 설명합니다.
 
 #### HTML
 
 ```html
-<input placeholder="Type here" />
+<input placeholder="이곳에 입력하세요." />
 ```
 
 #### CSS
@@ -98,13 +98,13 @@ input::placeholder {
 
 ### 불투명한 텍스트
 
-몇몇의 (파이어폭스와 같은) 브라우저 에서는 플레이스홀더의 {{cssxref("opacity")}} 기본값을 100% 보다 낮게 설정합니다. 만일 플레이스홀더의 텍스트를 불투명하게 만들고 싶다면 `opacity` 를 `1` 로 설정하세요.
+일부 브라우저 (Firefox 등)에서는 플레이스홀더의 {{cssxref("opacity")}} 를 100%보다 낮게 설정합니다. 만일 완전히 불투명하게 설정하고 싶다면 `opacity` 를 `1` 로 설정합니다.
 
 #### HTML
 
 ```html
-<input placeholder="Default opacity" />
-<input placeholder="Full opacity" class="force-opaque" />
+<input placeholder="기본 불투명도" />
+<input placeholder="완전한 불투명도" class="force-opaque" />
 ```
 
 #### CSS
@@ -133,6 +133,6 @@ input::placeholder {
 
 ## 같이 보기
 
-- {{cssxref(":placeholder-shown")}} 의사 클래스는 활성화된 플레이스홀더가 있는 요소를 스타일링합니다.
+- {{cssxref(":placeholder-shown")}} 의사 클래스는 활성화된 플레이스홀더를 가진 요소를 스타일링합니다.
 - 연관된 HTML 요소들: {{HTMLElement("input")}}, {{HTMLElement("textarea")}}
 - [HTML 폼](/ko/docs/Learn/Forms)