HTML DOM lang 속성은 요소 콘텐츠에 적용된 언어 코드를 나타내는 문자열을 반환하거나 설정합니다. 예를 들어 영어(English)는 'en', 스페인어(Spanish)는 'es'처럼 ISO 639-1 표준 두 자리 언어 코드를 사용합니다. 이 속성을 활용하면 스크린 리더, 검색 엔진, 번역 도구 등이 콘텐츠의 언어를 정확하게 인식하도록 도울 수 있습니다.
문법
lang 속성의 기본 문법은 다음과 같습니다.
언어 코드 반환하기
HTMLElementObject.lang
언어 코드 설정하기
HTMLElementObject.lang = 'lang_code'
예제
다음은 HTML DOM lang 속성을 활용한 예제입니다. 버튼을 클릭하면 입력 요소의 lang 속성이 영어('en')에서 스페인어('es')로 변경되고, 입력 필드의 텍스트도 함께 스페인어로 바뀝니다.
<!DOCTYPE html>
<html>
<head>
<title>HTML DOM lang</title>
<style>
form {
width:70%;
margin: 0 auto;
text-align: center;
}
* {
padding: 2px;
margin:5px;
}
input[type="button"] {
border-radius: 10px;
}
</style>
</head>
<body>
<form>
<fieldset>
<legend>HTML-DOM-lang</legend>
<label for="langSelect">Editor:
<input type="text" size="25" lang="en" id="langSelect" value="This is a learning tutorial">
</label>
<input type="button" onclick="updateValue()" value="Translate to Spanish">
<div id="divDisplay">Currently accepted language :</div>
</fieldset>
</form>
<script>
var divDisplay = document.getElementById("divDisplay");
var inputlang = document.getElementById("langSelect");
divDisplay.textContent += langSelect.lang;
function updateValue() {
inputlang.lang = 'es';
inputlang.value = 'Este es un tutorial de aprendizaje';
divDisplay.textContent = 'Currently accepted language : '+langSelect.lang;
}
</script>
</body>
</html>
코드 동작 방식
페이지가 로드되면 divDisplay 요소에 입력 필드의 현재 lang 속성 값인 'en'이 표시됩니다. 그 후 'Translate to Spanish' 버튼을 클릭하면 updateValue() 함수가 실행되어 다음 작업이 수행됩니다.
- 입력 요소의 lang 속성 값을 'es'(스페인어)로 변경
- 입력 필드의 텍스트를 스페인어 문장으로 교체
- 화면에 표시된 현재 언어 코드 정보를 갱신
실행 결과
위 코드를 실행하면 다음과 같은 결과가 출력됩니다.
'Translate to Spanish' 버튼을 클릭하기 전 −
'Translate to Spanish' 버튼을 클릭한 후 −
