반응형
responsiveweb
-
반응형 웹 기초 뷰포트(View port) 와 미디어 쿼리(Media Queries)Knowledge/HTML & CSS 2019. 11. 13. 16:19
- 뷰포트 ( View Port ) 본격적으로 뷰포트에 대해 얘기하기 전에 먼저 픽셀에 대해 짚고 넘어갈 필요가 있다. 픽셀은 화면을 구성하는 가장 기본이 되는 단위다. 예를 들어 15인치 모니터의 해상도가 1024 X 768의 라고 하면 수평으로는 1024개의 픽셀이, 수직으로는 768개의 픽셀이 배치되어 있다고 보면 된다. 즉 786,432개의 픽셀로 화면이 이루어진 셈이다. 모바일이 대두되기 전의 웹은 이 정도 수준의 해상도를 기준으로 제작되었다. 문제는 거기서 발생했다. 모바일과 태블릿 등 손 안에 들어오는 작은 디스플에이에 일반 모니터의 픽셀 기준을 적용할 수 없었기 때문이다. 이런 문제를 해결하기 위해 모바일 브라우져에서 시도한 것이 가상 viewport 개념의 도입이다. 처음에는 980px인..