Translation update from v5.1.1

twbs/bootstrap#34787 twbs/bootstrap#34877 twbs/bootstrap#34886 twbs/bootstrap#34892
arumduri · Sep 10, 2021 · edd1b07 · edd1b07
1 parent 90cf0f4
commit edd1b07
Show file tree

Hide file tree

Showing 6 changed files with 29 additions and 18 deletions.
diff --git a/site/content/docs/5.1/components/buttons.md b/site/content/docs/5.1/components/buttons.md
@@ -86,18 +86,22 @@ Bootstrap에서는 미리 정의된 버튼 스타일이 포함되어 있으며,
 
 - `<a>` 는 `disabled` 속성을 지원하지 않음으로 시각적으로 비활성화처럼 보이게 하기 위해 `.disabled` 클래스를 추가해야 합니다.
 - 앵커 버튼의 모든 `pointer-events`를 비활성화시키기 위해 장래적으로 사용하기 쉬운 스타일이 포함되어 있습니다.
-- 비활성화버튼은 보조 기술에 대한 요소의 상태를 나타내는 `aria-disabled="true"` 속성이 포함되어야 합니다.
+- `<a>`를 사용하는 비활성화 버튼은 보조 기술에 대한 요소의 상태를 나타내는 `aria-disabled="true"` 속성이 포함되어야 합니다.
+- `<a>`를 사용하는 비활성화 버튼은 `href` 속성을 포함하면 *안됩니다*.
 
 {{< example >}}
-<a href="#" class="btn btn-primary btn-lg disabled" tabindex="-1" role="button" aria-disabled="true">Primary link</a>
-<a href="#" class="btn btn-secondary btn-lg disabled" tabindex="-1" role="button" aria-disabled="true">Link</a>
+<a class="btn btn-primary btn-lg disabled" role="button" aria-disabled="true">Primary link</a>
+<a class="btn btn-secondary btn-lg disabled" role="button" aria-disabled="true">Link</a>
 {{< /example >}}
 
-{{< callout warning >}}
-##### 링크 기능 주의사항
+### 링크 기능 주의사항
 
-`.disabled` 클래스는 `<a>`의 링크 기능을 무효화 하기 위해서 `pointer-events: none`을 사용하지만, 이 CSS 속성은 아직 표준화되어 있지 않습니다. 게다가 `pointer-events: none`을 지원하는 브라우저에서도 키보드 내비게이션은 영향을 받지 않습니다. 그렇기 때문에 안전을 위해 `aria-disabled="true"`에 더해 `tabindex="-1"` 속성을 링크로 설정하고 키보드 포커스를 받지 않도록 하며, 사용자 정의 JavaScript를 사용하여 기능을 완전히 무효화 하도록 합니다.
-{{< /callout >}}
+비활성화된 링크에서 `href` 속성을 유지해야 하는 경우를 다루기 위해 `.disabled` 클래스는 `pointer-events: none`을 사용하여 `<a>`의 링크 기능을 비활성화하려고 시도합니다. 이 CSS 속성은 아직 HTML에서 표준화되지 않았지만 모든 최신 브라우저에서 지원합니다. 또한 `pointer-events: none`을 지원하는 브라우저에서도 키보드 탐색은 영향을 받지 않습니다. 따라서 확실하게 하려면 `aria-disabled="true"` 외에도 이러한 링크에 `tabindex="-1"` 속성을 포함하여 키보드 포커스를 받지 않도록 하고 사용자 지정 JavaScript를 사용하여 해당 기능을 완전히 비활성화해야 합니다.
+
+{{< example >}}
+<a href="#" class="btn btn-primary btn-lg disabled" tabindex="-1" role="button" aria-disabled="true">Primary link</a>
+<a href="#" class="btn btn-secondary btn-lg disabled" tabindex="-1" role="button" aria-disabled="true">Link</a>
+{{< /example >}}
 
 ## 버튼 블록
 
@@ -158,7 +162,7 @@ Display와 gap 유틸리티를 조합해, Bootstrap 4와 같은 전체 너비에
 {{< example >}}
 <a href="#" class="btn btn-primary" role="button" data-bs-toggle="button">Toggle link</a>
 <a href="#" class="btn btn-primary active" role="button" data-bs-toggle="button" aria-pressed="true">Active toggle link</a>
-<a href="#" class="btn btn-primary disabled" tabindex="-1" aria-disabled="true" role="button" data-bs-toggle="button">Disabled toggle link</a>
+<a class="btn btn-primary disabled" aria-disabled="true" role="button" data-bs-toggle="button">Disabled toggle link</a>
 {{< /example >}}
 
 ### 메소드

diff --git a/site/content/docs/5.1/components/placeholders.md b/site/content/docs/5.1/components/placeholders.md
@@ -83,7 +83,7 @@ toc: true
   <span class="placeholder col-6"></span>
 </p>
 
-<a href="#" class="btn btn-primary disabled placeholder col-4" aria-hidden="true"></a>
+<a href="#" tabindex="-1" class="btn btn-primary disabled placeholder col-4" aria-hidden="true"></a>
 {{< /example >}}
 
 {{< callout info >}}

diff --git a/site/content/docs/5.1/components/progress.md b/site/content/docs/5.1/components/progress.md
@@ -124,14 +124,11 @@ Background 유틸리티 클래스를 사용해 각각의 프로그레스 바의
 
 스트라이프 형태의 그라데이션을 애니메이션화할 수도 있습니다. `.progress-bar`에 `.progress-bar-animated`를 추가하면 CSS3 애니메이션으로 줄무늬를 오른쪽에서 왼쪽으로 애니메이션 시킬 수 있습니다.
 
-<div class="bd-example">
-  <div class="progress">
-    <div class="progress-bar progress-bar-striped" role="progressbar" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100" style="width: 75%"></div>
-  </div>
-  <button type="button" class="btn btn-secondary mt-3" data-bs-toggle="button" id="btnToggleAnimatedProgress" aria-pressed="false" autocomplete="off">
-    Toggle animation
-  </button>
+{{< example >}}
+<div class="progress">
+  <div class="progress-bar progress-bar-striped progress-bar-animated" role="progressbar" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100" style="width: 75%"></div>
 </div>
+{{< /example >}}
 
 ```html
 <div class="progress">

diff --git a/site/content/docs/5.1/customize/options.md b/site/content/docs/5.1/customize/options.md
@@ -27,4 +27,5 @@ group: customize
 | `$enable-negative-margins`     | `true` 혹은 `false` (기본)        | [마이너스 마진 유틸리티]({{< docsref "/utilities/spacing#negative-margin" >}})를 사용합니다. |
 | `$enable-deprecation-messages` | `true` (기본) 혹은 `false`        | `false`로 설정하면 `v6`에서 삭제 예정인 권장 믹스인이나 함수를 사용할때 에러가 표시되지 않습니다. |
 | `$enable-important-utilities`  | `true` (기본) 혹은 `false`        | 유틸리티 클래스에서 `!important` 접미사를 사용합니다. |
+| `$enable-smooth-scroll`        | `true` (기본) 혹은 `false`        | `scroll-behavior: smooth`를 [`prefers-reduced-motion` 미디어 쿼리]({{< docsref "/getting-started/accessibility#reduced-motion" >}})를 통해서 감소된 모션을 요청하는 사용자를 제외하고 전역으로 전용합니다. |
 {{< /bs-table >}}
diff --git a/site/content/docs/5.1/helpers/stacks.md b/site/content/docs/5.1/helpers/stacks.md
@@ -9,6 +9,10 @@ toc: true
 
 스택은 Bootstrap에서 레이아웃을 빠르고 쉽게 생성하기 위해 여러 flexbox 속성을 적용하는 지름길을 제공합니다. 개념 및 구현에 대한 모든 크레딧은 오픈 소스 [Pylon Project](https://almonk.github.io/pylon/)에 있습니다.
 
+{{< callout warning >}}
+주목! 최근 Safari에 flexbox가 있는 갭 유틸리티에 대한 지원이 추가되었으므로 원하는 브라우저 지원을 확인하는 것이 좋습니다. 그리드 레이아웃에는 문제가 없어야 합니다. [자세히 알아보세요](https://caniuse.com/flexbox-gap).
+{{< /callout >}}
+
 ## 세로
 
 세로 레이아웃을 만들려면 `.vstack`을 사용하세요. 스택 항목은 기본적으로 full-width입니다. 항목 사이에 공간을 추가하려면 `.gap-*` 유틸리티를 사용하세요.
@@ -69,7 +73,7 @@ toc: true
 
 {{< example >}}
 <div class="hstack gap-3">
-  <input class="form-control me-auto" type="text" placeholder="Add your item here...">
+  <input class="form-control me-auto" type="text" placeholder="Add your item here..." aria-label="Add your item here...">
   <button type="button" class="btn btn-secondary">Submit</button>
   <div class="vr"></div>
   <button type="button" class="btn btn-outline-danger">Reset</button>

diff --git a/site/content/docs/5.1/utilities/interactions.md b/site/content/docs/5.1/utilities/interactions.md
@@ -28,7 +28,12 @@ Bootstrap은 요소와의 상호 작용을 금지하거나 추가하기 위해 `
 {{< /example >}}
 
 {{< callout warning >}}
-`.pe-none` 클래스 (및 `pointer-events` CSS 속성 설정)는 커서 (마우스, 스타일러스, 터치)와의 상호 작용 만 방지합니다. `.pe-none`을 사용하는 링크와 컨트롤은 기본적으로 키보드 사용자가 여전히 포커스를 받을 수 있고 실행 또한 가능합니다. 키보드 사용자도 완전히 상호작용 불가능하게 하려면 `tabindex = "-1"` (키보드 포커스를 받지 못하도록 방지) 및 `aria-disabled = "true"` (사실을 전달하기 위해)와 같은 속성을 추가해야 할 수 있습니다. 보조 기술에 대해 효과적으로 JavaScript를 사용하여 실행 가능한 것을 완전히 방지할 수 있습니다. 폼 컨트롤의 경우 `disabled` 된 HTML 속성을 대신 사용하는 것이 좋습니다.
+`.pe-none` 클래스 (및 `pointer-events` CSS 속성 설정)는 커서 (마우스, 스타일러스, 터치)와의 상호 작용 만 방지합니다. `.pe-none`을 사용하는 링크와 컨트롤은 기본적으로 키보드 사용자가 여전히 포커스를 받을 수 있고 실행 또한 가능합니다. 키보드 사용자도 완전히 상호작용 불가능하게 하려면 `tabindex = "-1"` (키보드 포커스를 받지 못하도록 방지) 및 `aria-disabled = "true"` (사실을 전달하기 위해)와 같은 속성을 추가해야 할 수 있습니다. 보조 기술에 대해 효과적으로 JavaScript를 사용하여 실행 가능한 것을 완전히 방지할 수 있습니다.
+
+가능하다면 더 쉬운 방법이 있습니다:
+
+- 폼 컨트롤이라면 `disabled` HTML 속성을 추가하세요.
+* 링크라면 `href` 속성을 제거하고 비상호작용 앵커 또는 플레이스홀더 링크로 만드세요.
 {{< /callout >}}
 
 ## Sass