2.2 meta 요소
meta 요소는 웹 페이지에 대한 설명(description)이나
키워드(keyword), “UTF-8”이나 문자셋(charset) 등을 <head>…</head> 블록 내에 설정하는데 사용하는 요소로 다음과 같은 속성들과 함께
사용합니다.
|
속성 |
기능 |
|
name |
metadata의 이름을 나타내는 속성. “application-name”, “author”, “description”, |
|
http-equiv |
문자 인코딩을 설정하거나 몇 초 후 페이지를 다시 로드할 것인지 아니면 해당 페이지에 사용될 스타일시트를 명시하는데 사용 |
|
content |
name, http-equiv 속성과 연관된 Text 형태의 데이터 |
|
charset |
HTML 문서에 대한 문자셋을 설정 |
meta 요소를 사용할 때는 적어도 name, http-equiv,
charset 중 하나 이상의 속성과 함께 사용해야 합니다. 이러한 속성들을 이용하여 다양한
형태로 사용이 가능한 데 여기서는 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://fromyou.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>
위와 같이 작성하여 “metawithrefresh.html”로 저장한 후 Firefox를 이용하여 열어보면 다음과 같이 처음에 “metawithrefresh.html”을
로드하면서 알림창을 나타냅니다.
그리고 7초 후 다시 “metawithrefresh.html” 문서를 다시 로드한 후 위에 나타난 알림창을 다시 나타냅니다. 이와 같이 정해진 시간(7초)에 한 번씩 해당 웹페이지를 다시 로드하고자 할 때 http-equiv, content 속성을 이용하여 쉽게 나타낼 수 있습니다. 다음으로 위 코드에서 <meta> 요소 부분을 다음과 같이 수정하여 특정 웹페이지로 이동하도록 해봅니다.
<meta http-equiv="refresh" content="7; http://fromyou.tistory.com" />
위와 같이 content 속성값에 이동할 웹사이트의 URL을 명시해주고 저장한
후 Firefox를 이용하여 “metawithrefresh.html”
문서를 열면 방금 전 결과 화면과 동일하게 알림창이 나타나게 되는데 여기서 알림참의 확인 버튼을 누르면 조금 전 결과와 달리 다음과
같이 content 속성값에 명시한 URL 웹페이지를 나타냅니다.
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>
위와 같이 작성한 후 “datalistko.html”로
저장하고 윈도우 탐색기에서 "datalistko.html" 파일을 선택하여 Firefox나 Opera를 이용하여 보면 다음과 같이 나타납니다.
위의 결과에서 보는 것처럼 datalistko.html 파일에
한글로 작성한 정보가 깨져서 나타납니다.
이를 조금 전 설명한 meta 태그 부분의 charset
속성값을 “ko”로 수정 저장한 후 다시 열어보면 다음과 같이 정상적으로 나타납니다.
이와 같이 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 부분에서 다양한 형태의 웹페이지에 동적인 작업을 수행하는 방법에 대해서 다루었으므로 그 때 이에 대한 부분을 이해하시면
됩니다.
- 본 저작물은 본인이 2011년 상반기부터 2012년 여름 즈음까지 도서 출판을 목적으로 약 470 페이지(A4, 폰트 10)으로 작성한 원본 중 HTML5 요소(Element)에 대한 부분을 그대로를 공개하는 것으로
그 처음 시작 부분이며 본 저작물에 대한 모든 권리는 본인(원철연)에서
있음을 알립니다.
개인적인
학습 목적으로 사용을 허용하며 온오프라인의 베포나 펌, 상업적인 용도의 사용은 삼가해주시기
바랍니다.
끝으로 책 한권 분량에 대한 목차(링크 포함)은 "http://fromyou.tistory.com/581"에서 다운로드 받아서 필요하신 학습을 하실 수 있으며 조금이나마 도움이 되셨으면 합니다.
'제가 쓴 책 > HTML5, CSS3 and JavaScript' 카테고리의 다른 글
| 3.2 section, header, nav 요소(Element)를 이용한 좌측면 구성 (4) | 2013.07.31 |
|---|---|
| 3. Section Elements (0) | 2013.07.31 |
| 2. metadata Elements (3) | 2013.07.31 |
| 1.4 환경 설정 및 기본 편집기 (3) | 2013.07.31 |
| 1.3.2 HTML5에서 요소의 속성(Attribute) 작성 방법 (6) | 2013.07.31 |
