HTML5에서 제공하는 전체 화면 API는 게임이나 몰입형 콘텐츠 제작에 유용하게 활용될 수 있습니다. 이 API는 대부분의 최신 브라우저(Internet Explorer 및 Opera 제외)에서 지원됩니다.

특정 요소를 전체 화면으로 전환하려면 requestFullScreen() 메서드를 사용합니다. 예를 들어, ID가 'myCanvas'인 요소를 전체 화면으로 만들려면 다음과 같이 호출할 수 있습니다:

document.getElementById("myCanvas").requestFullScreen();

전체 화면 모드를 종료하려면 cancelFullScreen() 메서드를 사용합니다.

현재 전체 화면 모드인지 여부는 document.fullScreen 속성으로 확인할 수 있으며, 현재 전체 화면 상태인 요소를 반환하는 document.fullScreenElement 속성도 제공됩니다.

전체 화면 모드 활성화

다양한 브라우저 접두사를 고려하여 전체 화면 모드를 활성화하는 함수는 다음과 같이 작성할 수 있습니다:

function enterFullscreen(element) {
  if (element.requestFullscreen) {
    element.requestFullscreen();
  } else if (element.webkitRequestFullscreen) {
    element.webkitRequestFullscreen();
  } else if (element.mozRequestFullScreen) {
    element.mozRequestFullScreen();
  } else if (element.msRequestFullscreen) {
    element.msRequestFullscreen();
  }
}

// 전체 페이지를 전체 화면으로 전환
enterFullscreen(document.documentElement);

// 특정 요소(예: 비디오 플레이어)를 전체 화면으로 전환
// enterFullscreen(document.getElementById("videoPlayerId"));

전체 화면 모드 비활성화

전체 화면 모드를 종료하는 함수는 다음과 같습니다:

function exitFullscreen() {
  if (document.exitFullscreen) {
    document.exitFullscreen();
  } else if (document.mozCancelFullScreen) {
    document.mozCancelFullScreen();
  } else if (document.webkitExitFullscreen) {
    document.webkitExitFullscreen();
  } else if (document.msExitFullscreen) {
    document.msExitFullscreen();
  }
}

// 전체 화면 모드 종료
exitFullscreen();

exitFullscreen() 메서드는 문서 객체에서 호출해야 합니다.

전체 화면 관련 속성 및 이벤트

전체 화면 상태를 확인하는 속성과 관련 이벤트 또한 브라우저별 접두사를 가질 수 있습니다.

• document.fullscreenElement: 현재 전체 화면 모드인 요소를 반환합니다.
• document.fullscreenEnabled: 현재 전체 화면 모드가 활성화 가능한 상태인지 여부를 나타냅니다.

전체 화면 모드가 시작되거나 종료될 때 fullscreenchange 이벤트가 발생합니다. 이 이벤트를 사용하여 전체 화면 상태 변화에 대응할 수 있습니다.

document.addEventListener("fullscreenchange", function() {
  console.log("Fullscreen state changed.");
  // 전체 화면 상태에 따른 UI 업데이트 등 로직 추가
});

document.addEventListener("webkitfullscreenchange", function() {
  console.log("Webkit fullscreen state changed.");
});

document.addEventListener("mozfullscreenchange", function() {
  console.log("Mozilla fullscreen state changed.");
});

document.addEventListener("MSFullscreenChange", function() {
  console.log("MSFullscreen state changed.");
});

전체 화면 CSS 스타일링

전체 화면 모드일 때 특정 요소에 스타일을 적용하기 위해 CSS 가상 클래스를 사용할 수 있습니다:

/* 표준 */
:fullscreen {
  /* 스타일 */
}

/* WebKit */
:-webkit-full-screen {
  /* 스타일 */
}

/* Mozilla */
:-moz-full-screen {
  /* 스타일 */
}

/* Internet Explorer */
:-ms-fullscreen {
  /* 스타일 */
}

/* 백드롭 스타일링 (전체 화면 배경) */
::backdrop {
  /* 스타일 */
}

이러한 전체 화면 API를 사용하면 사용자에게 더욱 몰입감 있는 경험을 제공하는 웹 애플리케이션을 구축할 수 있습니다.