CSS display 속성

HTML/CSS

CSS display 속성

에시드 2011. 12. 1. 11:43

display inline : 줄바꿈 안됌, width / height 지정 불가 (like span태그)
            block : 줄바꿈 가능, width / height 지정 가능 (like div태그)
            list-item : block과 동일한 기능에 목록표시가 추가된다.
            none : 감춘다
            초기값 initial Value는 block이다.

CSS Display와 Visibility 차이점

- 화면에 보이지 않는건 공통
- visibility:visible 보이지 않아도 영역을 차지하고 있음
- display:none 보이지 않고 영역도 차지하지 않음

<html>
<head>
<style>
  .displayPanel{ float:right; }
  .box{ border: 1px solid #ff0000; width:100px; heghit:100px; text-align:center; }
  .v_t{ position:absolute; left:50px; top:320px; }
  .d_t{ position:absolute; left:250px; top:320px; }  
</style>
<script>
  function on_Visible(){
    var v1 = document.getElementById("box_v_1");
    if(v1.style.visibility!="hidden")
      v1.style.visibility="hidden";
    else
      v1.style.visibility="visible";
  }

function on_Display(){
    var d1 = document.getElementById("box_d_1");
    if(v1.style.display!="none")
      v1.style.display="none";
    else
      v1.style.visibility="block";
  }
</script>  
</head>

</body>
</html>