0Pricing
Frontend Academy · 강의

뷰포트 메타 태그

뷰포트 메타 태그를 추가하고 모바일 기기에서 반응형 레이아웃이 올바르게 작동하는 데 필요한 이유를 이해합니다.

뷰포트 메타 태그은(는) CoddyKit의 무료 Frontend Academy 강의입니다. 이것은 4개 중 1번째 강의입니다. 아래에서 전체 강의를 무료로 읽을 수 있으며, 내장 코드 에디터와 24/7 AI 튜터와 함께 브라우저에서 직접 실습할 수 있습니다. 이 강의는 Frontend Academy 학습 경로의 일부이며, 진행 상황이 웹과 CoddyKit 앱에 동기화됩니다. Frontend Academy 강의에는 총 4개의 강의가 포함되어 있습니다.

뷰포트 메타 태그는 왜 필요한가요?

viewport 메타 태그가 없으면 모바일 브라우저는 페이지를 데스크톱 너비(대개 980px)로 렌더링한 다음 화면에 맞추기 위해 축소합니다. 그러면 텍스트가 작아지고 레이아웃이 망가집니다. 메타 태그는 브라우저에 기기의 실제 너비를 사용하라고 알려 줍니다.

태그

모든 페이지의 <head> 안에 추가하십시오. 반응형 디자인이 올바르게 작동하려면 반드시 필요합니다.

<meta name="viewport" content="width=device-width, initial-scale=1.0">

width=device-width

width=device-width는 뷰포트 너비를 기기 화면의 CSS 픽셀 너비로 설정합니다. 너비가 390px인 iPhone 14에서는 뷰포트가 980px이 아니라 390px이 됩니다.

initial-scale=1.0

initial-scale=1.0은 페이지를 처음 불러올 때 확대 수준을 1로 설정합니다. 이 값이 없으면 일부 브라우저가 여전히 확대 비율을 적용할 수 있습니다. device-width와 함께 사용하면 CSS 픽셀과 기기 픽셀 사이에 실제 1:1 비율을 얻을 수 있습니다.

CSS 픽셀과 물리 픽셀

고해상도(Retina) 화면의 기기 픽셀 비율(DPR)은 1보다 큽니다. 너비가 390px인 iPhone 14에는 물리 픽셀이 1170개 있으므로 DPR = 3입니다. CSS 픽셀은 물리 픽셀을 추상화하므로 DPR과 관계없이 CSS는 CSS 픽셀 단위로 작동합니다.

user-scalable=no 사용 금지

일부 개발자는 핀치 확대·축소를 막기 위해 user-scalable=no를 추가합니다. 이렇게 하지 마십시오. 시각 장애가 있는 사용자가 콘텐츠를 확대해 읽지 못하게 하며 WCAG 성공 기준 1.4.4를 위반합니다.

뷰포트 단위: vw와 vh

1vw = 뷰포트 너비의 1%입니다. 1vh = 뷰포트 높이의 1%입니다. 100vw와 100vh는 전체 뷰포트를 채웁니다. hero 영역과 전체 화면 레이아웃에 사용하십시오.

.hero {
  width: 100vw;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

dvh — 동적 뷰포트 높이

모바일에서 100vh에는 브라우저 UI(주소 표시줄)가 포함되므로 콘텐츠가 잘릴 수 있습니다. 더 새로운 100dvh(동적 뷰포트 높이)는 화면에 보이는 브라우저 UI에 맞춰 조정됩니다. fallback을 함께 사용하십시오.

.full-screen {
  min-height: 100vh;    /* fallback */
  min-height: 100dvh;   /* modern browsers */
}

DevTools의 뷰포트

Chrome DevTools에서 기기 아이콘을 클릭해 Device Mode로 들어가면 다양한 뷰포트 크기에서 페이지가 정확히 어떻게 보이는지 확인할 수 있습니다. 눈금자는 CSS 픽셀을 표시합니다.

content 특성의 변형

initial-scale, minimum-scale, maximum-scale도 설정할 수 있습니다. 적절한 값으로 유지하십시오. user-scalable=no 없이 minimum-scale=1을 설정하면 여전히 확대할 수 있으므로 접근성을 고려한 방식입니다.

<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0">

뷰포트와 미디어 쿼리

미디어 쿼리는 물리 픽셀이 아니라 뷰포트 너비(CSS 픽셀 값)를 사용합니다. 뷰포트가 390px이면 @media (max-width: 768px)가 적용됩니다. 뷰포트 메타 태그가 있어야 모바일에서 이러한 중단점이 올바르게 작동합니다.

빠른 확인

뷰포트 메타 태그에서 width=device-width의 목적은 무엇입니까?

복습: 뷰포트 메타 태그

항상 을 안에 포함하십시오. 사용자의 확대·축소를 절대 비활성화하지 마십시오. 뷰포트 기준 크기에는 vw/vh를 사용하십시오. dvh는 모바일 브라우저 UI 문제를 해결합니다. 이 하나의 태그가 모든 반응형 CSS가 모바일에서 작동하도록 합니다.

자주 묻는 질문

“뷰포트 메타 태그” 강의는 무료인가요?

네 — “뷰포트 메타 태그” 전체 내용을 이 웹사이트에서 무료로 읽을 수 있습니다. 인터랙티브하게 실습하려면(내장 코드 에디터와 24/7 AI 튜터), CoddyKit PRO로 업그레이드하면 Frontend Academy 강의 전체를 잠금 해제할 수 있습니다. Frontend Academy 강의에는 총 4개의 강의가 포함되어 있습니다.

“뷰포트 메타 태그”에서 뭘 배우나요?

뷰포트 메타 태그를 추가하고 모바일 기기에서 반응형 레이아웃이 올바르게 작동하는 데 필요한 이유를 이해합니다. 브라우저에서 직접 실행하는 실습 코드로 Frontend Academy을(를) 배우며, 24/7 AI 튜터가 강의를 진행하면서 질문에 답변해줍니다.

Frontend Academy을(를) 시작하는 데 경험이 필요한가요?

사전 경험은 필요하지 않습니다. CoddyKit의 Frontend Academy은(는) 초급자부터 고급 학습자까지를 위해 구성되어 있으므로, 여기서 시작하거나 처음부터 시작할 수 있으며 자신의 속도대로 진행할 수 있습니다. 이것은 4개 중 1번째 강의입니다.

“뷰포트 메타 태그” 강의는 얼마나 걸리나요?

대부분의 CoddyKit 강의는 약 5~10분이 소요됩니다. 각 강의는 간결하고 인터랙티브하여 꾸준한 진행이 가능하며, 웹과 앱에서 중단한 부분부터 바로 시작할 수 있습니다.

이 Frontend Academy 강의에서 코드를 작성하고 실행할 수 있나요?

네. 모든 Frontend Academy 강의에는 내장 코드 에디터가 포함되어 있으므로, 브라우저에서 바로 실제 코드를 작성하고 실행한 후 즉시 AI 피드백을 받을 수 있습니다 — 로컬 설정이 필요 없습니다.

이 강의의 모든 강의

  1. 뷰포트 메타 태그
  2. 레이아웃을 위한 Flexbox
  3. 레이아웃을 위한 CSS Grid
  4. 미디어 쿼리와 모바일 우선 개발
← Frontend Academy(으)로 돌아가기