ViewPort
정의 : 화면 Display상의 표시 영역
화면에 표시된 비율을 기준으로 크기를 정하는 방식으로 사용되며
요즘 중요한 리엑트에 발맞춰 상당히 많이 쓰이고 있다.
사용방법:
1. viewport의 속성:
width: viewport의 가로 크기를 조정합니다. 일반적인 숫자값이 들어 갈 수도 있고, device-width와 같은 특정한 값을 사용할 수도 있습니다. device-width는 100% 스케일에서 CSS 픽셀들로 계산된 화면의 폭을 의미합니다.
height : viewport의 세로 크기를 조정합니다.
initial-scale : 페이지가 처음 로딩될 때 줌 레벨을 조정합니다. 값이 1일때는 CSS 픽셀과 기기종속적인 픽셀 간의 1:1 관계를 형성합니다.
minimum-scale : viewport의 최소 배율값, 기본값은 0.25입니다.
maximum-scale : viewport의 최대 배율값, 기본값은 1.6입니다.
user-scalable : 사용자의 확대/축소 기능을 설정, 기본값은 yes입니다.
2. 정의된 속성 값
device-width : 기기의 가로 넓이 픽셀 값 (웹페이지의 가로(width) 값은 기기가 사용하는 가로 넓이 값(device-width) 만큼 적용하여 사용하라는 의미)
device-height : 기기의 세로 높이 픽셀 값
3. 주의사항
content 보다 작은 viewport width/height를 설정하면 무시됩니다.
viewport에서 initial-scale을 설정하지 않고 width/height를 설정하면 전체 화면이 표시됩니다.
viewport에서 initial-scale도 width/height를 설정하지 않으면 width=980px/height=1091px 이 됩니다.
표시 영역과 contents의 크기가 일치하지 않을때 initial-scale을 설정하면 의도하지 않은 layout이 발생합니다.
하나 더 주의할 것은 뷰포트 단위는 세로 스크롤바가 차지하는 약 10픽셀을 고려하지 않는 다는 것!
그래서 전체 너비로 설정하게 되면 가로 스크롤바도 생길 수 밖에 없는 구조라서 처음은 100%같은 비율 설정을 사용하고 그 안에서 height, width 너비에 vh,vw를 사용하는게 좋다!!
이상 끝!!
지금은 초창기니 일단 쓴다는거에 의의!