· FRONT-END/└ JS

[ JavaScript ] 버튼을 눌러 이미지의 크기 조절

감자도리22 2024. 5. 5. 14:01

환경 : Visual Studio Code

 

 

 

 

 

[ 스타일 속성으로 폭, 너비를 주었을 경우의 전체 코드 ]

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Javascript 예제</title>

    <!-- 구글 폰트 -->
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@100..900&display=swap" rel="stylesheet">
     
    <!-- 내가 구현할 스타일 -->
    <link rel="stylesheet" type="text/css" href="../css/commons.css">
    <link rel="stylesheet" type="text/css" href="../css/test.css">
    
    <!-- font awesome 아이콘 CDN -->
    <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">
    
    <style>
        .dummy {
            transition-property: width, height;
            transition-duration: 0.1s;
            transition-timing-function: ease-out;
            /* transition: width 0.1s ease-out; */
        }
    </style>

    <!-- javascript를 의도적으로 head 자리에 배치해서 가장 먼저 실행되도록 구현 -->
    <script type="text/javascript">
       
        function smallSize() {
            var target = document.querySelector(".dummy");
            //target.style = "width: 150px; height: 150px";
            target.style.width = "150px";
            target.style.height = "150px";
        }

        function normalImg(){
            var target = document.querySelector(".dummy");
            // target.style = "width: 300px; height: 300px";
            target.style.width = "300px";
            target.style.height = "300px";
        }

        function bigImg(){
            var target = document.querySelector(".dummy");
            // target.style = "width: 450px; height: 450px";
            target.style.width = "450px";
            target.style.height = "450px";
        }

    </script>
</head>
<body>


    <div class="container w-500">
        <div class="cell center">
            <h1>이미지 크기 조절</h1>
        </div>
        <div class="cell center">
            <button class="btn positive" onclick="smallSize();">작게</button>
            <button class="btn positive" onclick="normalImg();">보통</button>
            <button class="btn positive" onclick="bigImg();">크게</button>
            <hr>
            <div class="cell center">
                <img class="dummy" src="../css/image/hachiware.jpg" style="width: 300px; height: 300px;">
            </div>
        </div>
    </div>

   

</body>
</html>

 

 

 

[ 속성으로 폭, 너비를 주었을 때의 전체 코드 ]

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Javascript 예제</title>

    <!-- 구글 폰트 -->
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@100..900&display=swap" rel="stylesheet">
     
    <!-- 내가 구현할 스타일 -->
    <link rel="stylesheet" type="text/css" href="../css/commons.css">
    <link rel="stylesheet" type="text/css" href="../css/test.css">
    
    <!-- font awesome 아이콘 CDN -->
    <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">
    
    <style>
        .dummy {
            transition-property: width, height;
            transition-duration: 0.1s;
            transition-timing-function: ease-out;
            /* transition: width 0.1s ease-out; */
        }
    </style>

    <!-- javascript를 의도적으로 head 자리에 배치해서 가장 먼저 실행되도록 구현 -->
    <script type="text/javascript">
       
        function smallSize() {
            var target = document.querySelector(".dummy");

            //그냥 속성을 주었을 때
            target.width = 150;
            target.height = 150;
        }

        function normalImg(){
            var target = document.querySelector(".dummy");

            target.width = 300;
            target.height = 300;
        }

        function bigImg(){
            var target = document.querySelector(".dummy");

            target.width = 450;
            target.height = 450;
        }

    </script>
</head>
<body>


    <div class="container w-500">
        <div class="cell center">
            <h1>이미지 크기 조절</h1>
        </div>
        <div class="cell center">
            <button class="btn positive" onclick="smallSize();">작게</button>
            <button class="btn positive" onclick="normalImg();">보통</button>
            <button class="btn positive" onclick="bigImg();">크게</button>
            <hr>
            <div class="cell center">
                <img class="dummy" src="../css/image/hachiware.jpg" width="300px" height="300px">
            </div>
        </div>
    </div>

   

</body>
</html>

 

 

 

 

 

개인 공부 기록용입니다:)

 

728x90