고정 헤더 영역
상세 컨텐츠
본문
728x90
이제 소프트웨어를 채워 넣었으면 하드웨어를 연결해 주자. (적절한 표현일지 모르겠지만)
HTML 페이지상 언어를 선택하는 콤보박스?를 만들어주고, 콤보박스 선택에 따른 페이지 이동을 구현해보고자 한다.
구글링을 포함한 검색을 통해 기능을 만들어보자.
(세상에는 자기 재능을 잔뜩 기부하여 주시는 하해와 같은 코딩 전문가 선생님들이 많이 계시다.)
<body></body> 사이에 아래와 같이 코딩을 넣어주자. (나는 의문점을 가지지 않고 일단 따라 해 본다.)
<body>
<section class="container d-flex flex-column justify-content-center align-items-center">
<span class="select-language">Language</span>
<select onchange="changeLanguage(this)" class="custom-select col-8">
<option value="ko" lang="ko">한국어</option>
<option value="en" lang="en">English</option>
<option value="fr" lang="fr">Français</option>
<option value="es" lang="es">español</option>
<option value="it" lang="it">Italiano</option>
<option value="ja" lang="ja">日本語</option>
<option value="zh" lang="zh">中文</option>
<option value="vi" lang="vi">tiếng Việt</option>
<option value="id" lang="id">Bahasa Indonesia</option>
<option value="th" lang="th">ไทย</option>
</select>
</section>
<script>
var ua = navigator.userAgent.toLowerCase();
function changeLanguage(lang) {
if ((navigator.userAgent.indexOf('Mac OS') > 0 && navigator.userAgent.indexOf('Safari') <= 0) || ((navigator.userAgent.indexOf('Android') > 0 && navigator.userAgent.indexOf('wv)') > 0))) {
if (ua.match('android') != null) {
window.open("googlechrome://navigate?url=" + lang.value + "/index.html"); //android
} else if (ua.indexOf("iphone") > -1 || ua.indexOf("ipad") > -1 || ua.indexOf("ipod") > -1) {
window.location.href = "/" + lang.value + ".html";
} else {
window.location.href = "/" + lang.value + ".html";
}
} else {
window.location.href = "/" + lang.value + ".html";
}
}
</script>
</body>
언어를 선택하는 껍데기 역할인 콤보박스가 있는 듯 싶고,
콤보박스를 선택할 때 changeLanguage 라는 function이 실행되는 것 같다. // <section></section>
function은 페이지를 접속하는 단말기 매체의 종류에 따라 다르게 동작하는데,
콤보박스의 선택에 따라 lang.value 변수 값을 가져와 이를 활용하여
window.location.href 메소드를 통해 특정 웹 주소로 이동하는 기능으로 보여진다. // function(){}
본인이 설계한 페이지 구조와 페이지별 주소 형식에 맞춰서 코드를 수정해야 할 부분일 것이다.
그리고 내가 참고한 자료에서 <head></head>에 아래와 같은 코드를 추가하였던데,
이 코딩 형식과 관련하여 자료를 찾아보았지만 사실 잘 모르겠다. (그냥 따라해보자.)
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<link ref="속성값" hreflang="언어코드" href="URL"> 이 기본 템플렛이고, 이게 무엇일까 하고 찾아보니,
속성값 : alternate / 프린트 페이지나 번역된 페이지와 같이 해당 문서의 대체 버전에 대한 링크를 제공함.
언어코드 : 알파벳 두 문자로 이루어진 언어 코드 / ex) ko, en, zh, ja, fr 등
URL : 링크된 외부 리소스(external resource)의 URL
자료에서는 위와 같은 기능이라고 하는데, 역시나 잘 모르겠다. 일단 구현하고 보자.
겪다보면 이 궁금증들이 하나 둘 이어져 선이 되고 도형이 되서 깨닳게 될 것 이라 믿어본다.
(반대로 기초부터 착실히 쌓지않아 무너지는 모래성이 동시에 연상되지만 그렇지 않길 바라자.)
728x90
'생활코딩' 카테고리의 다른 글
| HTML Style(CSS) 보정 w/ 개발자도구 F12 (0) | 2024.01.18 |
|---|---|
| HTML tag hide(), show() / div, img 등 (0) | 2024.01.18 |
| HTML img attr() src Value 변경 / JQUERY (0) | 2024.01.18 |
| HTML Language 변환 (1) / HTML Page Add + Translate language Manually (0) | 2024.01.18 |
| 웹 개발 (feat. 조코딩님) / 퍼스널컬러 AI 테스트 (0) | 2024.01.18 |
