html 로컬라이징 질문드립니다.!!

Question

html 로 이루어진 프로젝트를 로컬라이징 하고 있습니다.기본 언어는 한글이고 메인에서 버튼을 눌러 영어버전으로 바꿀수있게끔 코드를 짜고 있습니다.(페이지 이동시에도 메인에서 설정한 언어설정이 유지하도록)자바 스크립트 파일을 따로 만들어서 스크립트로 불러와서 사용합니다.const translations &#61; { en: { button_ko: &#34;Korean&#34;, button_en: &#34;English&#34;, title: &#34;TEST&#34;, }, ko: { button_ko: &#34;한국어&#34;, button_en: &#34;영어&#34;, title: &#34;테스트&#34;, } }; function applyTranslations(lang) { document.getElementById('title').innerText &#61; translations[lang].title; document.getElementById('button-ko').innerText &#61; translations[lang].button_ko; document.getElementById('button-en').innerText &#61; translations[lang].button_en; if (lang &#61;&#61;&#61; 'en') { document.getElementById('whatsappButton').style.display &#61; 'block'; // 영어 버전일 때 보이게 함 } else { document.getElementById('whatsappButton').style.display &#61; 'none'; // 한글 버전일 때 숨김 } document.documentElement.lang &#61; lang; } function setLanguage(lang) { localStorage.setItem('language', lang); applyTranslations(lang); } document.addEventListener('DOMContentLoaded', () &#61;> { const savedLanguage &#61; localStorage.getItem('language') || 'ko'; applyTranslations(savedLanguage); });이렇게 구성한 js 파일을 메인에서 이렇게 불러와서 사용합니다. (예시) 그런데 첫 메인페이지는 잘 적용이 되는데 다른 페이지로 이동했을때는 영어버전이 적용이 잘 안됩니다. 메인페이지랑 똑같이 해도 영어 적용이 잘 안되요.. 왜 그럴까요? 혹시 이 방법보다 더 좋은 방법이 있다면 알려주세요!! 감사합니다.

킁킁탐정 · Answer

다국어 페이지는 언어 별로 만드는게 가장 효과적이고 편리합니다. 작업량이 많지 않다면 lang 속성과 css를 사용해도 됩니다. 예를들어 다음과 같이 하면 영어만 표시됩니다.

한국어

English

[lang='ko'] { display: none; }https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/lang

rr j · Answer

다른 페이지에 넘어가면 변수가 초기화 되서 그런거 같네요.a.com/${언어}/${페이지} 이런 식으로 해서 언어를 가져와서 넣어 줄 수도 있고아니면 ?lang=ko 처럼 쿼리스트링으로 들고 다녀도 되구요

html 로컬라이징 질문드립니다.!!

2개의 답변

Q&A 목록