visibility 속성

개요

visibility 속성은 태그의 가시성을 결정한다. 총 4가지 속성이 있으며 기본값은 inherit 이다.

visible : 보임
hidden : 숨기지만, 자신의 영역은 계속 차지한다.
collapse : 겹치도록 지정( 테이블의 행과 열 요소만 지정할 수 있으며, 그 외 요소의 지정하면 hidden으로 해석된다.)
inherit : 부모 요소의 값을 상속

사용법

#box1 { width:100px; height:100px; visibility:hidden; }

예제

<html>
<head>
    <style>
        #box1 { width:100px; height:100px; visibility:hidden; background-color:#F00; }
        #box2 { width:100px; height:100px; visibility:visible; background-color:#F00; }
    </style>
</head>
<body>
    <div id="box1"></div>
    <div id="box2"></div>
</body>
</html>
출력 결과: