티스토리 뷰
meta 요소는 웹 페이지에 대한 설명(description)이나 키워드(keyword), “UTF-8”이나 문자셋(charset) 등을 <head>…</head> 블록 내에 설정하는데 사용하는 요소로 다음과 같은 속성들과 함께 사용합니다.
|
속성 |
기능 |
|
name |
metadata의 이름을 나타내는 속성. “application-name”, “author”, “description”, |
|
http-equiv |
문자 인코딩을 설정하거나 몇 초 후 페이지를 다시 로드할 것인지 아니면 해당 페이지에 사용될 스타일시트를 명시하는데 사용 |
|
content |
name, http-equiv 속성과 연관된 Text 형태의 데이터 |
|
charset |
HTML 문서에 대한 문자셋을 설정 |
다. 이러한 속성들을 이용하여 다양한 형태로 사용이 가능한 데 여기서는 http-equiv, content, charset 속성을 이용한 meta 요소 사용방법에 대해서 소개합니다.
http-equiv 속성을 이용한 페이지를 다시 로드하거나 다른 페이지로 이동하게 만들기
현재 웹 페이지를 다시 로드하거나 다른 페이지로 이동하게 하기 위해서는 meta 요소의 http-equiv 속성을 이용하여 어렵지 않게 다음과 같은 형식을 이용하여 구현할 수 있습니다.
정해진 시간(7초) 후 페이지 다시 로드
<meta http-equiv=”refresh” content=”7” />
정해진 시간(7초) 후 다른 페이지 로드하기
<meta http-equiv=”refresh” content=”7; http://tkdev.tistory.com” />
메모장을 열어서 다음과 같이 코드를 작성합니다.
<!DOCTYPE HTML>
<html>
<head>
<title>meta 예제</title>
<meta http-equiv="refresh" content="7" />
<script>
function load() {
alert("페이지가 로드되었습니다.");
}
window.onload = load;
</script>
</head>
<body>
<p>7초 후 동작</p>
</body>
</html>
charset 속성을 이용한 웹 페이지 한글 환경 설정하기
기본적으로 웹 페이지를 생성하면 웹 페이지의 기본 문자 인코딩이 “UTF-8”입니다. 여러분들이 작성하는 웹 페이지가 영어라면 아무런 문제가 되지 않습니다만 여러분이나 저나 작성하는 웹페이지의 대부분은 한글이므로 이에 대한 한글 환경 설정을 해줄 필요가 있는데 meta 태그를 이용하여 다음과 같이 설정을 해주게 됩니다.
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="Content-Type" content="text/html; charset=ko">
위와 같이 charset 속성값은 “ko”로 설정해주어 한글 웹페이지로 환경설정을 할 수 있습니다.
이제 메모장을 열어서 확인해볼 차례입니다.
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <!-- ① -->
<title>한글 설정 예제</title>
</head>
<body> 좋아하는 프로그래밍 언어를 입력하세요.<br />
<input type="text" name="web" list="dlist" />
<datalist id="dlist">
<option value="HTML5" />
<option value="자바스크립트" />
<option value="jQuery" />
<option value="ASP.NET" />
<option value="자바" />
</datalist>
</body>
</html>
이와 같이 meta 태그를 이용하여 HTML5 웹 페이지에 대한 한글 설정을 간단하게 수행할 수 있습니다. 참고로 중국, 일본 등에 대한 문자 인코딩을 보려면 인터넷 IP 주소 할당이나 최상위 도메인이름을 관리하는 기관인 IANA의 “http://www.iana.org/ assignments/language-subtag-registry”에서 해당 국가를 찾아보면 중국 표준어는 “cmn”, 일본 “ja”, 러시아 “ru”의 형태로 나타납니다.
이번 예제에서 만일 여러분이 사용하는 Firefox나 Opera 브라우저가 이미 브라우저 환경설정 부분에서 문자 인코딩(encoding)이 한국어로 되어 있다면 위와 같이 한글이 깨져서 나오지 않고 정상적으로 나오게 됩니다.
참고로 문자 인코딩에 대하여 W3C 저자들은 HTML 요소의 lang 속성에 “<html lang=”ko”>” 같은 형태로 설정하여 사용할 것을 권장합니다.
이외에도 link, style 요소에 대한 부분은 CSS3를 다루는 부분에서 어떻게 웹페이지에 스타일을 적용할 수 있는지 구체적으로 다루게 됩니다.
다음으로 script 요소 역시 javaScript 부분에서 다양한 형태의 웹페이지에 동적인 작업을 수행하는 방법에 대해서 다루었으므로 그 때 이에 대한 부분을 이해하시면 됩니다
'HTML5-CSS' 카테고리의 다른 글
| 관리자 템플릿 참고 사이트 모음 (0) | 2016.07.29 |
|---|---|
| jQuery 로 CSS의 미디어 쿼리를 활용하여 브라우저의 해상도를 감지하는 방법 (0) | 2016.07.23 |
| 2. metadata Elements (0) | 2016.04.28 |
| 1.4 HTML5 기본 편집기 (0) | 2016.04.28 |
| 1.3.2 HTML5에서 요소의 속성(Attribute) 작성 방법 (0) | 2016.04.28 |
