CSS Responsive Web Design - The Viewport

뷰포트(viewport)는 웹 페이지에서 사용자가 볼 수 있는 영역입니다.

뷰포트는 장치에 따라 다르며, 컴퓨터 화면보다 휴대폰에서 더 작습니다.

태블릿과 휴대폰 이전에, 웹 페이지는 컴퓨터 화면 전용으로 디자인 되었으며, 웹 페이지는 고정된 디자인(static design)과 고정된 크기(fixed size)를 갖는 것이 일반적이었습니다.

그런 다음, 태블릿과 휴대폰을 사용하여 인터넷 서핑을 시작했을 때, 고정된 크기의 웹 페이지가 너무 커서 뷰포트에 맞지 않았습니다. 이 문제를 해결하기 위해, 해당 장치의 브라우저는 전체 웹 페이지를 화면에 맞게 축소했습니다.

이것은 완벽하지 않았지만, 빠른 수정이었습니다.

HTML5는 웹 디자이너가 <meta> 태그를 통해 뷰포트를 제어할 수 있는 방법을 도입했습니다.

모든 웹 페이지에 아래의 <meta> 뷰포트 요소를 포함시켜야 합니다.

<meta name="viewport" content="width=device-width, initial-scale=1.0">

이것은 페이지의 크기 및 크기 조정을 제어하는 방법에 대한 지침을 브라우저에 제공합니다.

width=device-width 부분은 장치의 화면 너비를 따르도록 페이지의 너비를 설정합니다(장치에 따라 다름).

initial-scale=1.0 부분은 브라우저가 페이지를 처음 로드할 때 초기 확대/축소 수준(the initial zoom level)을 설정합니다.

다음은 뷰포트 메타 태그가 없는 웹 페이지와 뷰포트 메타 태그가 있는 동일한 웹 페이지의 예입니다.

사용자는 데스크톱과 모바일 장치 모두에서 웹 사이트를 세로로 스크롤하는 데 사용되지만 가로로는 스크롤하지 않습니다!

따라서 사용자가 전체 웹 페이지를 보기 위해 가로로 스크롤하거나 축소해야 하는 경우 사용자 경험이 저하됩니다.

따라야 할 몇 가지 추가 규칙은 아래와 같습니다:

1. 큰 고정 너비 요소를 사용하지 마십시오
예를 들어 이미지가 뷰포트보다 더 넓은 너비로 표시되면, 뷰포트가 수평으로 스크롤 될 수 있습니다. 이 콘텐츠를 뷰포트의 너비에 맞도록 조정해야 합니다.

2. 콘텐츠가 잘 렌더링되도록 특정 뷰포트 너비에 의존하지 않도록 합니다
CSS 픽셀의 화면 크기와 너비는 장치마다 크게 다르므로, 콘텐츠가 잘 렌더링되기 위해 특정 뷰포트 너비에 의존해서는 안됩니다.

3. CSS 미디어 쿼리를 사용하여 작은 화면과 큰 화면에 다른 스타일을 적용합니다
페이지 요소에 대해 큰 절대 CSS 너비를 설정하면, 더 작은 장치의 뷰포트에 비해 요소가 너무 넓어집니다. 대신 width:100%와 같은 상대적 너비 값(relative width values)을 사용하는 것을 고려하세요. 또한 큰 절대 위치 값 사용을 주의하십시오. 작은 장치에서 요소가 뷰포트 밖으로 나갈 수 있습니다.