[ko] translate /ko/learn/accessibility/css_and_javascript/index.md #20993

sqaurelu · 2024-05-30T07:51:22Z

Description

/ko/learn/accessibility/css_and_javascript/index.md 파일 번역했습니다.

Related issues and pull requests

MDN 원문 링크

…y_css_and_js

github-actions · 2024-05-30T07:52:50Z

files/ko/learn/accessibility/css_and_javascript/index.md

+
+표 CSS는 일반적으로 표를 디자인에 더 잘 어울리게 하고 보기 좋게 만드는 역할을 합니다. 표 헤더가 눈에 띄도록 하고(일반적으로 굵게 표시), 얼룩말 줄무늬를 사용하여 여러 행을 구문 분석하기 쉽게 하는 것이 좋습니다.
+
+


[mdn-linter] _{reported by reviewdog 🐶}

Suggested change

@sqaurelu 님 actions의 내용들을 적용해 주세요. 공통 린터입니다.

github-actions · 2024-05-30T07:52:50Z

files/ko/learn/accessibility/css_and_javascript/index.md

+
+![Three tab interface with Tab 1 selected and only its contents are displayed. The contents of other tabs are hidden. If a tab is selected, then it's text-color changes from black to white and the background-color changes from orange-red to saddle brown.](tabbed-info-box.png)
+
+스크린 리더 사용자는 이 중 어떤 것도 신경 쓰지 않습니다. 소스 순서가 적절하고 모든 내용을 읽을 수 있다면 만족합니다. 이 예에서 사용된 절대 위치 지정은 일반적으로 스크린 리더가 콘텐츠에 접근하는 것을 방해하지 않기 때문에 시각적 효과를 위해 콘텐츠를 숨기는  가장 좋은 메커니즘 중 하나로 간주됩니다.


[mdn-linter] _{reported by reviewdog 🐶}

Suggested change

스크린 리더 사용자는 이 중 어떤 것도 신경 쓰지 않습니다. 소스 순서가 적절하고 모든 내용을 읽을 수 있다면 만족합니다. 이 예에서 사용된 절대 위치 지정은 일반적으로 스크린 리더가 콘텐츠에 접근하는 것을 방해하지 않기 때문에 시각적 효과를 위해 콘텐츠를 숨기는 가장 좋은 메커니즘 중 하나로 간주됩니다.

스크린 리더 사용자는 이 중 어떤 것도 신경 쓰지 않습니다. 소스 순서가 적절하고 모든 내용을 읽을 수 있다면 만족합니다. 이 예에서 사용된 절대 위치 지정은 일반적으로 스크린 리더가 콘텐츠에 접근하는 것을 방해하지 않기 때문에 시각적 효과를 위해 콘텐츠를 숨기는 가장 좋은 메커니즘 중 하나로 간주됩니다.

github-actions · 2024-05-30T07:52:50Z

files/ko/learn/accessibility/css_and_javascript/index.md

+
+실제 양식 유효성 검사는 이보다 훨씬 더 복잡합니다. 입력한 이름이 실제로 이름처럼 보이고, 입력된 나이가 실제로 숫자이며 사실적인지(예: 음수가 아니며 4자리 ��만) 확인하고자 합니다. 여기서는 각 입력 필드에 대한 값이 입력되었는지 (`if (testItem.input.value === '')`) 확인하는 간단한 검사를 구현했습니다.
+
+유효성 검사가 수행되었을 때 테스트가 통과되면 양식이 제출됩니다. 오류가 있는 경우 (`if (errorList.innerHTML !== '')`) 양식 제출을 중지하고 ([`preventDefault()`](/ko/docs/Web/API/Event/preventDefault)를 사용) 생성된 오류 메시지를 표시합니다(아래 참조). 이 메커니즘은 오류가 있는 경우에만 오류가 표시됨을 의미하므로 사용성에 더 좋습니다. 


[mdn-linter] _{reported by reviewdog 🐶}

Suggested change

유효성 검사가 수행되었을 때 테스트가 통과되면 양식이 제출됩니다. 오류가 있는 경우 (`if (errorList.innerHTML !== '')`) 양식 제출을 중지하고 ([`preventDefault()`](/ko/docs/Web/API/Event/preventDefault)를 사용) 생성된 오류 메시지를 표시합니다(아래 참조). 이 메커니즘은 오류가 있는 경우에만 오류가 표시됨을 의미하므로 사용성에 더 좋습니다.

유효성 검사가 수행되었을 때 테스트가 통과되면 양식이 제출됩니다. 오류가 있는 경우 (`if (errorList.innerHTML !== '')`) 양식 제출을 중지하고 ([`preventDefault()`](/ko/docs/Web/API/Event/preventDefault)를 사용) 생성된 오류 메시지를 표시합니다(아래 참조). 이 메커니즘은 오류가 있는 경우에만 오류가 표시됨을 의미하므로 사용성에 더 좋습니다.

github-actions · 2024-05-30T07:53:00Z

Preview URLs

/ko/docs/Learn/Accessibility/CSS_and_JavaScript

Flaws (102)

URL: /ko/docs/Learn/Accessibility/CSS_and_JavaScript
Title: CSS와 JavaScript의 접근성 모범 사례
Flaw count: 102

macros:
- /ko/docs/Learn/HTML/Introduction_to_HTML/Document_and_website_structure does not exist but fell back to /en-US/docs/Learn/HTML/Introduction_to_HTML/Document_and_website_structure
- /ko/docs/Learn/HTML/Introduction_to_HTML/Debugging_HTML does not exist but fell back to /en-US/docs/Learn/HTML/Introduction_to_HTML/Debugging_HTML
- /ko/docs/Learn/HTML/Multimedia_and_embedding/Video_and_audio_content does not exist but fell back to /en-US/docs/Learn/HTML/Multimedia_and_embedding/Video_and_audio_content
- /ko/docs/Learn/HTML/Multimedia_and_embedding/Mozilla_splash_page does not exist but fell back to /en-US/docs/Learn/HTML/Multimedia_and_embedding/Mozilla_splash_page
- /ko/docs/Learn/CSS/Building_blocks/Advanced_styling_effects does not exist but fell back to /en-US/docs/Learn/CSS/Building_blocks/Advanced_styling_effects
- and 97 more flaws omitted

External URLs (10)

URL: /ko/docs/Learn/Accessibility/CSS_and_JavaScript
Title: CSS와 JavaScript의 접근성 모범 사례

https://addons.mozilla.org/en-US/firefox/addon/styl-us/ (1 time) (Note! This may be a new URL 👀)
https://chrome.google.com/webstore/detail/stylish-custom-themes-for/fjnbnpbmkenffdnngjfgmeleoegfcffe (1 time) (Note! This may be a new URL 👀)
https://mdn.github.io/learning-area/accessibility/css/form-css.html (1 time) (Note! This may be a new URL 👀)
https://mdn.github.io/learning-area/accessibility/css/mouse-and-keyboard-events.html (1 time) (Note! This may be a new URL 👀)
https://mdn.github.io/learning-area/accessibility/css/table-css.html (1 time) (Note! This may be a new URL 👀)
https://mdn.github.io/learning-area/css/css-layout/practical-positioning-examples/info-box.html (1 time) (Note! This may be a new URL 👀)
https://webaim.org/resources/contrastchecker/ (1 time) (Note! This may be a new URL 👀)
https://webaim.org/techniques/css/invisiblecontent/ (1 time) (Note! This may be a new URL 👀)
https://webaim.org/techniques/formvalidation/ (1 time) (Note! This may be a new URL 👀)
https://www.itsupportguides.com/knowledge-base/computer-accessibility/how-to-use-a-custom-style-sheet-css-with-firefox/ (1 time) (Note! This may be a new URL 👀)

(comment last updated: 2024-07-07 08:49:29)

1ilsang

@sqaurelu 님 안녕하세요. 기여해주셔서 감사합니다! 💯

몇 가지 코멘트 남겨두었습니다.

확인하시고 다시 리뷰 요청 부탁드리겠습니다. 🙇

질문이나 도움이 필요하시다면 언제든 멘션 부탁드리겠습니다.

1ilsang · 2024-06-02T12:34:44Z

files/ko/learn/accessibility/css_and_javascript/index.md

+
+표 CSS는 일반적으로 표를 디자인에 더 잘 어울리게 하고 보기 좋게 만드는 역할을 합니다. 표 헤더가 눈에 띄도록 하고(일반적으로 굵게 표시), 얼룩말 줄무늬를 사용하여 여러 행을 구문 분석하기 쉽게 하는 것이 좋습니다.
+
+


@sqaurelu 님 actions의 내용들을 적용해 주세요. 공통 린터입니다.

1ilsang · 2024-06-02T12:37:43Z

files/ko/learn/accessibility/css_and_javascript/index.md

+
+표준 링크 규칙은 밑줄이 그어져 있으며 표준 상태에서는 다른 색상(기본값: 파랑색), 이전에 링크를 방문했을 때는 다른 색상(기본값: 빨간색)으로 표시됩니다. 또한, 링크 위에 마우스를 올리면 마우스 포인터가 포인터 아이콘으로 바뀌고, 링크에 초점을 맞추거나(예: 탭 이동을 통해) 활성화되면 강조 표시됩니다. 다음 이미지는 Firefox(점선 윤곽선)와 Chrome(파란색 윤곽선) 모두 강조 표시를 보여줍니다.
+
+![Screenshot of a list of links in Firefox browser. The list contains 4 items. The second list item is highlighted using a blue dotted outline when it is focussed via tabbing.](focus-highlight-firefox.png)


Suggested change

![Screenshot of a list of links in Firefox browser. The list contains 4 items. The second list item is highlighted using a blue dotted outline when it is focussed via tabbing.](focus-highlight-firefox.png)

![Screenshot of a list of links in Firefox browser. The list contains 4 items. The second list item is highlighted using a blue dotted outline when it is focussed via tabbing.](focus-highlight-firefox.png)

png 파일은 content 레포에서 관리합니다. 번역 레포에서는 이미지를 가지고 있지 않아야 하므로 올려주신 3개의 png 파일 삭제 부탁드립니다.

Alt 내용도 번역 부탁드립니다.

1ilsang · 2024-06-02T12:37:58Z

files/ko/learn/accessibility/css_and_javascript/index.md

+
+![Screenshot of a list of links in Firefox browser. The list contains 4 items. The second list item is highlighted using a blue dotted outline when it is focussed via tabbing.](focus-highlight-firefox.png)
+
+![Screenshot of a list of links in Chrome browser. The list contains 4 items. The third list item is highlighted using a blue outline when it is focussed via tabbing.](focus-highlight-chrome.png)


위와 동일합니다. alt 내용도 번역 부탁드립니다(_ _).

1ilsang · 2024-06-02T13:05:49Z

files/ko/learn/accessibility/css_and_javascript/index.md

+
+{{LearnSidebar}}{{PreviousMenuNext("Learn/Accessibility/HTML","Learn/Accessibility/WAI-ARIA_basics", "Learn/Accessibility")}}
+
+CSS와 JavaScript는 적절하게 사용될 때 접근 가능한 웹 경험을 제공할 수 있지만, 잘못 사용될 경우 접근성에 심각한 영향을 줄 수 있습니다. 이 문서에서는 복잡한 콘텐츠라도 가능한 한 접근성을 보장하기 위해 고려해야 할 몇 가지 CSS와 JavaScript 모범 사례를 설명합니다.


Suggested change

CSS와 JavaScript는 적절하게 사용될 때 접근 가능한 웹 경험을 제공할 수 있지만, 잘못 사용될 경우 접근성에 심각한 영향을 줄 수 있습니다. 이 문서에서는 복잡한 콘텐츠라도 가능한 한 접근성을 보장하기 위해 고려해야 할 몇 가지 CSS와 JavaScript 모범 사례를 설명합니다.

CSS와 JavaScript는 적절하게 사용될 때 접근성 높은 웹 경험을 제공할 수 있지만, 잘못 사용될 경우 접근성에 심각한 영향을 줄 수 있습니다. 이 문서에서는 복잡한 콘텐츠라도 가능한 한 접근성을 보장하기 위해 고려해야 할 몇 가지 CSS와 JavaScript 모범 사례를 설명합니다.

웹 접근성에 대한 소개이므로 '접근성 높은'으로 가이드 드립니다.

1ilsang · 2024-06-02T13:08:44Z

files/ko/learn/accessibility/css_and_javascript/index.md

+        HTML, CSS, JavaScript에 대한 기본적인 이해와
+        <a href="/ko/docs/Learn/Accessibility/What_is_accessibility">접근성이 무엇인지</a>에 대한 이해.


Suggested change

HTML, CSS, JavaScript에 대한 기본적인 이해와

<a href="/ko/docs/Learn/Accessibility/What_is_accessibility">접근성이 무엇인지</a>에 대한 이해.

HTML, CSS, JavaScript에 대한

기본적인 이해와

<a href="/ko/docs/Learn/Accessibility/What_is_accessibility">

접근성이 무엇인지</a>에

대한 이해.

줄 수는 원본과 동일하게 해주세요.

관련 논의는 아래에서 확인할 수 있습니다.

https://github.com/orgs/mdn/discussions/655#discussioncomment-9251708

1ilsang · 2024-06-02T13:52:42Z

files/ko/learn/accessibility/css_and_javascript/index.md

+
+시각적 디자인에서 모든 콘텐츠가 한 번에 표시되지 않도록 요구하는 경우가 많이 있습니다. 예를 들어, [탭 정보 상자 예시](https://mdn.github.io/learning-area/css/css-layout/practical-positioning-examples/info-box.html) ([소스 코드](https://github.com/mdn/learning-area/blob/main/css/css-layout/practical-positioning-examples/info-box.html))에는 세가지 정보 패널이 있지만, 우리는 그것들을 서로의 위에 [배치](/ko/docs/Learn/CSS/CSS_layout/Positioning)하고 클릭하여 각각을 표시할 수 있는 탭을 제공하고 있습니다. (Tab 키와 Enter/Return을 사용하여 키보드로 액세스할 수도 있습니다.)
+
+![Three tab interface with Tab 1 selected and only its contents are displayed. The contents of other tabs are hidden. If a tab is selected, then it's text-color changes from black to white and the background-color changes from orange-red to saddle brown.](tabbed-info-box.png)


위와 동일합니다. alt 내용도 번역 부탁드립니다(_ _).

1ilsang · 2024-06-02T13:55:11Z

files/ko/learn/accessibility/css_and_javascript/index.md

+
+사용자가 자신만의 맞춤 스타일로 스타일을 재정의할 수 있습니다. 예를 들면 다음과 같습니다.
+
+- Sarah Maddox의 [Firefox에서 사용자 정의 스타일 시트(CSS)를 사용하는 방법](https://www.itsupportguides.com/knowledge-base/computer-accessibility/how-to-use-a-custom-style-sheet-css-with-firefox/)을 참조하세요. Firefox에서 이 작업을 수동으로 수행하는 방법을 다루는 유용한 가이드입니다.


Suggested change

- Sarah Maddox의 [Firefox에서 사용자 정의 스타일 시트(CSS)를 사용하는 방법](https://www.itsupportguides.com/knowledge-base/computer-accessibility/how-to-use-a-custom-style-sheet-css-with-firefox/)을 참조하세요. Firefox에서 이 작업을 수동으로 수행하는 방법을 다루는 유용한 가이드입니다.

- Sarah Maddox의 [Firefox에서 사용자 정의 스타일 시트(CSS)를 사용하는 방법](https://www.itsupportguides.com/knowledge-base/computer-accessibility/how-to-use-a-custom-style-sheet-css-with-firefox/)을 참고하세요. Firefox에서 이 작업을 수동으로 수행하는 방법을 다루는 유용한 가이드입니다.

1ilsang · 2024-06-02T14:02:35Z

files/ko/learn/accessibility/css_and_javascript/index.md

+- Sarah Maddox의 [Firefox에서 사용자 정의 스타일 시트(CSS)를 사용하는 방법](https://www.itsupportguides.com/knowledge-base/computer-accessibility/how-to-use-a-custom-style-sheet-css-with-firefox/)을 참조하세요. Firefox에서 이 작업을 수동으로 수행하는 방법을 다루는 유용한 가이드입니다.
+- 확장 프로그램을 사용하는 것이 더 쉬울 수도 있습니다. 예를 들어, Stylus 확장 프로그램은 [Firefox](https://addons.mozilla.org/en-US/firefox/addon/styl-us/)에서 사용할 수 있으며 Stylish는 [Chrome](https://chrome.google.com/webstore/detail/stylish-custom-themes-for/fjnbnpbmkenffdnngjfgmeleoegfcffe)과 동일합니다.
+
+사용자는 다양한 이유로 이 작업을 수행할 수 있다. 시각 장애가 있는 사용자는 방문하는 모든 웹 사이트에서 텍스트를 더 크게 표시하고 싶을 수도 있고, 심각한 색맹이 있는 사용자는 모든 웹 사이트를 쉽게 볼 수 있도록 고대비 색상으로 표시할 수도 있습니다. 필요가 무엇이든, 이에 익숙해져야 하며 그러한 변경 사항이 디자인에 적용될 수 있도록 디자인을 충분히 유연하게 만들어야 합니다. 예를 들어, 기본 콘텐츠 영역이 더 큰 텍스트를 처리할 수 있고(모든 내용이 표시되도록 스크롤되기 시작할 수도 있음) 단순히 숨기거나 완전히 중단되지 않도록 할 수 있습니다.


Suggested change

사용자는 다양한 이유로 이 작업을 수행할 수 있다. 시각 장애가 있는 사용자는 방문하는 모든 웹 사이트에서 텍스트를 더 크게 표시하고 싶을 수도 있고, 심각한 색맹이 있는 사용자는 모든 웹 사이트를 쉽게 볼 수 있도록 고대비 색상으로 표시할 수도 있습니다. 필요가 무엇이든, 이에 익숙해져야 하며 그러한 변경 사항이 디자인에 적용될 수 있도록 디자인을 충분히 유연하게 만들어야 합니다. 예를 들어, 기본 콘텐츠 영역이 더 큰 텍스트를 처리할 수 있고(모든 내용이 표시되도록 스크롤되기 시작할 수도 있음) 단순히 숨기거나 완전히 중단되지 않도록 할 수 있습니다.

사용자는 다양한 이유로 이 작업을 수행할 수 있다. 시각 장애가 있는 사용자는 방문하는 모든 웹 사이트에서 텍스트를 더 크게 표시하고 싶을 수도 있고, 심각한 색맹이 있는 사용자는 모든 웹 사이트를 쉽게 볼 수 있도록 고대비 색상으로 표시할 수도 있습니다. 필요가 무엇이든, 이에 익숙해져야 하며 그러한 변경 사항이 디자인에 적용될 수 있도록 디자인을 충분히 유연하게 만들어야 합니다. 예를 들어, 기본 콘텐츠 영역이 더 큰 텍스트를 처리할 수 있는지(모든 내용이 표시되도록 스크롤되기 시작할 수도 있음), 단순히 숨기거나 완전히 깨지지 않도록 할 수 있습니다.

표시되는 영역의 유연성을 말하는 문단이므로 '중단'보다는 '깨지는'으로 가이드 드립니다.

1ilsang · 2024-06-02T14:53:23Z

files/ko/learn/accessibility/css_and_javascript/index.md

+
+예제로 빠르고 지저분한 클라이언트 측 양식 유효성 검사를 작성했습니다. [form-validation.html](https://github.com/mdn/learning-area/blob/main/accessibility/css/form-validation.html)를 참조하세요. 여기서는 간단한 양식을 볼 수 있습니다. 하나 또는 두 필드를 모두 비워 두고 양식을 제출하려고 하면 제출이 실패하고 무엇이 잘못되었는지 알려주는 오류 메시지가 나타납니다.
+
+이러한 종류의 양식 유효성 검사는 눈에 띄지 않습니다. JavaScript를 사용할 수 없어도 양식을 완벽하게 사용할 수 있으며, 악의적인 사용자가 클라이언트 측 검증(예: 브라우저에서 JavaScript 비활성화)을 우회하기가 너무 쉽게 때문에 합리적인 양식 구현에서는 서버 측 유효성 검사도 활성화됩니다. 클라이언트 측 검증은 오류를 보고하는 데 여전히 매우 유용합니다. 사용자는 서버로 왕복하고 페이지를 다시 로드할 필요 없이 즉시 실수를 알 수 있습니다. 이는 확실히 유용한 점입니다.


Suggested change

이러한 종류의 양식 유효성 검사는 눈에 띄지 않습니다. JavaScript를 사용할 수 없어도 양식을 완벽하게 사용할 수 있으며, 악의적인 사용자가 클라이언트 측 검증(예: 브라우저에서 JavaScript 비활성화)을 우회하기가 너무 쉽게 때문에 합리적인 양식 구현에서는 서버 측 유효성 검사도 활성화됩니다. 클라이언트 측 검증은 오류를 보고하는 데 여전히 매우 유용합니다. 사용자는 서버로 왕복하고 페이지를 다시 로드할 필요 없이 즉시 실수를 알 수 있습니다. 이는 확실히 유용한 점입니다.

이러한 종류의 양식 유효성 검사는 눈에 띄지 않습니다. JavaScript를 사용할 수 없어도 양식을 완벽하게 사용할 수 있으며, 악의적인 사용자가 클라이언트 측 검증(예: 브라우저에서 JavaScript 비활성화)을 우회하기가 너무 쉽기 때문에 합리적인 양식 구현에서는 서버 측 유효성 검사도 활성화됩니다. 클라이언트 측 검증은 오류를 보고하는 데 여전히 매우 유용합니다. 사용자는 서버로 왕복하고 페이지를 다시 로드할 필요 없이 즉시 실수를 알 수 있습니다. 이는 확실히 유용한 점입니다.

1ilsang · 2024-06-02T15:00:10Z

files/ko/learn/accessibility/css_and_javascript/index.md

+
+## 실력을 시험해 보세요!
+
+이 문서를 끝까지 읽었지만 가장 중요한 정보를 기억할 수 있습니까? 계속 진행하기 전에 이 정보를 유지했는지 확인하기 위한 몇가지 추가 테스트를 확인할 수 있습니다. [실력 테스트: CSS 및 JavaScript 접근성](/ko/docs/Learn/Accessibility/CSS_and_JavaScript/Test_your_skills:_CSS_and_JavaScript_accessibility)를 참조하세요.


Suggested change

이 문서를 끝까지 읽었지만 가장 중요한 정보를 기억할 수 있습니까? 계속 진행하기 전에 이 정보를 유지했는지 확인하기 위한 몇가지 추가 테스트를 확인할 수 있습니다. [실력 테스트: CSS 및 JavaScript 접근성](/ko/docs/Learn/Accessibility/CSS_and_JavaScript/Test_your_skills:_CSS_and_JavaScript_accessibility)를 참조하세요.

이 문서를 끝까지 읽었지만 가장 중요한 정보를 기억할 수 있습니까? 계속 진행하기 전에 이 정보를 유지했는지 확인하기 위한 몇가지 추가 테스트를 확인할 수 있습니다. [실력 테스트: CSS 및 JavaScript 접근성](/ko/docs/Learn/Accessibility/CSS_and_JavaScript/Test_your_skills:_CSS_and_JavaScript_accessibility)를 참고하세요.

1ilsang · 2024-07-07T08:21:41Z

@sqaurelu 님 안녕하세요. 해당 PR 확인 부탁드리겠습니다(_ _)

github-actions · 2024-07-07T08:46:34Z

files/ko/learn/accessibility/css_and_javascript/index.md

+    <tr>
+      <th scope="row">필요한 사전 지식:</th>
+      <td>
+        HTML, CSS, JavaScript에 대한 


[mdn-linter] _{reported by reviewdog 🐶}

Suggested change

HTML, CSS, JavaScript에 대한

HTML, CSS, JavaScript에 대한

github-actions · 2024-07-07T08:46:34Z

files/ko/learn/accessibility/css_and_javascript/index.md

+    <tr>
+      <th scope="row">목표:</th>
+      <td>
+        웹 문서에 CSS와 JavaScript를 적절하게 사용하여 접근성을 최대화하고 


[mdn-linter] _{reported by reviewdog 🐶}

Suggested change

웹 문서에 CSS와 JavaScript를 적절하게 사용하여 접근성을 최대화하고

웹 문서에 CSS와 JavaScript를 적절하게 사용하여 접근성을 최대화하고

sqaurelu · 2024-07-07T08:48:42Z

@sqaurelu 님 안녕하세요. 해당 PR 확인 부탁드리겠습니다(_ _)

확인이 늦어 죄송합니다..! 주신 리뷰 모두 반영했습니다. 감사합니다 🙇‍♀️

1ilsang

LGTM 고생하셨습니다. 👍 💯

sqaurelu added 3 commits May 30, 2024 16:36

[ko] translate /ko/learn/accessibility/css_and_javascript/index.md

7f1751b

Merge remote-tracking branch 'origin/main' into ko_learn_accessibilit…

32d3398

…y_css_and_js

fix: l10n 태그를 추가한다.

c71cf35

sqaurelu requested a review from a team as a code owner May 30, 2024 07:51

sqaurelu requested review from 1ilsang and removed request for a team May 30, 2024 07:51

github-actions bot added the l10n-ko Issues related to Korean content. label May 30, 2024

github-actions bot reviewed May 30, 2024

View reviewed changes

1ilsang requested changes Jun 2, 2024

View reviewed changes

fix: 리뷰를 반영한다.

ee3ab75

github-actions bot reviewed Jul 7, 2024

View reviewed changes

fix: 린트 에러를 수정한다.

b929017

1ilsang approved these changes Jul 7, 2024

View reviewed changes

1ilsang merged commit 0f8d233 into mdn:main Jul 7, 2024
7 checks passed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[ko] translate /ko/learn/accessibility/css_and_javascript/index.md #20993

[ko] translate /ko/learn/accessibility/css_and_javascript/index.md #20993

sqaurelu commented May 30, 2024

github-actions bot May 30, 2024

1ilsang Jun 2, 2024

github-actions bot May 30, 2024

github-actions bot May 30, 2024

github-actions bot commented May 30, 2024 •

edited

Loading

1ilsang left a comment

1ilsang Jun 2, 2024

1ilsang Jun 2, 2024

1ilsang Jun 2, 2024

1ilsang Jun 2, 2024

1ilsang Jun 2, 2024

1ilsang Jun 2, 2024

1ilsang Jun 2, 2024

1ilsang Jun 2, 2024

1ilsang Jun 2, 2024

1ilsang Jun 2, 2024

1ilsang commented Jul 7, 2024

github-actions bot Jul 7, 2024

github-actions bot Jul 7, 2024

sqaurelu commented Jul 7, 2024

1ilsang left a comment


		표 CSS는 일반적으로 표를 디자인에 더 잘 어울리게 하고 보기 좋게 만드는 역할을 합니다. 표 헤더가 눈에 띄도록 하고(일반적으로 굵게 표시), 얼룩말 줄무늬를 사용하여 여러 행을 구문 분석하기 쉽게 하는 것이 좋습니다.


		![Three tab interface with Tab 1 selected and only its contents are displayed. The contents of other tabs are hidden. If a tab is selected, then it's text-color changes from black to white and the background-color changes from orange-red to saddle brown.](tabbed-info-box.png)

		스크린 리더 사용자는 이 중 어떤 것도 신경 쓰지 않습니다. 소스 순서가 적절하고 모든 내용을 읽을 수 있다면 만족합니다. 이 예에서 사용된 절대 위치 지정은 일반적으로 스크린 리더가 콘텐츠에 접근하는 것을 방해하지 않기 때문에 시각적 효과를 위해 콘텐츠를 숨기는 가장 좋은 메커니즘 중 하나로 간주됩니다.


		실제 양식 유효성 검사는 이보다 훨씬 더 복잡합니다. 입력한 이름이 실제로 이름처럼 보이고, 입력된 나이가 실제로 숫자이며 사실적인지(예: 음수가 아니며 4자리 ��만) 확인하고자 합니다. 여기서는 각 입력 필드에 대한 값이 입력되었는지 (`if (testItem.input.value === '')`) 확인하는 간단한 검사를 구현했습니다.

		유효성 검사가 수행되었을 때 테스트가 통과되면 양식이 제출됩니다. 오류가 있는 경우 (`if (errorList.innerHTML !== '')`) 양식 제출을 중지하고 ([`preventDefault()`](/ko/docs/Web/API/Event/preventDefault)를 사용) 생성된 오류 메시지를 표시합니다(아래 참조). 이 메커니즘은 오류가 있는 경우에만 오류가 표시됨을 의미하므로 사용성에 더 좋습니다.


		표준 링크 규칙은 밑줄이 그어져 있으며 표준 상태에서는 다른 색상(기본값: 파랑색), 이전에 링크를 방문했을 때는 다른 색상(기본값: 빨간색)으로 표시됩니다. 또한, 링크 위에 마우스를 올리면 마우스 포인터가 포인터 아이콘으로 바뀌고, 링크에 초점을 맞추거나(예: 탭 이동을 통해) 활성화되면 강조 표시됩니다. 다음 이미지는 Firefox(점선 윤곽선)와 Chrome(파란색 윤곽선) 모두 강조 표시를 보여줍니다.

		![Screenshot of a list of links in Firefox browser. The list contains 4 items. The second list item is highlighted using a blue dotted outline when it is focussed via tabbing.](focus-highlight-firefox.png)


		![Screenshot of a list of links in Firefox browser. The list contains 4 items. The second list item is highlighted using a blue dotted outline when it is focussed via tabbing.](focus-highlight-firefox.png)

		![Screenshot of a list of links in Chrome browser. The list contains 4 items. The third list item is highlighted using a blue outline when it is focussed via tabbing.](focus-highlight-chrome.png)


		{{LearnSidebar}}{{PreviousMenuNext("Learn/Accessibility/HTML","Learn/Accessibility/WAI-ARIA_basics", "Learn/Accessibility")}}

		CSS와 JavaScript는 적절하게 사용될 때 접근 가능한 웹 경험을 제공할 수 있지만, 잘못 사용될 경우 접근성에 심각한 영향을 줄 수 있습니다. 이 문서에서는 복잡한 콘텐츠라도 가능한 한 접근성을 보장하기 위해 고려해야 할 몇 가지 CSS와 JavaScript 모범 사례를 설명합니다.

	CSS와 JavaScript는 적절하게 사용될 때 접근 가능한 웹 경험을 제공할 수 있지만, 잘못 사용될 경우 접근성에 심각한 영향을 줄 수 있습니다. 이 문서에서는 복잡한 콘텐츠라도 가능한 한 접근성을 보장하기 위해 고려해야 할 몇 가지 CSS와 JavaScript 모범 사례를 설명합니다.
	CSS와 JavaScript는 적절하게 사용될 때 접근성 높은 웹 경험을 제공할 수 있지만, 잘못 사용될 경우 접근성에 심각한 영향을 줄 수 있습니다. 이 문서에서는 복잡한 콘텐츠라도 가능한 한 접근성을 보장하기 위해 고려해야 할 몇 가지 CSS와 JavaScript 모범 사례를 설명합니다.

		HTML, CSS, JavaScript에 대한 기본적인 이해와
		<a href="/ko/docs/Learn/Accessibility/What_is_accessibility">접근성이 무엇인지</a>에 대한 이해.


		시각적 디자인에서 모든 콘텐츠가 한 번에 표시되지 않도록 요구하는 경우가 많이 있습니다. 예를 들어, [탭 정보 상자 예시](https://mdn.github.io/learning-area/css/css-layout/practical-positioning-examples/info-box.html) ([소스 코드](https://github.com/mdn/learning-area/blob/main/css/css-layout/practical-positioning-examples/info-box.html))에는 세가지 정보 패널이 있지만, 우리는 그것들을 서로의 위에 [배치](/ko/docs/Learn/CSS/CSS_layout/Positioning)하고 클릭하여 각각을 표시할 수 있는 탭을 제공하고 있습니다. (Tab 키와 Enter/Return을 사용하여 키보드로 액세스할 수도 있습니다.)

		![Three tab interface with Tab 1 selected and only its contents are displayed. The contents of other tabs are hidden. If a tab is selected, then it's text-color changes from black to white and the background-color changes from orange-red to saddle brown.](tabbed-info-box.png)


		사용자가 자신만의 맞춤 스타일로 스타일을 재정의할 수 있습니다. 예를 들면 다음과 같습니다.

		- Sarah Maddox의 [Firefox에서 사용자 정의 스타일 시트(CSS)를 사용하는 방법](https://www.itsupportguides.com/knowledge-base/computer-accessibility/how-to-use-a-custom-style-sheet-css-with-firefox/)을 참조하세요. Firefox에서 이 작업을 수동으로 수행하는 방법을 다루는 유용한 가이드입니다.


		예제로 빠르고 지저분한 클라이언트 측 양식 유효성 검사를 작성했습니다. [form-validation.html](https://github.com/mdn/learning-area/blob/main/accessibility/css/form-validation.html)를 참조하세요. 여기서는 간단한 양식을 볼 수 있습니다. 하나 또는 두 필드를 모두 비워 두고 양식을 제출하려고 하면 제출이 실패하고 무엇이 잘못되었는지 알려주는 오류 메시지가 나타납니다.

		이러한 종류의 양식 유효성 검사는 눈에 띄지 않습니다. JavaScript를 사용할 수 없어도 양식을 완벽하게 사용할 수 있으며, 악의적인 사용자가 클라이언트 측 검증(예: 브라우저에서 JavaScript 비활성화)을 우회하기가 너무 쉽게 때문에 합리적인 양식 구현에서는 서버 측 유효성 검사도 활성화됩니다. 클라이언트 측 검증은 오류를 보고하는 데 여전히 매우 유용합니다. 사용자는 서버로 왕복하고 페이지를 다시 로드할 필요 없이 즉시 실수를 알 수 있습니다. 이는 확실히 유용한 점입니다.


		## 실력을 시험해 보세요!

		이 문서를 끝까지 읽었지만 가장 중요한 정보를 기억할 수 있습니까? 계속 진행하기 전에 이 정보를 유지했는지 확인하기 위한 몇가지 추가 테스트를 확인할 수 있습니다. [실력 테스트: CSS 및 JavaScript 접근성](/ko/docs/Learn/Accessibility/CSS_and_JavaScript/Test_your_skills:_CSS_and_JavaScript_accessibility)를 참조하세요.

	HTML, CSS, JavaScript에 대한
	HTML, CSS, JavaScript에 대한

	웹 문서에 CSS와 JavaScript를 적절하게 사용하여 접근성을 최대화하고
	웹 문서에 CSS와 JavaScript를 적절하게 사용하여 접근성을 최대화하고

[ko] translate /ko/learn/accessibility/css_and_javascript/index.md #20993

[ko] translate /ko/learn/accessibility/css_and_javascript/index.md #20993

Conversation

sqaurelu commented May 30, 2024

Description

Related issues and pull requests

github-actions bot May 30, 2024

Choose a reason for hiding this comment

Choose a reason for hiding this comment

github-actions bot May 30, 2024

Choose a reason for hiding this comment

github-actions bot May 30, 2024

Choose a reason for hiding this comment

github-actions bot commented May 30, 2024 • edited Loading

1ilsang left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

1ilsang commented Jul 7, 2024

github-actions bot Jul 7, 2024

Choose a reason for hiding this comment

github-actions bot Jul 7, 2024

Choose a reason for hiding this comment

sqaurelu commented Jul 7, 2024

1ilsang left a comment

Choose a reason for hiding this comment

github-actions bot commented May 30, 2024 •

edited

Loading