JavaScript 실습문제 3. 버튼을 눌러 크기 조정하기

1. div요소와 버튼 만들기

<div id="size" class="area"></div>
    <button onclick="sizeDown();">50x50</button>
    <button onclick="original();">원본(100X100)</button>
    <button onclick="sizeUp();">200X200</button>

<style>
    .area{width: 100px; height: 100px; background: black;}
</style>

 

2. 버튼클릭시 발생하는 메소드 작성

 <script>
        // const divEl = document.getElementById("size"); 전역변수로 선언 
        function sizeDown(){
            const divEl = document.getElementById("size");
           
            divEl.style.width="50px";
            divEl.style.height="50px";
        }
        function original(){
            const divEl = document.getElementById("size");
            divEl.style.width="100px";
            divEl.style.height="100px";
        }
        function sizeUp(){
            const divEl = document.getElementById("size");
            divEl.style.width="200px";
            divEl.style.height="200px";
        }
    </script>

>>> 위의  세가지 메소드를 한개로 정의 가능( 매개변수 이용) 

 <div id="div2" class="area"></div>
    <button onclick="sizeChange(50)">50x50</button>
    <button onclick="sizeChange(100)">원본(100x100)</button>
    <button onclick="sizeChange(200)">200x200</button>

    <script>
        function sizeChange(num){
            const div2 = document.getElementById("div2");
            div2.style.width = num +"px";
            div2.style.height = num + "px";
        }
    </script>