What is The Viewport?
The viewport is the user's visible area of a web page.
뷰포트는 웹페이지에서 유저에게 보여지는 영역이다.
The viewport varies with the device, and will be smaller on a mobile phone than on a computer screen.
뷰포트는 디바이스에 따라 다양해진다. 그리고 컴퓨터 스크린 보다는 모바일에서 더 작다.
Before tablets and mobile phones, web pages were designed only for computer screens, and it was common for web pages to have a static design and a fixed size.
태블릿 과 모바일 전 웹페이지는 컴퓨터 스크린용으로 디자인 되었고, 그 것은
웹페이지가 고정된 디자인과 사이즈를 가지는 것에 일반적이었다.
Then, when we started surfing the internet using tablets and mobile phones, fixed size web pages were too large to fit the viewport. To fix this, browsers on those devices scaled down the entire web page to fit the screen.
그런뒤 우리가 태블릿과 모방리 폰으로 웹 서핑을 시작했을때, 고정된 사이즈의 웹페이지는 뷰포트를 맞추기에 너무 컸다. 이점을 수정하기 위해서, 그 장치들의 브라우저들은 화면을 전체 웹페이지 맞추기 위해서 전체 스케일 다운을 했다.
This was not perfect!! But a quick fix.
이것은 완벽하지 않지만!! 빠르다.
즉, 뷰포트는 브라우저 화면에서 유저들에게 보여지는 영역이다.
여러장치들이 나오면서 뷰포트의 화면크기도 달라지기에 자동으로 스.케일이 조정되는 것이 필요해진 것이다
그럼, 다음 뷰포트를 세팅하는 방법을 알아보자.
이것을 알면 모바일 이든 태블릿이든 스켈이 자동으로 조정이 된다.
물론 완벽하지는 않다고 하지만 말이다.
Setting The Viewport
HTML5 introduced a method to let web designers take control over the viewport, through the <meta> tag.
HTML5는 <meta>태그를 통해서 웹 디자이너가 뷰포트를 컨트롤 하는 방법을 소개했다.
You should include the following <meta> viewport element in all your web pages:
당신은 다음에 오는 <meta> 뷰포트 엘리먼트를 당신의 모든 브라우저에 포함시켜야 한다.
<meta name="viewport" content="width=device-width, initial-scale=1.0">
This gives the browser instructions on how to control the page's dimensions and scaling.
이것은 브라저에게 페이지의 치수와 스케일을 컨트롤 하는 방법에 대한 지침을 준다.
The width=device-width part sets the width of the page to follow the screen-width of the device (which will vary depending on the device).
width=device-width 파트는 디바이스의 스크린 너비에 따르도록 페이지의 너비를 설정한다.
이것은 장치에 다양하게 의존한다.
The initial-scale=1.0 part sets the initial zoom level when the page is first loaded by the browser.
initial-scal=1.0 파트는 브라우저에 의해 페이지가 처음 로드 되었을때 초기 줌 레벨을 설정한다.
1배라는 뜻이다.
해당 메타태그를 적용함으로써 모바일 과 태블릿 등에서도
기기 화면에 맞게 스케일이 조정됨을 하기 예제로 확인해 볼 수 있다.
Here is an example of a web page without the viewport meta tag, and the same web page with the viewport meta tag:
메타태그를 설정했을때와 하지 않았을때의 화면은 다르다.
VSC 에디터에서 자동으로 완성된 코드를 보면
Head 의 기본 메타태그에 하기 내용이 들어가 있다.<meta name="viewport"
content="width=device-width, initial-scale=1.0">
뷰포트를 기기에 맞게 설정하기 위한 세팅값임을 이제는 알 수 있다.
댓글
댓글 쓰기