Visibility
개요 : 이 속성은 요소가 화면에 보일지, 숨길지, 겹칠지를 지정한다.
정의
|
visibility |
설명 |
|
값 |
visible | hidden | collapse | inherit |
|
기본값 |
inherit |
|
적용대상 |
모든 요소 |
|
상속 |
안됨 |
|
백분율 |
사용불가 |
|
미디어 |
visual |
값
|
값 |
설명 |
|
visible |
보이도록 지정한다. |
|
hidden |
숨기도록 투명하게 지정한다. 자신의 영역을 그대로 보존해서, 화면 배치에 영향을 준다. |
|
collapse |
겹치도록 지정한다. 테이블의 행과 열 요소만 지정할 수 있으며, 그 외 요소의 지정하면 숨기도록(hidden) 해석된다. |
|
inherit |
부모 요소의 값을 상속 하도록 지정한다. |
예제
- View Source
------------------------------------------------------------------------------------------------------------
<style>
li.hidden { visibility: hidden; }
</style>
<body>
<p><code>visibility: hidden</code>은 <code>display:none</code>과 달리 자신의 영역을 보존합니다.
<ol>
<li>첫번째 목록</li>
<li class="hidden">두번째 목록</li>
<li>세번째 목록</li>
</ol>
</body>
------------------------------------------------------------------------------------------------------------- Result
visibility: hidden은 display:none과 달리 자신의 영역을 보존합니다.
- 첫번째 목록
3. 세번째 목록
------------------------------------------------------------------------------------------------------------