visibility Property

Home > Document > CSS > Positioning > visibility

visibility Property

visibility Property는 물체를 보이게(visible) 하거나 안 보이게(hidden) 하는 Property로서 { display : none } 과 비슷한 효과를 내지만 display:none이 브라우저 창의 면적을 차지하지 않는 반면 visibility:hidden 의 경우는 버젓이 브라우저 창에서 물체에 주어진 면적을 차지하면서 보이지 않습니다. display:none 과 함께 DHTML이 효과를 내는데 중요한 Property 중에 하나입니다.

[표 보는 방법]

visibility Property
Value	visible \| hidden \| collapse \| Inherit
Initial	inherit
Applies to	all elements
Inherited	no
Percentages	N/A
Media	Visual
HTML Syntax	{ visibility: sVisibility }
Scripting	object.style.visibility [ = sVisibility ]

CSS Scripting

onMouseOver="this.style.visibility='visible';"

visibility Property의 사용값

visible
물체를 브라우저 창에 보이게 합니다.

hidden
물체를 브라우저 창에서 보이지 않게 하고, 면적은 차지합니다.

collapse
table menu의 border-collapse와 같은 효과를 낸다고 되어 있지만 *작동하지 않습니다.

visibility Property DHTML

visible

hidden

소스 보기

입력

<HTML>
    <HEAD>
        <TITLE>visibility Property</TITLE>
    <STYLE type="text/css">
    <!-- 
    .td_button{
    height:18px;
    background-color:royalblue;
    border:1px solid #808080;
    cursor:hand;
    font-size:11px;
    color:#EFEFEF;
    text-align:center;
    }
    -->
    </STYLE>
    </HEAD>
    <BODY>
      <CENTER>
        <IMG name="img_1" src="../images/AA17.jpg"><BR><BR>
        <table width="100%">
          <tr>
            <td class="td_button" onclick="img_1.style.visibility='visible';">visible</td>
            <td class="td_button" onclick="img_1.style.visibility='hidden';">hidden</td>
          </tr>
        </table>
      </CENTER>   
    </BODY>
</HTML>

Top

Back

New

검색