전체 화면을 어떻게 구현할 수 있는지

JavaScript를 사용하여 전체 화면 창을 만들어보세요.

전체 화면 창

JavaScript를 사용하여 전체 화면 모드로 요소를 어떻게 볼 수 있는지。

버튼을 클릭하여 비디오를 전체 화면 모드로 열어주세요：

직접 시도해보세요

전체 화면 비디오

요소를 전체 화면으로 열기 위해 사용하는 것은 element.requestFullscreen() 메서드:

예제

<script>
/* 전체 화면 모드로 표시할 요소를 얻습니다(이 예제에서는 비디오입니다)： */
var elem = document.getElementById("myvideo");
/* openFullscreen() 함수를 실행할 때, 비디오를 전체 화면으로 열어줍니다。
주의할 것입니다. 다른 브라우저에 대한 프리픽스를 포함해야 합니다. 왜냐하면 그들은 requestFullscreen 메서드를 지원하지 않기 때문입니다 */
function openFullscreen() {
  if (elem.requestFullscreen) {
    elem.requestFullscreen();
  } else if (elem.webkitRequestFullscreen) { /* Safari */
    elem.webkitRequestFullscreen();
  } else if (elem.msRequestFullscreen) { /* IE11 */
    elem.msRequestFullscreen();
  }
}
</script>

직접 시도해보세요

전체 화면 문서

전체 페이지를 전체 화면으로 열려면 사용하세요 document.documentElement 대신 document.getElementById("element")。

이 예제에서는 또한 전체 화면을 탈출하기 위해 클로즈 함수를 사용합니다：

예제

<script>
/* documentElement (<html>)를 전체 화면으로 보여주기 위해 가져오기 */
var elem = document.documentElement;
/* 전체 화면으로 보기 */
function openFullscreen() {
  if (elem.requestFullscreen) {
    elem.requestFullscreen();
  } else if (elem.webkitRequestFullscreen) { /* Safari */
    elem.webkitRequestFullscreen();
  } else if (elem.msRequestFullscreen) { /* IE11 */
    elem.msRequestFullscreen();
  }
}
/* 전체 화면 종료 */
function closeFullscreen() {
  if (document.exitFullscreen) {
    document.exitFullscreen();
  } else if (document.webkitExitFullscreen) { /* Safari */
    document.webkitExitFullscreen();
  } else if (document.msExitFullscreen) { /* IE11 */
    document.msExitFullscreen();
  }
}
</script>

صفحة الكامل 모드에 있을 때, CSS를 사용하여 페이지 스타일을 설정할 수도 있습니다:

예제

/* Safari */
:-webkit-full-screen {
  background-color: yellow;
}
/* IE11 */
:-ms-fullscreen {
  background-color: yellow;
}
/* 표준 문법 */
:fullscreen {
  background-color: yellow;
}

직접 시도해보세요

관련 페이지

HTML DOM 참조 가이드:requestFullscreen() 메서드

HTML DOM 참조 가이드:exitFullscreen() 메서드

HTML DOM 참조 가이드:documentElement 메서드