웹사이트에서 다국어를 지원하고 싶은 경우가 많은데요.
언어 설정 메뉴를 만들고 언어가 자동으로 변경되는 과정을
간단한 예제를 통하여 알아보도록 하겠습니다.
이번에 다뤄볼 웹 페이지의 HTML은 다음과 같이 정의해 보겠습니다.
<!DOCTYPE html>
<html>
<body>
<h1> 제목 </h1>
<p> 파이썬 </p>
<p> 자바스크립트 </p>
</body>
</html>위의 HTML로 웹 페이지를 띄우면 다음과 같이 내용이 등장합니다.
언어 설정 메뉴 만들기
이제 위의 HTML 내에 언어 설정 코드를 만드는 방법을 간단히 살펴볼 것 인데요.
HTML 파일 내에 아래의 내용처럼 추가해보고 결과를 확인해 보겠습니다.
여기서 기본 언어는 한국어로 설정되도록 하였습니다.
<!DOCTYPE html>
<html>
<body>
<h1> 제목 </h1>
<p> 파이썬 </p>
<p> 자바스크립트 </p>
<!-- 언어 설정 메뉴 생성 -->
<label for="languageSelector" style="position: absolute; top: 10px; left: 90px;">Language:</label>
<select id="languageSelector" style="position: absolute; top: 10px; left: 170px;">
<option value="en">English</option>
<option value="ko" selected>한국어</option>
</select>
</body>
</html>
브라우저 설정에 따라 위치는 다르게 나타날 수 있는데,
픽셀 값을 조정하여 원하는 위치로 이동시켜주시면 됩니다.
언어별 딕셔너리 생성하기
이제 설정할 언어별로 텍스트 내용을 다르게 적용시킬 작업 준비를 해볼 것인데요.
편리한 관리를 위하여 자바스크립트 내 딕셔너리로 내용을 관리해 보겠습니다.
<!DOCTYPE html>
<html>
<body>
<!-- 언어별 딕셔너리 생성 -->
<script>
const langResource = {
ko : {
title_name: "제목",
line1: "파이썬",
line2: "자바스크립트"
},
en : {
title_name: "Title",
line1: "Python",
line2: "JavaScript"
}
}
</script>
<h1> 제목 </h1>
<p> 파이썬 </p>
<p> 자바스크립트 </p>
<!-- 언어 설정 메뉴 생성 -->
<label for="languageSelector" style="position: absolute; top: 10px; left: 90px;">Language:</label>
<select id="languageSelector" style="position: absolute; top: 10px; left: 170px;">
<option value="en">English</option>
<option value="ko" selected>한국어</option>
</select>
</body>
</html>여기서 title_name, line1, line2 등의 key 이름은 각 언어에서 일치해야 하며,
HTML 내에서 id로 실제 텍스트 내용을 컨트롤할 예정입니다.
언어 변경을 위한 자바스크립트 코드 작성
이제 언어 설정 메뉴에서 선택한 언어로 실제 텍스트 값들을 변화시키기 위한
자바스크립트 코드를 작성해볼 차례입니다.
가운데 h1, p 태그가 딕셔너리 내 key에 매칭되는 id로 관리되도록 하였으며,
해당 값은 언어 변경 시 감지하는 리스너와
딕셔너리 내 key 값들을 순회하며 값을 바꾸는 함수로 해당 부분이 구현되었습니다.
완성된 전체 코드는 아래와 같습니다.
<!DOCTYPE html>
<html>
<body>
<!-- 언어별 딕셔너리 생성 -->
<script>
const langResource = {
ko : {
title_name: "제목",
line1: "파이썬",
line2: "자바스크립트"
},
en : {
title_name: "Title",
line1: "Python",
line2: "JavaScript"
}
}
</script>
<!-- id로 언어별 값 관리 -->
<h1 id = "title_name"></h1>
<p id = "line1"></p>
<p id = "line2"></p>
<!-- 언어 설정 메뉴 생성 -->
<label for="languageSelector" style="position: absolute; top: 10px; left: 90px;">Language:</label>
<select id="languageSelector" style="position: absolute; top: 10px; left: 170px;">
<option value="en">English</option>
<option value="ko" selected>한국어</option>
</select>
<!-- 언어 설정 메뉴 작동 코드 -->
<script>
/* 초기 언어는 한국어(ko)로 설정하고, 변경되면 맞춰서 업데이트 하는 리스너 구현 */
window.addEventListener("load", function() {
document.getElementById("languageSelector").value = "ko";
updateLanguage("ko");
document.getElementById("languageSelector").addEventListener("change", function() {
const selectedLang = this.value;
updateLanguage(selectedLang);
});
});
/* 딕셔너리 내 모든 key 값을 순회하며 변경하는 함수 */
function updateLanguage(lang) {
for (let key in langResource[lang]) {
const element = document.getElementById(key);
if (element) {
element.textContent = langResource[lang][key];
}
}
}
</script>
</body>
</html>위 코드를 바탕으로 웹 페이지를 열어보면,
언어 변경 시 텍스트 내용도 맞춰서 변경되는 점을 확인할 수 있습니다.
지금은 언어가 기본적으로 한국어로만 세팅되어 있지만,
브라우저의 언어 세팅에 따라 기본 언어가 바뀌면 사용자 입장에서는 편리할 것 입니다.
브라우저에 설정된 언어를 기준으로 웹사이트 기본 언어 설정하기 예제
브라우저에 설정된 언어로 웹페이지의 초기 언어를 지정할 수 있다면 유저 입장에서는 매우 편리할 것입니다. 이번 글에서는 간단한 예제를 바탕으로 초기 언어를 유연하게 설정하는 내용을 정
jimmy-ai.tistory.com
위 링크의 글에 브라우저의 언어에 따라 초기 언어를 세팅하는 방법을 정리해두었으니
필요하신 분들은 같이 봐주시면 좋을 듯 합니다. 감사합니다.
'JavaScript & React > JS 웹 개발' 카테고리의 다른 글
| 브라우저에 설정된 언어를 기준으로 웹사이트 기본 언어 설정하기 예제 (0) | 2023.09.10 |
|---|