meta(HTML)

내가 naver를 들어갈 때 , 컴퓨터 한개로만 네이버를 열지 않는다.

폰으로도 열고 태블릿으로도 열 수 있다.

네이버를 나만 쓰는가? 절대 아니지

이런 여러 환경에서도 쾌적하게 네이버를 쓰기 위해선

meta태그가 필요하다.

 

meta - 어떤 데이터가 있으면 그 데이터를 설명하는 데이터

HTML에 있는 태그들은 그 태그가 감싸고 있는 컨텐츠를 설명한다는 점에서 걔네도 메타 데이터라고 할 수 있다.

가령 h1,p,div 이런 것들도 말이다.

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

이런 웹개발할 때 흔히 보이는, meta는 무엇일까?

HTML 문서를 설명하는 데이터가 될 것이다.

 

charset : 문자의 인고딩을 지정한다.

• <meta charset="UTF-8">

 

name과 content : 여러 가지 목적으로 사용되며,'name' 속성에 따라 다양한 정보를 제공한다.

일부 'name'속성 값으로는 'description', 'keywords' , 'author'등이 있다.

<meta name="description" content="웹페이지 설명">

 

http-equiv : HTTP 헤더와 유사하게 동작하여 브라우저에 명시적 특정 동작을 지시한다.

예를 들어 캐시제어,페이지 리로드,콘텐츠 유형 설정 등이 가능하다.

• <meta http-equiv="refresh" content="5;url=https://example.com">

  <meta http-equiv="cache-control" content="no-cache, no-store, must-revalidate">

viewport : 모바일 브라우저에서 화면 크기와 초기확대 수준을 제어하는데 사용된다.

• <meta name="viewport" content="width=device-width, initial-scale=1.0">