====== CSS Responsive Web Design - The Viewport ======
<WRAP left notice 80%>
  * description : CSS Responsive Web Design - The Viewport
  * author      : 오션
  * email       : shlim@repia.com
  * lastupdate  : 2021-07-06 Tue
</WRAP>
<WRAP clear></WRAP>
\\
=====The source of this article=====
[[https://www.w3schools.com/css/css_rwd_viewport.asp|CSS Responsive Web Design - The Viewport]]\\

====== What is The Viewport? ======
뷰포트(viewport)는 웹 페이지에서 사용자가 볼 수 있는 영역입니다.\\
\\
뷰포트는 장치에 따라 다르며, 컴퓨터 화면보다 휴대폰에서 더 작습니다.\\
\\
태블릿과 휴대폰 이전에, 웹 페이지는 컴퓨터 화면 전용으로 디자인 되었으며, 웹 페이지는 고정된 디자인(static design)과 고정된 크기(fixed size)를 갖는 것이 일반적이었습니다.\\
\\
그런 다음, 태블릿과 휴대폰을 사용하여 인터넷 서핑을 시작했을 때, 고정된 크기의 웹 페이지가 너무 커서 뷰포트에 맞지 않았습니다. 이 문제를 해결하기 위해, 해당 장치의 브라우저는 전체 웹 페이지를 화면에 맞게 축소했습니다.\\
\\
이것은 완벽하지 않았지만, 빠른 수정이었습니다.\\

===== Setting The Viewport =====
%%HTML5%%는 웹 디자이너가 ''%%<meta>%%'' 태그를 통해 뷰포트를 제어할 수 있는 방법을 도입했습니다.\\
\\
모든 웹 페이지에 아래의 ''%%<meta>%%'' 뷰포트 요소를 포함시켜야 합니다.\\
\\
<code html>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</code>
\\
이것은 페이지의 크기 및 크기 조정을 제어하는 방법에 대한 지침을 브라우저에 제공합니다.\\
\\
''%%width=device-width%%'' 부분은 장치의 화면 너비를 따르도록 페이지의 너비를 설정합니다(장치에 따라 다름).\\
\\
''%%initial-scale=1.0%%'' 부분은 브라우저가 페이지를 처음 로드할 때 초기 확대/축소 수준(the initial zoom level)을 설정합니다.\\
\\ 
다음은 뷰포트 메타 태그가 없는 웹 페이지와 뷰포트 메타 태그가 있는 동일한 웹 페이지의 예입니다.\\
{{:wiki:css:css_note:without-viewport-meta-tag.png|}}
{{:wiki:css:css_note:with-viewport-meta-tag.png|}}

===== Size Content to The Viewport =====
사용자는 데스크톱과 모바일 장치 모두에서 웹 사이트를 세로로 스크롤하는 데 사용되지만 가로로는 스크롤하지 않습니다!\\
\\
따라서 사용자가 전체 웹 페이지를 보기 위해 가로로 스크롤하거나 축소해야 하는 경우 사용자 경험이 저하됩니다.\\
\\
따라야 할 몇 가지 추가 규칙은 아래와 같습니다:\\
\\
1. **큰 고정 너비 요소를 사용하지 마십시오**\\
예를 들어 이미지가 뷰포트보다 더 넓은 너비로 표시되면, 뷰포트가 수평으로 스크롤 될 수 있습니다. 이 콘텐츠를 뷰포트의 너비에 맞도록 조정해야 합니다.\\
\\
2. **콘텐츠가 잘 렌더링되도록 특정 뷰포트 너비에 의존하지 않도록 합니다**\\
%%CSS%% 픽셀의 화면 크기와 너비는 장치마다 크게 다르므로, 콘텐츠가 잘 렌더링되기 위해 특정 뷰포트 너비에 의존해서는 안됩니다.\\
\\
3. **%%CSS%% 미디어 쿼리를 사용하여 작은 화면과 큰 화면에 다른 스타일을 적용합니다**\\
페이지 요소에 대해 큰 절대 %%CSS%% 너비를 설정하면, 더 작은 장치의 뷰포트에 비해 요소가 너무 넓어집니다. 대신 width:100%와 같은 상대적 너비 값(relative width values)을 사용하는 것을 고려하세요. 또한 큰 절대 위치 값 사용을 주의하십시오. 작은 장치에서 요소가 뷰포트 밖으로 나갈 수 있습니다.\\

 
{{tag>오션, Responsive Web Design - Viewport}}