display:none 과 visibility:hidden 의 차이
Language/HTML 2010. 5. 19. 19:25
div 태그로 만든 Layer를 안보이게 하는 두가지 방법
1. display:none <-> block
아예 사라지게 하는것. 보이지도 않고 해당 공간도 존재하지 않게 됨
2. visibility:hidden <-> visible
보이지만 않고 해당 공간은 존재. width와 height값을 주었다면 그만큼 공간은 존재하게 됨
3. display = “” 하면 디폴트 값이 쓰여지게 되는데 이때 span 태그 안에 있으면 inlinediv 태그 안에 있으면 block 가 쓰여지게 된다.
[출처] [HTML] div display, visibility 속성|작성자 erica
예제1) display
<script language=”javascript”>
function view(){
var f=document.form;
if(f.type[0].checked==true){
document.all.cattery.style.display=”none”;
}else{
document.all.cattery.style.display=””;
}
}
</script>
<form name=”form” method=”post”>
<input type=”radio” name=”type” value=”1″ onclick=”view()” checked>숨기 <input type=”radio” name=”type” value=”2″ onclick=”view()”>보이기
<div id=”cattery” style=”display:none;”>내용</div>
<div>내용2</div>
</form>
예제2) visibility
<script language=”javascript”>
function view(){
var f=document.form;
if(f.type[0].checked==true){
document.all.cattery.style.visibility=”hidden”;
}else{
document.all.cattery.style.visibility=”visible”;
}
}
</script>
<form name=”form” method=”post”>
<input type=”radio” name=”type” value=”1″ onclick=”view()” checked>숨기 <input type=”radio” name=”type” value=”2″ onclick=”view()”>보이기
<div id=”cattery” style=”visibility:hidden;”>내용</div>
<div>내용2</div>
</form>
출처: https://unabated.tistory.com/entry/displaynone-과-visibilityhidden-의-차이 [랄라라]
