용어정리 [용어] 뷰포트(Viewport)
페이지 정보
작성자 모던DS
조회 55회
조회 55회
본문
뷰포트(Viewport)
웹 페이지에서 사용자에게 실제로 보여지는 화면 영역을 의미합니다.
과거 데스크탑 중심의 웹에서는 화면 크기가 일정했기 때문에 큰 문제가 없었으나, 스마트폰과 태블릿이 보급되면서 기기마다 각기 다른 화면 크기에 대응하기 위해 매우 중요한 개념이 되었습니다.
뷰포트의 핵심 역할
기기별 맞춤 화면: 접속하는 기기(모바일, 태블릿, PC)의 너비에 맞춰 웹 페이지의 크기를 조절합니다.
반응형의 시작: Flexbox와 같은 레이아웃 도구를 제대로 사용하기 위해서는 뷰포트 설정이 선행되어야 합니다.
비교 정리
구분 | 데스크탑 뷰포트 | 모바일 뷰포트 |
특징 | 브라우저 창의 크기에 따라 결정됨 | 기기 화면 전체 너비에 고정되는 경우가 많음 |
중요도 | 창 크기 조절 시에만 영향 | 반응형 웹 구현 시 필수 설정 요소 |
HTML 설정 예시 (Meta Tag)
보통 HTML <head> 태그 안에 아래와 같은 코드를 넣어 "화면 너비를 기기 너비에 맞추겠다"고 선언합니다.
HTML
<meta name="viewport" content="width=device-width, initial-scale=1.0">
- 이전글CSS Flexbox 플렉스 박스 레이아웃 기초설명 26.02.26
- 다음글웹에 생동감을 불어넣는 CSS3 핵심 기술 26.02.26