[Javascript] 화면확대, 화면축소 기능 구현하기

웹사이트중에서 화면확대와 축소기능을 제공하는 사이트를 종종 본적이 있죠. 보통 은행 사이트에서 많이 봤던거 같은데 🧐

오늘은 웹화면을 확대하고 축소할 수 있는 기능을 JS로 구현해 보겠습니다!

요즘 시력이 더 떨어진거같아..🫣

📌 화면확대, 화면축소 구현하기

HTML

<ul class="wrap">
    <li><a href="#">화면확대</li>
    <li><a href="#">화면축소</li>
    <li><a href="#">기본설정</li>
  </ul>

CSS

ul, li { 
  list-style: none;
}

a {
  text-decoration: none;
  color: #000;
}

.wrap { 
  display: flex;
  gap: 8px;
  width: 300px;
}

.wrap li { 
  flex-grow: 1;
  text-align: center;
  border: 1px solid #000;
  
}

화면확대 , 화면축소 , 그리고 기본설정 버튼까지 만들어 줄게요!

JavaScript

let nowZoom = 100; // 현재 비율

// 화면크기 축소
function zoomOut() {
	nowZoom = nowZoom - 10;
  
  	// 화면크기 최대 축소율 70%
  	if(nowZoom <= 70){
      	nowZoom = 70;
    }
  	zooms();
}

// 화면크기 확대
function zoomIn() {
	nowZoom = nowZoom + 20;
  	
  	// 화면크기 최대 확대율 200%
  	if(nowZoom >= 200){
    	nowZoom = 200;
    }
  	zooms();
}

// 원래 화면크기도 되돌아가기
function zoomReset() {
	nowZoom = 100;
  	zooms();
}

function zooms() {
   document.body.style.zoom = nowZoom + "%";
   if(nowZoom == 70) {
      alert("더 이상 축소할 수 없습니다."); // 화면 축소율이 70% 이하일 경우 
   }
   if(nowZoom == 200) {
      alert("더 이상 확대할 수 없습니다."); // 화면 확대율이 200% 이상일 경우 
   }
}

화면의 기본 비율은 100으로 맞춰주고 축소 버튼을 누르면 -10을, 확대 버튼을 누르면 +20을 해줍니다.

최대 확대율과 최소 축소율도 설정해주고 alert창으로 경고 메시지까지 만들어 줍니다!

HTML

<ul class="wrap">
    <li><a href="#" onclick="zoomIn();">화면확대</li>
    <li><a href="#" onclick="zoomOut();">화면축소</li>
    <li><a href="#" onclick="zoomReset();">기본설정</li>
  </ul>

onclick 으로 해당 함수를 설정해줍니다.

성공! 😎