iframe 태그를 쓰다보면 간혹 높이가 100%가 안되는 상황이 발생합니다. 또한 다른 요소들의 크기를 조정하다가 %의 크기로 화면을 넘어가기도 합니다.

여러가지 해결 방법이 있겠지만 viewport를 이용해서도 가능합니다. 오늘은 viewport에 대한 이야기를 할까 합니다.

viewport란?

Viewport란 브라우저에서 웹페이지(요소)가 표현되는 영역을 의미합니다.

PC웹에선 크게 의미없을 수 있지만 모바일 웹에선 이야기가 다릅니다. 모바일 디바이스는 우선 크기가 작기 때문에 화면 전체를 그리기가 어렵습니다. 그러나 화면 전체를 그리는 풀브라우징이 모바일 브라우저에서 지원하고 있고, 모바일 환경에서도 PC웹과 같이 화면 전체를 뿌려주길 원합니다.

그치만 단순히 전체 크기만 늘려서 화면을 그리면.. 기존 요소들(글꼴, 이미지 등)이 너무 작아지게 되죠. 이걸 viewport를 통해 해결합니다. 아래 viewport 관련 속성인 vh, vw를 보죠.

• vh: viewport height
• vw: viewport width

이 요소는 총 높이, 너비값의 1/100을 의미합니다. 그래서 width:900px 인 웹 페이지가 있을 떄 여기의 1 vw는 9px가 됩니다. vh도 동일하죠. 이렇게 되면 현재 화면에 그려지는 총 크기에 1/100의 크기의 값을 항상 가질 수 있습니다. 이를 통해서 전체적인 글꼴의 크기나 이미지 크기를 조정할 수 있지요.

비슷한 속성으론 vmin, vmax도 있습니다.

iframe의 높이를 맞춰보자

viewport에 대해 알았으니 별거 없습니다. vh를 100으로 주게되면 현재 그려진 영역의 크기에서 100%에 해당되는 크기만큼을 잡기 때문에 화면을 넘어가거나, 적어질일이 없습니다.

<iframe src=123123 width="100%" height="100vh"></iframe>

Reference

http://dgkim5360.tistory.com/entry/adjusting-iframe-height-100-precent https://stackoverflow.com/questions/5867985/full-screen-iframe-with-a-height-of-100