<meta> 태그 metadata 메타데이터

메타가 생각나는 메타태그

 

 

메타는 그리스어로 ‘너머(beyon)’를 뜻해 현실세계를 넘어 또다른 공간. 가상세계(메타버스)를 차세대 주요 소셜 플랫폼으로 이끌어 나가겠다고 했다. 페이스북을 사용해봤다면 들어봤을 메타. 

→ 바디태그 너머의 공간에 적어야하는 메타태그  

 

또, 접두사 meta는 '~에 대해서(about)'를 뜻한다.

→ 웹페이지에 대한 부가속성, 정보를 담아내는 메타태그

 

예로, 페이지호환성에 대한 부가정보. 위치서비스. 오픈그래프 등등

웹컨텐츠 자체(body 태그)외에도 부가적인 데이터를 담을 수 있게 해주는 것이

바로 meta 태그이다.

 

보통, name과 content로 정보와 정보에 대한 값을 적는다. 경우에 따라 id도 적어준다.

<meta name="viewport" 
content="width=device-width, 
         initial-scale=1.0, 
         maximum-scale=1.0,
         minimum-scale=1.0, 
         user-scalable=no, 
         target-densitydpi=device-dpi" />

언뜻보면 content에 원하는 값을 쭉- 적는게 태그에 직접 CSS를 지정하는 '인라인 스타일'표기법이 떠오르기도 한다. 

<p style='background-color:#00f; color:ff0'>메타</p>

 

🎈 name="viewport"

모바일 웹페이지 작성시 화면에 대한 특정 정보를 전달하기 위해 사용

 

 

 

▲  content 내부 주요속성

 

- width : 넓이(px)

     값을 device-width로 하면 모바일 장치의 화면 넓이를 따라가게 된다.

 

- height : 높이(px)

      값을 device-height로 하면 모바일 장치의 화면 높이를 따라가게 된다.

 

- initial-scale : 초기 비율을 지정.

- user-scaleble : 확대(yes)/축소(no) 여부.

- minimum-scale : 화면을 축소할때 최소축소치.

- maximum-scale : 화면을 확대할때 최대확대치.

- target-densitydpi : 안드로이드에만 적용됨.

  device-dpi : 해상도가 달라도 편집에 맞추어 동일하게 보임.

  high-dpi, mideum-dpi : 일부기기에서 작업한 것보다 작게 보이거나 크게 보일수 있음.

 

 

▲  디바이스별 뷰포트

 <?php if(strpos($_SERVER['HTTP_USER_AGENT'],"iPhone")){?>
 <meta name="viewport" content="width=device-width, initial-scale=0.67, maximum-scale=0.67, minimum-scale=0.67, user-scalable=no, target-densitydpi=medium-dpi" />
 <?php }else if(strpos($_SERVER['HTTP_USER_AGENT'],"iPad")){?>
 <meta name="viewport" content="user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, width=device-width" />
 <?php }else if(strpos($_SERVER['HTTP_USER_AGENT'],"Android 2")){?>
 <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=yes, target-densitydpi=device-dpi" />
 <?php }else if(strpos($_SERVER['HTTP_USER_AGENT'],"Android")){?>
 <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=yes, target-densitydpi=device-dpi" />
 <?php }else if(strpos($_SERVER['HTTP_USER_AGENT'],"Opera Mini")){?>
 <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no, target-densitydpi=device-dpi" />
 <?php }else if(strpos($_SERVER['HTTP_USER_AGENT'],"Opera 9")){?>
 <meta name="viewport" content="initial-scale=0.75, maximum-scale=0.75, minimum-scale=0.75, user-scalable=no" />
 <?php }else if(strpos($_SERVER['HTTP_USER_AGENT'],"MSIE")){?>
 <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no, target-densitydpi=device-dpi" />
 <?php }else if(strpos($_SERVER['HTTP_USER_AGENT'],"FROYO")){?>
 <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no, target-densitydpi=device-dpi" />
 <?php }?>