[HTML]반응형 웹 뷰포트
메타태그 - viewport
viewport 는 pc에 맞춰져 있던 화면을 모바일 화면에 맞게 자동으로 바꿔주는 역할을 합니다.
<viewport 미사용>
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>VIEWPORT</title> </head> <body> <div> <img src='./food.jpg' width='100%'> <p>1. 매타(meta)태그란 HTML 문서가 어떤 내용을 담고 있고, 문서의 키워드는 무었이며, 누가 만들었는지 등의 문서 체의 특성을 담고 있습니다. 2. 사용법 사이에 추가합니다. 3. 속성 속성명 속성값 속성설명 charset character_set 문서의 인코딩을 지정합니다. content text http-equiv 또는 name 속성과 관련된 값을 제공합니다. http-equiv content-type default-style refresh content 속성의 정보/값에 대한 http 헤더를 제공합니다. name application-name author description generator keywords 메타데이터의 이름을 지정합니다. scheme format/URI HTML5에서는 지원되지 않습니다. content 속성값을 해석하는데 사용될 스키마를 지정합니다. </p> </body> </html> |
<viewport 사용>
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no" /> <title>VIEWPORT</title> </head> <body> <div> <img src='./food.jpg' width='100%'> <p>1. 매타(meta)태그란 HTML 문서가 어떤 내용을 담고 있고, 문서의 키워드는 무었이며, 누가 만들었는지 등의 문서 체의 특성을 담고 있습니다. 2. 사용법 사이에 추가합니다. 3. 속성 속성명 속성값 속성설명 charset character_set 문서의 인코딩을 지정합니다. content text http-equiv 또는 name 속성과 관련된 값을 제공합니다. http-equiv content-type default-style refresh content 속성의 정보/값에 대한 http 헤더를 제공합니다. name application-name author description generator keywords 메타데이터의 이름을 지정합니다. scheme format/URI HTML5에서는 지원되지 않습니다. content 속성값을 해석하는데 사용될 스키마를 지정합니다. </p> </body> </html> |
viewport를 사용하면 화면 해상도에 알맞게 보여진다.
[viewport 태그 사용법]
1. <head></head> 사이에 <meta name="viewport" content=""> 와 같이 사용합니다.
2. 속성값
속성 | 내용 | 단위 | 사용 및 설명 |
width | 너비 | px |
장치 너비로 설정하고 싶을 때에는 "width=device-width" 로 사용합니다. |
height | 높이 | px |
장치 높이로 설정하고 싶을 때에는 "height=device-height" 로 사용합니다. |
initial-scale | 초기 배율값 |
100% = 1.0 |
"initial-scale=1.0" 1.0 은 100%와 같습니다. |
minimum-scale | 최소 화면 배율 | 100% = 1.0 | "minimum-scale=1.0" 심하게 축소하는 것을 방지합니다. |
maximum-scale | 최대 화면 배율 | 100% = 1.0 |
"maximum-scale=1.0" 심하게 확대하는 것을 방지합니다. |
user-scalable | 확대, 축소 지원여부 | yes, no |
사용자가 크기 조절을 원치 않을 때에는 "user-scalable=no" 로 사용합니다. |
3. 여러개 사용할 때에는 , 를 사용하여 구분합니다.
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no" />
