HTML DOM Link hreflang 속성이란?
HTML DOM의 Link hreflang 속성은 <link> 요소로 연결된 문서가 작성된 언어 코드를 가져오거나 설정하는 데 사용됩니다. 이 속성은 주로 외부 스타일시트나 다른 리소스가 어떤 언어로 작성되었는지 브라우저와 검색 엔진에 알려주는 역할을 합니다.
구문
hreflang 속성의 기본 구문은 다음과 같습니다.
hreflang 속성 값 반환하기
linkObject.hreflang
hreflang에 언어 코드 설정하기
linkObject.hreflang = langCode
언어 코드는 ISO 639-1 표준을 따르며, 예를 들어 영어는 'en', 스페인어는 'es', 한국어는 'ko'처럼 두 글자 소문자로 표기합니다.
예제
다음은 Link hreflang 속성을 활용한 실제 예제입니다.
<!DOCTYPE html>
<html>
<head>
<title>Link hreflang</title>
<link id="extStyle" hreflang='en' rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<form>
<fieldset>
<legend>Link-hreflang</legend>
<h3>Spanish</h3>
<input type="button" onclick="changeStyle()" value="In what language is linked document written?">
<div id="divDisplay"></div>
</fieldset>
</form>
<script>
var divDisplay = document.getElementById("divDisplay");
var extStyle = document.getElementById("extStyle");
function changeStyle(){
if(extStyle.hreflang === 'en'){
divDisplay.textContent = 'The linked document is written in english';
document.getElementsByTagName('h3')[0].textContent = 'English'
}
}
</script>
</body>
</html>style.css 파일 내용
위 예제에서 참조하는 'style.css' 파일의 내용은 다음과 같습니다.
form {
width:70%;
margin: 0 auto;
text-align: center;
}
* {
padding: 2px;
margin:5px;
}
input[type="button"] {
border-radius: 10px;
}
h3 {
font-size: 72px;
color:gold;
}실행 결과
위 코드를 실행하면 다음과 같은 화면을 볼 수 있습니다.
버튼 클릭 전
'In what language is linked document written?' 버튼을 클릭하기 전에는 초기 상태의 화면이 표시됩니다.
버튼 클릭 후
버튼을 클릭하면 JavaScript의 changeStyle() 함수가 실행되어, hreflang 값이 'en'인지 확인한 뒤 연결된 문서가 영어로 작성되었다는 메시지가 화면에 출력됩니다.
정리
Link hreflang 속성은 다국어 웹사이트를 개발할 때 특히 유용합니다. 연결된 리소스의 언어 정보를 동적으로 확인하거나 변경함으로써, 사용자의 언어 설정에 맞는 스타일시트나 문서를 제공하는 등의 활용이 가능합니다.