목차
- viewport 정의
- viewport 구문
- viewport 예제 - 적용X vs. 적용O
- viewport 준수사항
viewport 정의
웹페이지에서 사용자가 볼 수 있는 영역. (= 브라우저 창 가시 영역)
1.
- 기기에 따라 다르며, 컴퓨터 화면보다 휴대전화가 작음.
- (컴퓨터 > 태블릿 > 스마트폰) 크기 순.
2.
- 뷰포트가 작은 기기로 큰 기기에 맞춘 웹페이지를 방문 시 초기에 브라우저는 전체 화면을 단순축소하는 식으로 해결. (완벽하지는 않았지만, 아주 빠른 해결책이였음.)
- HTML5는 이 문제 해결 위해, 개발자가 뷰포트 설정토록 함. 즉, 개발자가 <meta> 태그 이용해 뷰포트 임의 설정케 함.
- viewport 적용 <meta>태그를 전체 웹페이지에 넣어주면, 각 기기 화면에 맞게 콘텐츠 화면이 확대되어 가독성 높아짐.
viewport 구문
<meta name="viewport" content="width=device-width, initial-scale=1.0">
[속성]
width=device-width
장치의 화면 너비에 따라 페이지 너비 자동 조정.
initial-scale=1.0
브라우저 초기 로드 시, Zoom (줌 =확대) 정도.
PS. content 속성의 속성값예 사용 가능한 가타 옵션들
- user-scalable=no - 사용자가 크기 조정 가능 여부
- minimum-scale=0 - 최소 크기
- maximum-scale=10 - 최대 크기
viewport 예제 - 적용X vs. 적용O
[viewport 적용 X]
<!DOCTYPE html>
<html>
<body>
<p><b>▒ viewport 적용 X</b></p>
<img src="https://source.unsplash.com/random" alt="hz" width="460" height="345">
<p>홈짱닷컴 Homzzang.com</p>
</body>
</html>
결과보기
[viewport 적용 O]
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<style>
img {
max-width: 100%;
height: auto;
}
</style>
</head>
<body>
<p><b>▒ viewport 적용 O</b></p>
<img src="https://source.unsplash.com/random" alt="hz" width="460" height="345">
<p>홈짱닷컴 Homzzang.com</p>
</body>
</html>
결과보기
viewport 준수사항
1.
큰 고정 너비 요소 사용 금지.
뷰포트보다 큰 고정요소 사용 시 가로 스크롤바 생겨서 가독성 저해함.
2.
특정기기의 뷰포트 너비로 고정 금지.
기기마다 뷰포트 가로너비가 다르므로, 특정기기 뷰포트에 너무 의존해선 안 됨.
3.
CSS 미디어쿼리 사용해 작고 큰 화면에 다른 스타일 적용. (반응형 홈피 구현)
큰 고정 px 너비 사용 지양하고, 대신에 width:100 %와 같은 상대 너비 사용.
너비는 (width + margin + padding + border) 합쳐서 100% 안 넘게 설정.
position 설정 시, 뷰포트 영역 밖에 위치하지 않도록 주의 !!
