뷰포트 (Viewport)

뷰포트 (Viewport)

1. 뷰포트

 - 화면에서 실제 내용이 표시되는 영역

 - 뷰포트는 메타 태그를 이용해 화면의 크기 or 비율을 조절

<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no">

 

 

2. 뷰포트 속성

 

속성명 속성값 속성 설명
width device-width, 양수 뷰포트의 너비를 지정
height device-height, 양수 뷰포트의 높이를 지정
initial-scale 양수 뷰포트의 초기 배율 지정 (기본값 1)
(축소 < 1 < 확대)
user-scalable yes, no 뷰포트의 확대/축소 여부 지정
minimum-scale 양수 뷰포트의 최소 축소 비율 지정 (기본값 0.25)
maximum-scale 양수 뷰포트의 최대 확대 비율 지정 (기본값 5.0)

 

'Front-End Study > 반응형 웹' 카테고리의 다른 글

플렉서블 박스 (Flexible Box)  (0) 2023.05.01
미디어 쿼리  (0) 2023.05.01
가변 이미지  (0) 2023.02.05
가변 font  (0) 2023.02.03
가변 margin, 가변 padding  (0) 2023.02.03