HTML Academy · 강의

lang 속성과 스크린 리더

올바른 발음을 위해 페이지와 요소의 언어 선언하기

lang 속성과 스크린 리더은(는) CoddyKit의 무료 HTML Academy 강의입니다. 이것은 4개 중 1번째 강의입니다. 아래에서 전체 강의를 무료로 읽을 수 있으며, 내장 코드 에디터와 24/7 AI 튜터와 함께 브라우저에서 직접 실습할 수 있습니다. 이 강의는 HTML Academy 학습 경로의 일부이며, 진행 상황이 웹과 CoddyKit 앱에 동기화됩니다. HTML Academy 강의에는 총 4개의 강의가 포함되어 있습니다.

lang 특성이 하는 일

lang 특성은 BCP-47 언어 태그를 사용해 요소 콘텐츠의 언어를 선언합니다. 화면 낭독기는 이를 사용해 올바른 발음 엔진과 음성을 선택하고, 검색 엔진은 언어별로 색인할 때 이를 사용합니다.

html 요소에 설정하기

모든 페이지는 루트 요소에 기본 언어를 선언해야 합니다. 영어에는 <html lang="en">, 터키어에는 <html lang="tr">, 일본어에는 <html lang="ja">를 사용합니다. 이 설정이 없으면 화면 낭독기가 사용자의 시스템 기본 언어로 대체되어 거의 모든 단어를 잘못 발음하는 경우가 많습니다.

<!doctype html>
<html lang="en">
<head><meta charset="utf-8"><title>...</title></head>

BCP-47 태그

태그는 BCP-47을 따릅니다. 언어 코드(en, tr, ja), 선택적인 지역(en-US, en-GB, zh-Hant, zh-Hans), 그리고 드문 경우에 스크립트로 구성됩니다. 정확한 범위에서 가장 구체적인 태그를 사용하십시오. 지역별 철자가 중요하지 않다면 "en"만 사용해도 괜찮습니다.

페이지 중간의 언어 변경

다른 언어로 작성된 구역에는 자체 lang 특성을 표시하십시오. <blockquote lang="fr">Bonjour</blockquote>처럼 작성하면 됩니다. 화면 낭독기는 해당 구역에서 음성을 전환하므로 다국어 페이지에서도 정확하게 발음합니다.

<p>The motto is <span lang="la">Carpe diem</span>, meaning "seize the day".</p>

CSS 언어 선택자

CSS에서는 :lang(en)으로 언어를 대상으로 지정할 수 있습니다. blockquote:lang(fr)::before { content: "« "; }처럼 작성합니다. 이 선택자는 가장 가까운 조상의 lang 특성과 일치합니다. 언어에 따라 달라지는 인용 부호나 간격 같은 서체 규칙에 사용하십시오.

발음에 중요한 이유

영어의 "Live"와 프랑스어의 "Live"는 발음이 달라집니다. 독일어의 "Wir"는 "wear"가 아니라 "veer"처럼 발음합니다. 주변 구역이 독일어 또는 프랑스어라고 알려 주지 않으면 영어로 설정된 화면 낭독기는 두 단어를 모두 잘못 발음합니다.

연결된 언어를 위한 hreflang

링크의 hreflang 특성(<a href="/fr/" hreflang="fr">Français</a>)은 검색 엔진과 보조 기술에 연결된 페이지의 언어를 알려 줍니다. 완전한 국제 SEO를 지원하려면 사이트 전체의 hreflang 링크 태그와 함께 사용하십시오.

사용자 언어 감지

JavaScript는 navigator.languages에서 사용자가 선호하는 언어를 읽을 수 있습니다. 이 값은 우선순위 순서로 정렬된 BCP-47 태그 배열입니다. 이를 사용해 기본 로캘을 선택하거나 언어 전환을 제안할 수 있지만, 브라우저 기본값보다 사용자가 명시적으로 선택한 언어를 항상 우선하십시오.

서버 측 감지

HTTP Accept-Language 요청 헤더에는 브라우저 설정에 따른 사용자의 언어 선호도가 나열됩니다. 서버에서 이를 사용해 첫 요청에 올바르게 현지화된 HTML을 보내면 JavaScript가 실행되기 전부터 사용자가 자신의 언어로 콘텐츠를 볼 수 있습니다.

한 페이지에서 여러 언어 사용하기

Wikipedia 문서, 언어 학습 앱, 사전은 여러 언어를 함께 사용하는 경우가 많습니다. 짧은 구절이라도 모든 부분에 자체 lang 특성을 표시하십시오. 구역별 lang 특성이 없으면 화면 낭독기 음성과 CSS 인용 부호가 페이지 기본값으로 돌아갑니다.

흔한 실수

<html>에 lang을 빠뜨리는 경우(매우 흔함), 잘못된 언어 코드(lang="english" 대신 lang="en" 사용), 또는 언어 코드만으로 충분한데 지역 코드를 사용하는 경우가 있습니다. W3C 검사기와 Lighthouse 접근성 감사를 사용해 CI에서 이러한 문제를 찾아내십시오.

지식 확인

화면 낭독기 사용자의 경우 에 lang 특성을 설정하는 것이 특히 중요한 이유는 무엇인가요?

요약

BCP-47 태그(en, tr, ja, zh-Hant)를 사용해 <html>에 페이지 언어를 선언하십시오. 페이지 중간에 언어가 바뀌면 span 또는 section의 lang 특성으로 표시하여 화면 낭독기가 음성을 전환하게 하십시오. CSS의 :lang()으로 언어별 서체 규칙을 적용할 수 있습니다. 항상 lang을 설정하십시오. 비용은 들지 않으면서 화면 낭독기 발음, SEO, CSS 대상 지정 기능을 크게 향상합니다.

자주 묻는 질문

“lang 속성과 스크린 리더” 강의는 무료인가요?

네 — “lang 속성과 스크린 리더” 전체 내용을 이 웹사이트에서 무료로 읽을 수 있습니다. 인터랙티브하게 실습하려면(내장 코드 에디터와 24/7 AI 튜터), CoddyKit PRO로 업그레이드하면 HTML Academy 강의 전체를 잠금 해제할 수 있습니다. HTML Academy 강의에는 총 4개의 강의가 포함되어 있습니다.

“lang 속성과 스크린 리더”에서 뭘 배우나요?

올바른 발음을 위해 페이지와 요소의 언어 선언하기 브라우저에서 직접 실행하는 실습 코드로 HTML Academy을(를) 배우며, 24/7 AI 튜터가 강의를 진행하면서 질문에 답변해줍니다.

HTML Academy을(를) 시작하는 데 경험이 필요한가요?

사전 경험은 필요하지 않습니다. CoddyKit의 HTML Academy은(는) 초급자부터 고급 학습자까지를 위해 구성되어 있으므로, 여기서 시작하거나 처음부터 시작할 수 있으며 자신의 속도대로 진행할 수 있습니다. 이것은 4개 중 1번째 강의입니다.

“lang 속성과 스크린 리더” 강의는 얼마나 걸리나요?

대부분의 CoddyKit 강의는 약 5~10분이 소요됩니다. 각 강의는 간결하고 인터랙티브하여 꾸준한 진행이 가능하며, 웹과 앱에서 중단한 부분부터 바로 시작할 수 있습니다.

이 HTML Academy 강의에서 코드를 작성하고 실행할 수 있나요?

네. 모든 HTML Academy 강의에는 내장 코드 에디터가 포함되어 있으므로, 브라우저에서 바로 실제 코드를 작성하고 실행한 후 즉시 AI 피드백을 받을 수 있습니다 — 로컬 설정이 필요 없습니다.

이 강의의 모든 강의

← HTML Academy(으)로 돌아가기