HTML div 영역 숨기기 - HTML div yeong-yeog sumgigi

div 영역 숨기기 시에..

style="display:none" 과 visibilit:hidden 의 차이를 알아 볼 것.. 화면에서 그려지는것이 약간 틀린것을 발견함..

웹 검색 결과 이런 내용이 떠서 펌..

CSS 속성 중 visibility:hidden 과 display:none 의 속성은 태그를 숨길 때 사용한다.

태그를 숨기는 속성은 같지만 태그가 위치하는 공간은 틀려진다

display:none 은 여백을 남기지 않고 숨겨지지만, visibility:hidden의 경우에는 여백을 남긴 채 숨겨지게 된다.

<p><strong>Normal</strong></p>
<div style="border:5px #FF0000 solid;">DIV01</div>
<div style="border:5px #33FF66 solid;">DIV02</div>
<div style="border:5px #3366FF solid;">DIV03</div>

<p><strong>Display none</strong></p>
<div style="border:5px #FF0000 solid;">DIV01</div>
<div style="border:5px #33FF66 solid;display:none;">DIV02</div>
<div style="border:5px #3366FF solid;">DIV03</div>

<p><strong>Visibility hidden</strong></p>
<div style="border:5px #FF0000 solid;">DIV01</div>
<div style="border:5px #33FF66 solid;visibility:hidden;">DIV02</div>
<div style="border:5px #3366FF solid;">DIV03</div>

display는 요소를 삭제하거나 인라인 속성이나 블록 속성으로 바꿔 보이게 한다.

visibility는 해당 요소를 숨기거나 보이게 할 수 있다.

여기서 인라인 속성이란 좌우로 나열하여 보여주는 것이고

블록속성은 위 아래로 나열하여 보여준다.

display: [none / inline / block];

visibility: [hidden / visible];

위와 같이 사용한다.

none : 삭제

inline : 인라인 적용

block : 블록 적용

hidden : 숨기기

visible : 보이기

삭제와 숨기기는 별 차이 없어보이지만

삭제를 하면 공간을 차지 하지 않고 사라지지만

숨기기를 하면 빈 공간으로 남아있다.

예제를 확인해보자

<html>
    <head>
        <meta charset="UTF-8">
        <title>요소 보이기/숨기기</title>
        <link rel="icon" href = "img/btn.png">
        <style>
            li{
                list-style-type: none;
                background-color: aqua;
                padding: 20px;
                display: inline;
            }
            a:hover{
                /*해당 요소를 숨기므로 영역은 남아있음*/
                visibility: hidden;/*[visible|hidden]*/
            }
            #dis{
                /*해당 요소를 지우므로 영역도 없어짐*/
                /*지웠다 새로 그리는 느낌이기 때문에 조금 느려질 수 있다.*/
                display: none;/*[none|inline|block]]*/
            }
        </style>
        <!--스타일이 많으면 로딩이 느려질 수 있다.-->
        <!--아이디가 # 클래스가 . 태그는 p-->
    </head>
    <body>
        <ul>
            <a href="#"><li>HTML</li></a>
            <a href="#"><li>CSS</li></a>
            <a href="#"><li>JAVA-SCRIPT</li></a>
            <a href="#" id="dis"><li>J-Query</li></a>
            <a href="#"><li>BOOT STRAP</li></a>
        </ul>
    </body>

</html>

인라인 속성이라 좌우로 나열되고 사진에는 안나왔지만 마우스가 CSS 부분에 있어 중간에 빈 부분이 있다.

그리고 J-Query도 나와야 하지만 display: none;이라 자리의 흔적조차 보이지 않는다.

display를 이용해서

https://qdgbjsdnb.tistory.com/134

https://qdgbjsdnb.tistory.com/142

두 예제를 합친 최종본의 본문을 보였다 숨겼다를 적용해보자

본문 내용은 조금 변경한다.

<html>
    <head>
        <meta charset="UTF-8">
        <title>메인 Page</title>
        <link rel="icon" href = "img/btn.png">
        <style>
            div.content{
                background-image: url("img/bg.png");
                background-repeat: no-repeat;
                background-position: right bottom;
                background-size: 200px;
                height: 60%;
            }
            dt{
                font-weight: 600;
                font-size: 120%;
            }
            #dt1:hover{
                /*해당 요소를 숨기므로 영역은 남아있음*/
                visibility: hidden;/*[visible|hidden]*/
            }
            #dt2:hover{
                /*해당 요소를 숨기므로 영역은 남아있음*/
                visibility: hidden;/*[visible|hidden]*/
            }
            #dt3:hover{
                /*해당 요소를 숨기므로 영역은 남아있음*/
                visibility: hidden;/*[visible|hidden]*/
            }
            #dt4:hover{
                /*해당 요소를 숨기므로 영역은 남아있음*/
                visibility: hidden;/*[visible|hidden]*/
            }
        </style>
    </head>
    <body>
        <iframe src="exercise_03_navi.html" width="100%" height="51" frameborder="0" scrolling="no"></iframe>
        
        <h2>HTML</h2>
        <hr/>
        <div class="content">
            <dl>
                <a href="#" id="dt1">
                    <dt>
                        정의
                        <dd>
                            HTML은 Hyper Text Markup Language의 약자 입니다.
                        </dd>
                    </dt>
                </a>
                <a href="#" id="dt2">
                    <dt>
                        용도
                        <dd>
                            웹 어플리케이션의 뼈대를 만듭니다.
                        </dd>
                    </dt>
                </a>
                <a href="#" id="dt3">
                    <dt>
                        추가 학습1
                        <dd>
                            CSS
                        </dd>
                    </dt>
                </a>
                <a href="#" id="dt4">
                    <dt>
                        추가 학습2
                        <dd>
                            JAVA SCRIPT, J-Query
                        </dd>
                    </dt>
                </a>
            </dl>
        </div>
        <iframe src="exercise_03_footer.html" width="100%" frameborder="0" scrolling="no"></iframe>
    </body>
</html>

결과는 다음과 같다.