HTML의 navigator.language 속성은 현재 사용 중인 브라우저의 언어 버전을 문자열로 반환하는 자바스크립트 속성입니다. 이 속성을 활용하면 방문자가 사용하는 언어 설정(예: ko-KR, en-US, ja-JP 등)을 확인할 수 있으며, 다국어 웹사이트를 제작할 때 유용하게 사용됩니다.
구문(Syntax)
navigator.language 속성의 기본 사용 구문은 다음과 같습니다.
navigator.language
속성이 반환하는 값은 BCP 47 언어 태그 형식의 문자열입니다. 예를 들어 한국어 환경에서는 'ko-KR', 영어(미국) 환경에서는 'en-US'가 출력됩니다.
예제 코드
아래 예제는 버튼 클릭 시 브라우저의 언어 버전을 화면에 표시하는 간단한 데모입니다.
<!DOCTYPE html>
<html>
<style>
body {
color: #000;
height: 100vh;
background: linear-gradient(62deg, #FBAB7E 0%, #F7CE68 100%) no-repeat;
text-align: center;
}
.btn {
background: #db133a;
border: none;
height: 2rem;
border-radius: 20px;
width: 330px;
display: block;
color: #fff;
outline: none;
cursor: pointer;
margin: 1rem auto;
}
.show {
font-size: 1.5rem;
color: #fff;
}
</style>
<body>
<h1>HTML navigator.language 속성 데모</h1>
<button class="btn" onclick="display()">브라우저 언어 표시하기</button>
<div class="show"></div>
<script>
function display() {
document.querySelector(".show").innerHTML = "브라우저 언어 버전: " + navigator.language;
}
</script>
</body>
</html>실행 결과
페이지가 로드되면 위와 같은 화면이 나타납니다. 이제 '브라우저 언어 표시하기' 버튼을 클릭해 보세요.
버튼을 클릭하면 자바스크립트의 navigator.language 속성이 실행되어 현재 브라우저에 설정된 언어 버전이 아래에 출력됩니다. 위 예제에서는 ko-KR(한국어)로 표시된 것을 확인할 수 있습니다.
참고 사항
navigator.language는 사용자가 선호하는 첫 번째 언어만 반환합니다.- 선호하는 모든 언어 목록을 확인하려면
navigator.languages배열 속성을 사용하세요. - 주요 브라우저(Chrome, Edge, Firefox, Safari, Opera) 모두 해당 속성을 지원합니다.