728x90
웹페이지에서 클라이언트에 특정 정보를 전달하기 위한 목적으로 meta태그를 사용합니다. 이때 만약 모바일에서 웹페이지에 접근하는 경우 모바일 화면에 대한 적절한 대응을 위해 meta태그에 뷰포트(viewport)를 사용합니다.
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">viewport에는 다음과 같은 속성을 입력해 모바일 화면에 대응될 수 있도록 합니다.
| width | 화면의 너비를 의미하며 200, 300등의 값을 지정하거나 device-width로 장치의 화면에 맞출 수 있습니다. |
| height | 화면의 높이를 의미하며 200, 300등의 값을 지정하거나 device-height로 장치의 화면에 맞출 수 있습니다. |
| initial-scale | 화면확대비율로 1.0, 2.0등의 값을 지정합니다. |
| user-scalable | yes, no등의 값을 지정하여 임의의 화면확대가 가능한지여부를 설정합니다. |
| minimum-scale | 최소축소비율로 1.0, 2.0등의 값을 지정합니다. |
| maximum-scale | 최대축소비율로 1.0, 2.0등의 값을 지정합니다. |
728x90
'Web > HTML5 & CSS3' 카테고리의 다른 글
| [HTML5&CSS3] 변형 속성 (0) | 2019.12.19 |
|---|---|
| [HTML5&CSS3] 스프라이트(Sprite) 이미지 (0) | 2019.12.18 |
| [HTML5&CSS3] 뷰포트(viewport) (0) | 2019.12.17 |
| [HTML5&CSS3] 벤더 프리픽스(vendor prefix) (0) | 2019.12.05 |
| [HTML5&CSS3] 선형 그레디언트(linear-gradient) (0) | 2019.11.25 |
| [HTML5&CSS3] 그림자 효과 (0) | 2019.11.19 |
