자바스크립트 문법 - JQuery Hide, Show

Feb 27, 2024

Contents

1. 숨기기


<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>

    <style>
        .box {
            border: 1px solid black;
            padding: 10px;
        }
    </style>
</head>

<body>
    <h1>숨기기</h1>
    <button onclick="hideDisplay()">display로 숨기기</button>
    <button onclick="hideVisible()">visible로 숨기기</button>
    <div class="box">
        <div class="box" id="innerBox1">
            내부박스1
        </div>
        <div class="box" id="innerBox2">
            내부박스2
        </div>
    </div>
    <script>
				//display로 숨기기
        function hideDisplay() {
            $("#innerBox1").hide();
        }
				//visible로 숨기기
        function hideVisible() {
            $("#innerBox2").css("visibility", "hidden");
        }
    </script>
</body>

</html>
</body>

</html>

숨기기에서 hide() 메서드와 css() 메서드를 활용했다.

hide() 활용

hide() 메서드를 사용하면 오른쪽 div 가 disply:none 으로 된 것을 확인할 수 있다.

내부박스 1이 삭제되면서 외부박스의 크기가 같이 줄어든 것을 확인할 수 있다.

css() 활용

css 메서드를 사용하면 내부박스2가 visibility : hidden 으로 된 것을 확인할 수 있다. 이것은 화면에서 숨겨진 것이기 때문에 내부박스2가 사라져도 외부박스의 크기는 그대로 유지된다.

2. 나타내기


<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
    <style>
        .box {
            border: 1px solid black;
            padding: 10px;
        }

        #innerBox1 {
            display: none;
        }

        #innerBox2 {
            visibility: hidden;
        }
    </style>
</head>

<body>
    <h1>나타내기</h1>
    <button onclick="showByDisplay()">display로 나타내기</button>
    <button onclick="showByVisible()">visible로 나타내기</button>
    <div class="box" id="outerBox">
        <div class="box" id="innerBox1">
            내부박스1
        </div>
        <div class="box" id="innerBox2">
            내부박스2
        </div>
    </div>
    <script>
        function showByDisplay() {
            $("#innerBox1").show();
        };
        function showByVisible() {
            $("#innerBox2").css("visibility", "visible");

        };
    </script>
</body>

</html>

show() 메서드와 css() 를 사용한다.

2.1 show() 사용

show() 메서드를 사용하면 disply : block 으로 표시된다. 내부박스1이 생기면서 외부박스의 크기다 같이 커진다.

2.2 css() 사용

css() 매서드를 사용하면 visibility : visible 로 표시된다. 내부박스2가 나타나도 외부박스의 크기는 그대로다.

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script> <style> .box { border: 1px solid black; padding: 10px; } </style> </head> <body> <h1>숨기기</h1> <button onclick="hideDisplay()">display로 숨기기</button> <button onclick="hideVisible()">visible로 숨기기</button> <div class="box"> <div class="box" id="innerBox1"> 내부박스1 </div> <div class="box" id="innerBox2"> 내부박스2 </div> </div> <script> //display로 숨기기 function hideDisplay() { $("#innerBox1").hide(); } //visible로 숨기기 function hideVisible() { $("#innerBox2").css("visibility", "hidden"); } </script> </body> </html> </body> </html>

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script> <style> .box { border: 1px solid black; padding: 10px; } #innerBox1 { display: none; } #innerBox2 { visibility: hidden; } </style> </head> <body> <h1>나타내기</h1> <button onclick="showByDisplay()">display로 나타내기</button> <button onclick="showByVisible()">visible로 나타내기</button> <div class="box" id="outerBox"> <div class="box" id="innerBox1"> 내부박스1 </div> <div class="box" id="innerBox2"> 내부박스2 </div> </div> <script> function showByDisplay() { $("#innerBox1").show(); }; function showByVisible() { $("#innerBox2").css("visibility", "visible"); }; </script> </body> </html>