Front/CSS

[CSS] visibility : 요소를 숨기고 공간은 그대로 유지하기

오선지♬ 2024. 7. 20. 12:43
728x90
반응형

style="display:none;"으로 설정했는데 해당 영역의 높이만큼 자리차지는 하게 해주고 싶으면 어떻게 해야될까?

 

Visibility를 활용하는 방법:

<div style="visibility:hidden;">내용</div>

visibility:hidden; 속성은 요소를 보이지 않게 하지만, 공간은 그대로 유지합니다.

 

style="visibility:hidden;" 을 해제하는 jquery 코드

 $('#myElement').css('visibility', 'visible');
<!DOCTYPE html>
<html>
<head>
    <title>Visibility Example</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
    <div id="myElement" style="visibility:hidden;">이 영역은 처음에 보이지 않습니다.</div>
    <button id="showButton">Show Element</button>

    <script>
        $(document).ready(function(){
            $('#showButton').click(function(){
                $('#myElement').css('visibility', 'visible');
            });
        });
    </script>
</body>
</html>

 

728x90
반응형