| 일 | 월 | 화 | 수 | 목 | 금 | 토 |
|---|---|---|---|---|---|---|
| 1 | 2 | 3 | 4 | |||
| 5 | 6 | 7 | 8 | 9 | 10 | 11 |
| 12 | 13 | 14 | 15 | 16 | 17 | 18 |
| 19 | 20 | 21 | 22 | 23 | 24 | 25 |
| 26 | 27 | 28 | 29 | 30 | 31 |
- input
- JQuery
- accept
- ucfirst
- disabled
- 쿠키
- HTML
- 세션
- 이전주소
- CSS
- attr
- date
- php
- indexOf
- mb_strimwidth
- 웹프로그래밍
- Selector
- Javascript
- strpos
- mysql
- SubString
- parent of iframe
- 문자열포함여부
- File
- strtotime
- date포맷
- 세션사용법
- element추가
- Meta Tag
- 시간계산
- Today
- Total
Heojju
[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" />
'웹개발 > HTML' 카테고리의 다른 글
| [HTML] input type='file' accept 속성 (0) | 2017.09.29 |
|---|---|
| [HTML] input 속성 readonly / disabled / 차이 (0) | 2017.08.18 |
| [HTML] contentEditable (0) | 2017.06.08 |
| [HTML] <a> 태그 팝업창 띄우기 / window.open() (0) | 2016.12.14 |
| [HTML] 메타(Meta) 태그 (0) | 2016.12.05 |
