HTML 강좌 8강 - HTML 태그 익히기#7 - Meta 태그
이번에는 메타태그에 대해 간단히 이해하고 넘어가도록 하겠습니다.
먼저 메타태그가 무엇인지 보도록 하죠.
<meta>태그는 HTML 문서가 어떤 내용을 담고 있는지, 그리고 문서의 키워드는 무엇인지 등의 문서의 특성을 담고 있습니다.
<meta>태그는 <head> 와 </head> 사이에 위치합니다.
그리고 <meta>태그는 주로 name과 content 속성을 사용합니다.
<meta name="title" content="메타 태그 연습">
<meta name="keywords" content="meta, 메타">
위와 같이 사용합니다.
그리고 인기있는 SNS인 페이스북에 관련한 메타태그도 있습니다.
<meta property="og:image" content="이미지경로">
위와같이 설정해주면 페이스북에서 공유를 할 경우 이미지를 지정할 수 있습니다.
페이스북이나 카카오톡 같은 SNS 공유에 대한 스크립트도 차후에 공부하도록 할게요~
그리고 페이지를 이동시키는 기능도 있습니다.
<meta http-equiv="refresh" content="5;url=http://www.naver.com">
위와 같이 코딩을 하면 웹문서가 열리고 5초후에 url을 지정해 놓은 사이트로 이동을 합니다.
또한 문서의 캐릭터셋을 지정할 수 있습니다.
캐릭터셋이란 각종 언어에 대한 문서의 호환성 이라고 볼 수 있는데요.
<meta http-equiv="content-type" content="text/html; charset=euc-kr">
위와같이 charset=euc-kr 이라고 지정을 해주면 한글로 만들어진 문서임을 의미합니다.
실제로 코딩을 하고 테스트를 해보도록 하죠.
위와 같이 문서가 보이고, 잠시 후에 네이버로 이동하는 것을 볼 수 있습니다.
예제 파일은 첨부파일에서 받을 수 있습니다 :)
08.zip'코딩이야기 > HTML' 카테고리의 다른 글
| HTML 강좌 10강 - HTML 태그 익히기#9 - iframe (0) | 2016.02.03 |
|---|---|
| HTML 강좌 9강 - HTML 태그 익히기#8 - 이미지맵 (0) | 2016.01.24 |
| HTML 강좌 7강 - HTML 태그 익히기#6 - LIST 태그 (0) | 2016.01.11 |
| HTML 강좌 6강 - HTML 태그 익히기#5 - TABLE 태그 (0) | 2016.01.09 |
| HTML 강좌 5강 - HTML 태그 익히기#4 (0) | 2016.01.08 |