How To - 전체 화면

w3.css

전체 화면

JavaScript로 전체 화면 창을 만드는 방법을 알아보자.

전체 화면 창

JavaScript를 사용하여 전체 화면 모드에서 요소를 보는 방법.

전체 화면 비디오

전체 화면에서 요소를 열려면 다음 element.requestFullscreen() 메서드를 사용한다.

<script>
/* Get the element you want displayed in fullscreen mode (a video in this example): */
var elem = document.getElementById("myvideo");

/* When the openFullscreen() function is executed, open the video in fullscreen.
Note that we must include prefixes for different browsers, as they don't support the requestFullscreen method yet */
function openFullscreen() {
  if (elem.requestFullscreen) {
    elem.requestFullscreen();
  } else if (elem.webkitRequestFullscreen) { /* Safari */
    elem.webkitRequestFullscreen();
  } else if (elem.msRequestFullscreen) { /* IE11 */
    elem.msRequestFullscreen();
  }
}
</script>

기본 예시

예제 보기

전체 화면 문서

전체 페이지를 전체 화면으로 열려면 document.getElementById(“element”) 대신 document.documentElement를 사용한다. 이 예제에서는 닫기 함수를 사용하여 전체 화면을 닫는다.

<script>
/* Get the documentElement (<html>) to display the page in fullscreen */
var elem = document.documentElement;

/* View in fullscreen */
function openFullscreen() {
  if (elem.requestFullscreen) {
    elem.requestFullscreen();
  } else if (elem.webkitRequestFullscreen) { /* Safari */
    elem.webkitRequestFullscreen();
  } else if (elem.msRequestFullscreen) { /* IE11 */
    elem.msRequestFullscreen();
  }
}

/* Close fullscreen */
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;
}

/* Standard syntax */
:fullscreen {
  background-color: yellow;
}

기본 예시

예제 보기