전체 화면: Fullscreen API

핵심 개념

비디오나 게임을 할 때 모니터를 꽉 채우는 전체 화면 모드로 바꿔주는 기능이에요.

코드 분석

HTML5📋 코드 (10줄)

<div id='fs-box' style='width: 150px; height: 150px; background: #eee; border: 1px solid #333; display: flex; align-items: center; justify-content: center;'>
  상자 영역
</div>
<button onclick='toggleFS()'>이 상자를 전체 화면으로</button>
<script>
  function toggleFS() {
    const el = document.getElementById('fs-box');
    if (el.requestFullscreen) el.requestFullscreen();
  }
</script>

AI 프롬프트

🤖 AI에게 잘 물어보는 법 — 모델·전략별 프롬프트

Claude

무료: Sonnet 4.6 / Pro $20/mo: Opus 4.6

이 Fullscreen API 코드의 cross-browser prefix 누락,
ESC 키 처리, 권한 거부 핸들링 문제를 찾아 수정해줘.

ChatGPT

무료: GPT-5.5 / Plus $20/mo: GPT-5.5 Pro

Fullscreen API로 동영상 플레이어, 이미지 갤러리,
프레젠테이션 모드를 실전 코드 3개로 만들어줘.

Gemini

무료: 2.5 Flash / Pro $19.99/mo: 3.1 Pro

이 Fullscreen 구현을 분석해서
브라우저 호환(특히 iOS), 사용자 트리거 요구사항,
접근성을 종합 점검해줘.

Grok

무료: Grok 4.1 / SuperGrok $30/mo

2026년에 Fullscreen API가
실무에서 자주 쓰이는 카테고리(미디어/게임/교육)가
뭔지 현실적으로 알려줘.

⭐ 이것만 기억하세요

전체 화면: Fullscreen API는 이 3가지만 확실히 잡으세요

1.영상이나 프레젠테이션에서 전체 화면 전환이 안 되면 사용자가 브라우저 UI에 계속 방해받습니다

2.element.requestFullscreen()으로 특정 요소를 전체 화면으로 전환하고, Escape 키로 빠져나옵니다

3.다음 챕터에서 사용자가 현재 탭을 보고 있는지 감지하는 Page Visibility API를 배웁니다

💬 이 챕터 질문 보기

HTML5 · CH.30 — 질문하거나 답변을 확인하세요

→

진행도 30 / 33

← 커리큘럼으로 ← 목록으로 (HTML5)