반응형 웹 디자인 - 뷰포트
뷰포트란?
뷰포트는 웹 페이지에서 사용자가 볼 수 있는 영역입니다.
표시 영역은 장치에 따라 다르며 컴퓨터 화면보다 휴대 전화에서 더 작습니다.
태블릿과 휴대폰 이전에는 웹페이지가 컴퓨터 화면용으로만 디자인되었고, 웹페이지는 정적인 디자인과 고정된 크기를 갖는 것이 일반적이었습니다.
그런 다음 태블릿과 휴대폰을 사용하여 인터넷 서핑을 시작했을 때 고정 크기의 웹 페이지가 너무 커서 표시 영역에 맞지 않았습니다. 이 문제를 해결하기 위해 해당 장치의 브라우저는 전체 웹 페이지를 화면에 맞게 축소했습니다.
이것은 완벽하지 않았습니다!! 그러나 빠른 수정.
뷰포트 설정
<meta>HTML5는 웹 디자이너가 태그 를 통해 뷰포트를 제어할 수 있는 방법을 도입했습니다
.
모든 웹 페이지에 다음 <meta>뷰포트 요소를 포함해야 합니다.
<meta name="viewport" content="width=device-width, initial-scale=1.0">
이것은 페이지의 크기와 배율을 제어하는 방법에 대한 브라우저 지침을 제공합니다.
부품 은 width=device-width장치의 화면 너비를 따르도록 페이지 너비를 설정합니다(장치에 따라 다름).
이 initial-scale=1.0부분은 브라우저에서 페이지를 처음 로드할 때 초기 확대/축소 수준을 설정합니다.
다음은 뷰포트 메타 태그가 없는 웹 페이지 와 뷰포트 메타 태그가 있는 동일한 웹 페이지 의 예입니다 .
팁: 휴대전화나 태블릿으로 이 페이지를 탐색하는 경우 위의 두 링크를 클릭하여 차이점을 확인할 수 있습니다.
뷰포트에 맞게 콘텐츠 크기 조정
사용자는 데스크톱과 모바일 장치 모두에서 웹사이트를 세로로 스크롤하는 데 사용되지만 가로로는 그렇지 않습니다!
따라서 사용자가 전체 웹 페이지를 보기 위해 가로로 스크롤하거나 축소해야 하는 경우 사용자 환경이 좋지 않습니다.
따라야 할 몇 가지 추가 규칙:
1. 큰 고정 너비 요소를 사용하지 마십시오. 예를 들어, 이미지가 뷰포트보다 넓은 너비로 표시되면 뷰포트가 수평으로 스크롤될 수 있습니다. 이 콘텐츠를 뷰포트 너비에 맞게 조정해야 합니다.
2. 콘텐츠가 잘 렌더링되기 위해 특정 뷰포트 너비에 의존하지 않도록 하십시오. CSS 픽셀의 화면 크기와 너비는 장치마다 크게 다르기 때문에 콘텐츠는 잘 렌더링되기 위해 특정 뷰포트 너비에 의존해서는 안 됩니다.
3. CSS 미디어 쿼리를 사용하여 작은 화면과 큰 화면에 서로 다른 스타일 적용 - 페이지 요소에 대해 큰 절대 CSS 너비를 설정하면 작은 장치의 뷰포트에 비해 요소가 너무 넓어집니다. 대신 너비: 100%와 같은 상대적 너비 값을 사용하는 것이 좋습니다. 또한 큰 절대 위치 값을 사용하는 데 주의하십시오. 작은 장치에서 요소가 뷰포트 외부로 떨어질 수 있습니다.