땀나는 애* 반응형이 필요없는 경우 모바일에서도 PC레이아웃을 그대로 보고 싶은 경우 viewport meta 태그를 수정한다 [기본형] 반응형시 <meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no,maximum-scale=1.0,minimum-scale=1.0,target-densitydpi=medium-dpi" /> [PC레이아웃 그대로보기] <meta name="viewport" content="width=1280"> 들어가기요즘 웹사이트는 PC 뿐만아니라 모바일, 태블릿 등 다양한 기기에서 열람 될 수 있다. 그래서 우리는 다양한 기기에서 정상적으로 동작하는 웹사이트를 개발하기 위해서 반응형 웹을 개발한다. 이 반응형 웹의 기초가 되는게 바로 Viewport 설정이라고 한다. 이게 어떤 개념이고 왜 기초라고 하는지 알아보자! Viewport란?Viewport는 Viewport 영역은 앞서 말했듯 PC 환경에서는 브라우저의 크기를 바꿔서 뷰포트의 크기를 사용자가 임의로 바꿀 수 있다. 그러나 휴대폰이나 태블릿의 경우는 브라우저의 크기를 변경할 수가 없다. Double tab, Zoon in, Zoom out을 통해 비쥬얼 viewport의 배율을 변경 할 수는 있어도 레이아웃 viewport는 변경할 수 없다. 그래서 모바일 브라우저(사파리, 크롬 등)는 기본 정책으로 Default 뷰포트 너비를 980px으로 책정하고 화면에 맞게 비율을 줄여서 보여준다. 종종 PC 환경에서 제작된 웹사이트는 모바일 환경에서 확인했을 때는 내용이 작아져 버리는 모습을 볼 수 있는 것이 이 때문이다. 다시 말해 작은 화면의 모바일 단말기에 웹 페이지 모두를 표시하려고 하니 전체적인 페이지의 배율이 조정되는 것이다. 따라서 웹 사이트를 만들 때 뷰포트에 대한 설정을 해주어야 이러한 문제를 해결하고, 반응형 웹사이트를 제대로 동작시킬 수 있다. 일반적인 설정HTML5 부터 Viewport 설정을 위해서 이 설정에서 width=device-width값을 설정해 주었기 떄문에 전체적인 웹 페이지의 width가 기기의 너비 만큼 구체적으로 설정되고 설정값
커스터 마이징 할 수 있는 설정값들을 알아 보자.
viewport의 가로 크기를 조정한다. 일반적인 숫자값이 들어 갈 수도 있고, device-width, device-height와 같은 특정한 값을 사용할 수도 있다. device-width는 100% 스케일에서 CSS 픽셀들로 계산된 화면의 폭을 의미한다.
viewport의 세로 크기를 조정한다.
페이지가 처음 로딩될 때 줌 레벨을 조정한다. 값이 1일때는 CSS 픽셀과 기기종속적인 픽셀 간의 1:1 관계를 형성한다.
줄일 수 있는 최소 크기를 지정한다.(default값은 0.25)
늘릴 수 있는 최대 크기를 지정한다.(default값은 1.6)
yes 또는 no 값을 가지며, 사파리 11버전에선 viewport크기가 작으면 보여줘야할 내용을 줄여서 보여주기 때문에 이를 방지하기 위해서는 no를 설정한다.(default값은 yes)
yes 또는 no 값을 가지며, 사용자가 화면을 확대/축소 할 수 있는지는 지정합니다.(default값은 yes) 마무리CRA를 사용해서 프로젝트를 만들면 기본적으로 뷰포트설정이 있기때문에 신경쓰지 않았던 부분이었는데, 요즈음 프론트엔드 개발자가 하는 업무들이 웹뷰나 반응형 작업이 필요한 것들이 많기 때문에 잘 알아 두면 좋을 것 같다. 참고w3s - RWD Viewport 반응형 웹 (responsive web)이란 하나의 웹사이트로 데스크탑 PC, 스마트폰, 태블릿 PC 등 접속하는 디스플레이의 종류에 따라 화면의 크기가 자동으로 변하도록 만든 웹 페이지를 말합니다. 미디어 쿼리는 CSS3 부터 지원이 되는 CSS기술로 미디어 타입, 화면 크기 등을 기준으로 다른 스타일 시트를 적용할 수 있도록 해줍니다. 이를 이용해서 화면 크기가 변할때 스타일을 바뀌도록 해서 반응형 웹을 구현할 수 있습니다. 모바일 웹을 작성하게 되면 뷰포트(viewport)라는 것을 고려하게 됩니다. 뷰포트는 웹페이지가 사용자에게 보여지는 영역을 말합니다. 데스크탑 PC에서 브라우저의 크기를 줄이면 웹페이지의 내용이 다보여지지 않고 스크롤 해서 봐야 되는 경우가 있습니다. 이때도 브라우저에 보여지는 부분이 뷰포트입니다. 데스크탑 PC는 브라우저의 크기를 바꿔서 뷰포트의 크기를 바꿀 수 있는 것입니다. 반면에 휴대폰이나 태블릿의 경우는 브라우저의 크기를 변경할 수 가 없습니다.(요즘은 멀티뷰를 지원하는 기기도 있지만, 일반적이지는 않습니다.) 하지만, 워낙 다양한 기기들이 존재하기 때문에, 뷰포트의 크기도 다양합니다. 휴대폰이나 태블릿이 나오기 이전의 웹페이지는 데스크탑 PC용으로만 만들었기 때문에 고정된 크기를 가지는 것이 대부분이 었습니다. 이렇게 고정된 크기를 가진 웹페이지를 화면이 작은 휴대폰에서 보면 한 화면에 다보이지 않게 됩니다. 대부분의 휴대폰등 모바일 기기의 웹브라우저에서 웹페이지가 그려지는 렌더링 영역은 사용자에게 보여지는 영역인 뷰포트 보다 큽니다. 1024 x 768 사이즈에 고정되어 있는 웹페이지를 320 x 568 사이즈를 가지는 아이폰에서 보면 스크롤해야만 모두를 볼 수가 있습니다. 그래서 모바일 웹브라우저가 취하는 기본정책은 모두를 보여주기 위해 화면을 줄여서 보여주는 것입니다. 이러한 정책은 내용 전체를 볼 수는 있으나 글자가 너무 작아져서 보기 어려워지는 단점이 있습니다. HTML5에서 소개된 뷰포트 <meta> 태그를 사용하면 모바일 기기에서 실제 렌더링되는 영역과 뷰포트의 크기를 조절할 수 있습니다. 또한 줌 레벨도 조정할 수 있습니다. 아래는 가장 일반적으로 사용되는 설정 입니다. - width=device-width : 페이지의 너비를 기기의 스크린 너비로 설정합니다. 즉, 렌더링 영역을 기기의 뷰포트의 크기와 같게 만들어 줍니다. - initial-scale=1.0 : 처음 페이지 로딩시 확대/축소가 되지 않은 원래 크기를 사용하도록 합니다. 0~10 사이의 값을 가집니다. 이것외에도 다음과 같은 값을 지정할 수 있습니다. - minimum-scale : 줄일 수 있는 최소 크기를 지정합니다. 0~10 사이의 값을 가집니다. - maximum-scale : 늘릴 수 있는 최대 크기를 지정합니다. 0~10 사이의 값을 가집니다. - user-scalable : yes 또는 no 값을 가지며 사용자가 화면을 확대/축소 할 수 있는지는 지정합니다. 위의 줌 레벨은 1이 원래크기이고, 0.5 라면 50% 축소를 뜻합니다. 그러므로 위의 설정은 페이지 너비를 휴대기기 화면너비에 맞추고, 처음 로딩시 줌을 하지 않는 것입니다. 적용한 결과는 다음과 같습니다.  이미지는 화면크기보다 크므로 다 보이지 않지만, 텍스트 영역을 보면 화면 크기를 넘지 않고 아래로 wrap 되는 것을 볼 수 있습니다. 실제 렌더링 영역과 뷰포트의 크기가 같아진 것입니다. 이미지에 대해서는 모바일에서 사용하기 위해서는 좀 더 처리가 필요합니다. 화면이 클 때는 자신의 크기를 유지하고 화면이 이미지의 크기보다 작아지면 화면크기에 맞춰서 크기가 줄어들도록 CSS를 지정할 수 있습니다. 이렇게 지정한 결과 입니다. 데스크탑 PC와 모바일 기기에서 적절히 보이는 반응형 웹을 만들기 위해서는 뷰포트 메타 태그를 사용하는것이 시작이 되겠습니다. ※참조 : https://www.w3schools.com/css/css_rwd_viewport.asp |
Viewport pc버전 - viewport pcbeojeon
관련 게시물
저작권 © 2024 ko.ketiadaan Inc.
