HTML의 <meta>태그를 알아보자..

준영·2022년 11월 17일
0

이것저것..

목록 보기
3/15
post-custom-banner

<meta> 태그란?

<meta> 태그는 해당 문서에 대한 정보인 메타데이터(metadata)를 정의할 때 사용한다.

<meta> 요소는 <base>, <link>, <script>, <style>, <title> 요소와 같은 다른 메타데이터 관련 요소들이 나타낼 수 없는 다양한 종류의 메타데이터를 제공할 때 사용되며, 이렇게 제공된 정보는 브라우저나 검색 엔진, 다른 웹 서비스에서 사용하게 된다.

이러한 <meta> 요소는 언제나 <head> 요소 내부에 위치해야 한다!!

HTML5에서는 <meta> 요소를 통해 웹 페이지에서 사용자가 볼 수 있는 영역인 뷰포트(viewport)를 제어할 수 있도록 name 속성에 viewport 속성값을 제공하고 있다.


<meta> 태그 예제

1) 검색 엔진을 위한 키워드(keyword)를 정의
<meta name="keyword" content="HTML, meta, tag, element, reference">

2) 웹 페이지에 대한 설명(description)을 정의
<meta name="description" content="HTML meta tag page">

3) 문서의 저자(author)를 정의
<meta name="author" content="TCPSchool">

4) 모든 장치에서 웹 사이트가 잘 보이도록 뷰포트(viewport)를 설정
<meta name="viewport" content="width=device-width, initial-scale=1.0">


결과(?)

<head>
    <meta charset="UTF-8">
    <meta name="keyword" content="엥엥츈, 조준영, 메타태그">
    <meta name="description" content="엥엥츈의 페이지">
    <meta name="author" content="엥엥츈">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>HTML의 meta태그를 알아보자..</title>
</head>
profile
개인 이력, 포폴 관리 및 기술 블로그 사이트 👉 https://aimzero-web.vercel.app/
post-custom-banner

0개의 댓글