스마트폰 모바일 화면 맞춤 뷰포트 Viewport

Studio 안김/HTML5 2022. 8. 23. 16:09

뷰포트

웹 페이지에서 사용자가 볼 수 있는 영역

모바일 기기 화면에서 실제 내용이 표시되는 영역

태블릿 PC 스마트폰 이전에는 웹페이지가 PC 화면 전용으로 디자인되었으며 웹페이지는 고정된 디자인과 크기를 갖는 것이 일반적이었다. 태블릿 PC 스마트폰 사용이 늘어나면서 고정 크기 웹페이지가 화면에 맞지 않으면서 이 문제를 해결하기 위한 것이 뷰포트.

화면에 맞추어 축소 확대 가능한 반응형 웹사이트를 만들기 위해서는 뷰포트 메타 태그를 사용하는 것부터 시작한다.

뷰포트 설정

<head></head> 태그 사이 <meta> 태그에 작성한다.

모바일 기기에서 렌더링 되는 영역 뷰포트의 크기 조절 줌 레벨 조정

가장 많이 사용하는 기본 설정

<meta name="viewport" content="width=device-width, initial-scale=1.0">

모바일 기기 화면 너비에 맞추고 초기 화면 비율을 1로 지정해서 줌을 하지 않는다.

width=device-width 뷰포트 너비

hight=device-hight 뷰포트 높이

initial-scale=1.0

브라우저에서 페이지를 처음 로드할 때 확대/축소가 되지 않은 원래 크기 사용 0~10 사이의 값을 가진다

user-scalable

사용자가 화면을 확대 축소할 수 있는지 지정 . yes 또는 no 기본 값을 가진다.

minimum-scale

화면을 줄일 수 있는 최소 크기 지정 0~10 . 기본값 0.25

maximum-scale

화면을 늘릴 수 있는 최대 크기 지정 0~10 . 기본값 1.6

뷰포트 메타 태그 미적용 | 뷰포트 메타 태그 적용

따라야 할 몇 가지 규칙

큰 고정 너비 요소를 사용하지 않는다

뷰포트보다 넓은 너비로 표시되면 뷰포트가 수평으로 스크롤될 수 있다.

100% 상대적 너비 값을 사용하는 것이 좋다.

비주얼 스튜디오 코드? Downloading Visual Studio Code for Mac! (0)	2022.08.23
반응형 웹 디자인 / 적응형 웹 디자인 (0)	2021.03.25
텍스트 태그 <b></b> <strong></strong> 차이 (0)	2021.03.17
제목 텍스트 태그 <h1> ~ <h6> (0)	2021.03.17
html 문단 구분 <p> 텍스트 </p> 텍스트 줄바꿈 <br> (0)	2021.03.17