HTML 반응형 뷰포트 사용법

코딩 예제/HTML
2020. 5. 13. 08:00

반응형 웹이란?

'웹퍼블리싱온라인 블로그'를 포함한 대부분의 웹 사이트는 반응형을 지원합니다. 반응형 웹을 사용하면 사용자는 다양한 기기의 해상도에 맞춰 웹 사이트를 볼 수 있고 개발자는 뷰포트와 CSS 미디어쿼리를 사용하여 반응형 웹을 만들 수 있습니다.

빠른 개발 속도

반응형 웹 사이트 하나를 만들 때 웹과 앱을 분리하여 개발하는 것보다 데스크톱과 모바일을 한 번에 개발하는 것이 시간을 절약할 수 있습니다.

유지 보수 필요성 감소

웹과 앱을 유지 관리하려면 테스트와 지원이 필요합니다. 반대로 반응형 웹 사이트로 개발하면 유지 관리에 더 적은 시간을 투자하여 마케팅 및 콘텐츠 제작과 같은 더 중요한 것에 집중할 수 있는 시간이 확보됩니다.

모바일 트래픽 유입

모든 온라인 트래픽의 60% 이상이 모바일 장치에서 생성됩니다. 따라서 웹 사이트에서 데스크톱뿐만 아니라 모바일에서도 트래픽이 발생할 수 있습니다.

SEO 개선

반응형 웹을 개발하면 SEO에서 좋은 인상을 남길 수 있습니다. 구글 등의 검색 엔진은 순위를 매길 때 모바일이 최적화된 페이지라면 높은 점수를 얻을 수 있습니다.

즉 반응형 웹은 위 사진에서 보시는 것과 같이 PC, 모바일 등 다양한 기기에 대해서 화면의 크기에 맞춰서 보이는 것을 말합니다.

뷰포트 메타 태그를 추가하는 방법

페이지에 있는 <head> 안에서 <meta> 태그에 추가할 수 있습니다.

<!DOCTYPE html>
<html lang="ko">
<head>
	<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no, maximum-scale=1.0, minimum-scale=1.0" />
</head>
<body>
	...
</body>
</html>

위 코드는 해석하면 사용자가 현재 접속하고 있는 웹 페이지의 너비를 기기 화면 너비에 맞추고 사용자가 브라우저의 확대/축소를 불가능하게 하고 처음 웹 사이트를 방문했을 때, 초기, 최소, 최대 화면의 비율을 100%로 설정한 코드입니다.

사용자가 사용하는 스마트폰에 손가락으로 아무리 작게 하려고 해도 안 되는 이유는 뷰포트에 user-scalable=no를 추가했기 때문입니다.

device-width

사용자가 접속한 기기 화면의 넓이에 따라 웹 사이트의 넓이를 맞추겠다는 것을 의미합니다. 따라서 device-width는 100%의 크기로 화면에 출력합니다.

initial-scale=1.0

사용자가 처음 접속한 웹 사이트에 대해서 화면의 배율을 설정하는 기능입니다. 여기서 1.0은 100%를 의미합니다. 즉, 1보다 큰 값으로 설정하면 확대한 페이지로 표시됩니다.

user-scalable=no

사용자가 브라우저의 확대/축소를 불가능하게 하는 기능입니다. yes와 no로 설정할 수 있습니다. 만약, 웹 접근성을 중요시하는 사이트라면 user-scalable=yes로 해야 합니다. no로 한다면 접근성 문제가 발생할 수 있습니다.

maximum-scale=1.0

최대 배율을 의미하는 것으로 최대 크기를 설정할 수 있습니다. 1부터 10까지 설정할 수 있습니다.

minimum-scale=1.0

최소 배율을 의미하는 것으로 최소 크기를 설정할 수 있습니다. 이것 또한 1에서 10까지 설정할 수 있습니다.

이처럼 뷰포트를 이용하여 웹 사이트를 특정 크기로 설정할 수 있습니다. 이것으로 HTML 반응형 뷰포트 사용법에 대해 알아보았습니다.

참고 사이트

Top 10 Advantages of Responsive Website Design To Generate More Sale

'코딩 예제 > HTML' 카테고리의 다른 글

검색엔진최적화에 도움이 되는 meta 태그 (0)	2020.05.19
HTML 파비콘 적용하는 방법 (0)	2020.05.18