[javascript] 자바스크립트로 화면 전환 및 전체화면 모드 구현하기

14 Dec 2023

javascript

이번 포스트에서는 자바스크립트를 사용하여 웹 페이지에서 화면 전환과 전체화면 모드를 구현하는 방법을 살펴보겠습니다.

화면 전환

화면 전환은 사용자가 CSS, 애니메이션 또는 스크립트를 이용하여 현재 페이지를 다른 화면으로 전환하는 것을 말합니다. 자바스크립트를 사용하여 화면 전환을 구현하는 방법은 다양하며, 아래 예제는 간단한 fade 효과로 화면을 전환하는 방법을 보여줍니다.

// HTML
{/* <div id="container">
  <div class="page" id="page1">Page 1</div>
  <div class="page" id="page2">Page 2</div>
</div> */}

// CSS
{/* .page {
  display: none;
  position: absolute;
}

// JavaScript
const page1 = document.getElementById('page1');
const page2 = document.getElementById('page2');

function switchPage() {
  page1.style.display = 'none';
  page2.style.display = 'block';
}

위 코드는 두 개의 페이지를 포함하는 컨테이너를 만들고, 자바스크립트를 사용하여 페이지를 전환합니다.

전체화면 모드

전체화면 모드는 사용자가 웹 페이지를 전체화면으로 표시하는 기능입니다. 브라우저의 Fullscreen API를 사용하여 자바스크립트로 전체화면 모드를 구현할 수 있습니다.

// JavaScript
const element = document.documentElement;

function openFullscreen() {
  if (element.requestFullscreen) {
    element.requestFullscreen();
  } else if (element.mozRequestFullScreen) { // Firefox
    element.mozRequestFullScreen();
  } else if (element.webkitRequestFullscreen) { // Chrome, Safari and Opera
    element.webkitRequestFullscreen();
  } else if (element.msRequestFullscreen) { // IE/Edge
    element.msRequestFullscreen();
  }
}

function closeFullscreen() {
  if (document.exitFullscreen) {
    document.exitFullscreen();
  } else if (document.mozCancelFullScreen) { // Firefox
    document.mozCancelFullScreen();
  } else if (document.webkitExitFullscreen) { // Chrome, Safari and Opera
    document.webkitExitFullscreen();
  } else if (document.msExitFullscreen) { // IE/Edge
    document.msExitFullscreen();
  }
}

위 코드는 HTML의 요소를 전체화면으로 표시하거나 전체화면 모드를 해제하는 함수를 보여줍니다.

자바스크립트를 사용하여 화면 전환과 전체화면 모드를 구현하는 것은 웹 페이지의 사용성과 사용자 경험을 향상시킬 수 있습니다.

말그대로인 위치정보와 사용자 아이디 등을 미디어에 전달하는 데에, 다 받는 사람 때문에 이름과 저작자 등을 꼭 확인해보시길 바랍니다.

자세한 내용은 MDN Web Docs 등의 참고 자료를 확인해 주세요.