<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 }?>