뷰포트의 이해
스마트폰 이전 시대에는 대부분의 웹 페이지가 데스크탑의 모니터 사이즈를 고려하여 만들어졌기 때문에 모바일 기기처럼 작은 화면에는 모두 보이지 않아 좌우로 스크롤해야만 내용을 볼 수 있었다.
그래서 모바일 브라우저들은 뷰포트(Viewport)라는 가상의 화면을 만들고 그 화면에 페이지를 나타내기 시작했다(기기들마다 다르지만 대부분 일반적인 데스크탑 모니터 사이즈와 비슷하게 980px이다).
여기에서 실제 우리가 보는 스마트폰의 스크린 사이즈(device-width/height)와 브라우저가 화면을 나타내는 가상의 화면 사이즈(viewport)의 차이가 생기게 된다.
기본 뷰포트의 크기가 980px이기 때문에 width가 980px 정도인 웹 페이지를 모바일 브라우저로 보게 되면 가로 스크롤 없이 화면에 맞춰 나온다. 그렇게 되면 스크롤하지 않아도 내용이 다 보이는 장점이 있지만 글자나 그림들이 그 폭에 맞춰서 작아지기 때문에 가독성이 매우 떨어진다.
그래서 모바일 safari에서 뷰포트를 설정할 수 있는 태그를 도입해서 뷰포트의 크기와 스케일을 조정할 수 있게 했다.
뷰포트를 설정하는 태그는 <meta> 태그로 <head> 태그에 위치해야 한다.
name 속성에 'viewport'라고 선언하며 content 속성에 뷰포트를 설정하는 내용이 들어간다.
<meta name="viewport" content="뷰포트의 설정 값">
content에는 몇 가지 설정을 할 수 있다.
- width(height) : 뷰포트의 가로(세로) 크기를 지정한다. px단위의 수치가 들어갈 수 있지만, 대부분 특수 키워드인 'device-width(height)'를 사용한다(뷰포트의 크기를 기기의 스크린 width(height) 크기로 설정한다는 의미).
- initial-scale : 페이지가 처음 나타날 때 초기 줌 레벨 값을 설정한다(소수값).
- user-scalable : 사용자의 확대/축소 기능을 설정할 수 있다.
대부분의 모바일 웹 사이트 뷰포트 설정은 아래와 같다.
<meta name="viewport" content="width=device-width, initial-scale=1.0">
자세한 내용은 아래 링크 참조
https://www.w3schools.com/css/css_rwd_viewport.asp
Responsive Web Design Viewport
W3Schools offers free online tutorials, references and exercises in all the major languages of the web. Covering popular subjects like HTML, CSS, JavaScript, Python, SQL, Java, and many, many more.
www.w3schools.com
부스트코스의 강의 내용을 정리한 포스트입니다.
https://www.boostcourse.org/cs120
비전공자를 위한 HTML/CSS
부스트코스 무료 강의
www.boostcourse.org
'공부 > HTML과 CSS' 카테고리의 다른 글
| 셀렉트 박스에 플레이스 홀더 적용하기 (0) | 2023.02.27 |
|---|---|
| @charset (0) | 2023.02.16 |
| [미디어쿼리] 실습 (1) | 2023.01.05 |
| [미디어 쿼리] Syntax와 예제 코드 (0) | 2023.01.04 |
| [미디어쿼리] 미디어 타입 & 미디어 특성 (0) | 2023.01.03 |
