HTML 12단계 - 메타(META) 태그

안녕하세요

HTML 12단계 메타(Meta) 태그 시간이 돌아왔습니다.

저번 시간에는 레이아웃(Layout)을 알아봤는데요 혹시나 잊지는 않으셨겠죠?~

오늘도 화이팅하며, 부담없이 봐주시면 감사하겠습니다.

자 그럼 HTML 12단계 메타(Meta) 태그를 시작해볼께요~

메타(Meta) 태그는 HTML 문서가 어떤 내용을 담고 있고 문서의 키워드는 무엇이며, 누가 만들었는지, 언제 만들었는지 등의 문서의 자세한 내용과 특성을 나타내는 부분입니다.

메타(Meta) 태그는 문서의 헤더부분 <head> 와 </head> 의 사이에 위치하여야 하며, 메타(Meta) 태그에서 가장 일반적으로 사용되는 속성은 name, content 속성이 있습니다.

메타(Meta) 태그 name의 속성값으로는 title, subject, author, keywords 등이 있습니다.

주로 대형 포탈에서 검색엔진에게 문서의 내용을 요약해 주는 역활을 담당하고 있다고 할 수 있습니다.

메타(Meta) 태그는 검색엔진에게 정보를 전달할 뿐만 아니라 브라우저에게도 정보 전달을 하는 역할을 수행하고 있습니다.

자 그럼 예문 소스를 통하여 확인해보록 하겠습니다.

다음 예문은 홈페이지의 주소가 변경되었을 경우에 사용하는 태그입니다.

위 예문을 설명드리자면 다음과 같습니다.

브라우저 접속 후 3초뒤에 URL 속성값으로 지정되어있는 페이지로 이동한다는 의미입니다.

홈페이지의 주소가 바뀌거나 사용자가 홈페이지 접속 후 별다른 동작없이 관리자가 지정한 페이지로 바로 이동할때 사용할때 사용합니다.

다만 이렇게 이동하는 것은 하이퍼링크를 통해 클릭시 이동하는 거와는 다른 의미입니다.

하이퍼링크를 클릭한다는 것은 페이지를 읽고 있다가 클릭한 다른 페이지로 이동한다는 의미이지만, 메타(Meta) 태그를 이용한 페이지 이동은 http-equiv 속성값을 지정된거와 같이 refresh 한다는 의미입니다.

즉, 위와 같은 메타(Meta) 태그가 입력된 페이지는 읽지 않은걸로 인식하겠다는 의미를 가지고 있습니다.

마지막으로 살펴볼 예문은 한글로 작성 되었다는 홈페이지라는것을 브라우저에게 알리기 위한 메타(Meta) 태그를 지정하는 방법입니다.

예전의 경우 charset의 값을 euc-kr로 많이 사용하였지만 현재는 일반적으로 utf-8을 사용합니다.

utf-8의 예문 소스는 다음과 같습니다.

이렇게 브라우저에게 정보를 전달하기 위한 메타(Meta) 태그는 http-equiv 라는 속성을 사용합니다.

어떠신가요? 이해가 잘 되시나요?

항상 드리는 말씀이지만 반복해서 연습하셔야 된다는건 필수인거 아시죠?ㅎ

다음시간에는 폼(Form) 1탄에 대해서 포스팅 해볼껀데요. 많은 응원과 기대해주세요. 감사합니다.

이 포스팅은 쿠팡 파트너스 활동의 일환으로 이에 따른 일정액을 수수료를 제공받을 수도 있습니다

왓츠라이프