[js] 5. 나타내기

Sep 05, 2024


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

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .box {
            border: 1px solid black;
            padding: 10px;
        }

        #innerBox1 {
            display: none;
        }

        #innerBox2 {
            visibility: hidden;
        }
    </style>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
</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() {
            // let el = document.querySelector("#innerBox1");
            // el.style.display = "block";
            $("#innerBox1").css("display", "block");
        }
        function showByVisible() {
            // let el = document.querySelector("#innerBox2");
            // el.style.visibility = "visible";
            $("#innerBox2").css("visibility", "visible");
        }
    </script>
</body>

</html>

스타일에 보면 둘다 보이지 않는다. 실행해보면

공간이 있는데 이것은 visibility : hidden 이어서 공간을 차지하고 있다.