1. 버튼 클릭시 해당하는 요소의 글자 크기 확대/축소

건강보험공단, 산업인력공단 등 사이트에서 사용하는 글자확대, 축소하기

      //글자 확대/축소 _ input 태그안에 자바스크립트 언어를 사용해 구현
      input onclick="document.getElementById('p01').style.fontSize='24px'"

        //0-1. 변수 설정
        let nowZoom = 100; //화면 초기값을 변수에 저장
        const btn_plus = document.getElementById('btn_plus');
        const btn_minus = document.getElementById('btn_minus');
        const btn_default = document.getElementById('btn_default');

        //0-2. zoom 함수 설정
        function zoom(){
          document.body.style.zoom=nowZoom+'%';
          if(nowZoom==70){ 
            alert('더 이상 축소하실 수 없습니다.'); //70% 이하 내려갈 수 없게
          }
          if(nowZoom==200){
            alert('더 이상확대하실 수 없습니다.'); // 200% 이상 커질 수 없게
          };
        };

        //1. 화면 확대 하기
        btn_plus.addEventListener('click', function(){
          // window.alert('화면확대 버튼을 클릭하셨습니다.'); _ 클릭 테스트
          nowZoom = nowZoom+20; //버튼 클릭시 nowZoon 에 20 더해줌
          if(nowZoom>=200){  //만약 변수값이 200보다 커지면
            nowZoom=200; //200으로 설정하여 더 이상 커지지 않게 설정함
          }
          zoom();
        });

        //2. 화면축소하기
        btn_minus.addEventListener('click',function(){
          nowZoom = nowZoom-10;

          // 최대 축소비율
          if(nowZoom<=70){
            nowZoom=70;
          }
          zoom();
        });

        //3. 원래비율로 돌리기
        btn_default.addEventListener('click',function(){
          nowZoom=100;
          zoom();
        });
    

2. 버튼 클릭시 조명 ON/OFF 기능 구현하기