visibility 예제
<style>
#hz {
margin: auto;
width: 400px;
height: 200px;
background-color: yellow;
border: 1px solid black;
}
</style>
<button onclick="homzzang()">클릭</button>
<div id="hz">홈짱닷컴 Homzzang.com</div>
<p>주의: 안 보여도 공간 차지</p>
<script>
function homzzang() {
document.getElementById("hz").style.visibility = "hidden";
}
</script>
결과보기
visibility 정의
요소 표시 여부 설정/반환.
1.
visibility:hidden;
안 보이지만, 공간은 차지 함. 즉, 보이지는 않지만 만져지는 투명인간
display:none;
안 보이면서, 공간도 안 차지. 즉, 몸둥이 조차 사라져 만질 수 없는 투명인간
2.
기본값: visible
반환값: 요소내용 표시 여부 나타내는 visibility 속성의 속성값 문자열
CSS속성: visibility
CSS버전: CSS2
3.
모든 브라우저 지원.
visibility 구문
[접근]
object.style.visibility
[설정]
object.style.visibility = "visible|hidden|collapse|initial|inherit"
[속성값]
visible
눈에 보이게 함 (기본값)
hidden
눈에 안 보이게 함. 해당 요소의 크기 만큼 공간 차지
collapse
table 요소를 위한 값. width와 padding 값은 유지되나, height 값은 무시됨
※ 다른 요소에 사용된다면 “hidden” 효과와 동일
※ table의 행과 열을 안보이게 하지만, table 레이아웃에는 영향 안 미침..
inherit
부모 요소 속성을 상속
