[CSS] Display와 Visibility 의 차이점 및 속성

 

 

 

 

 

 

📌 CSS 요소 표시 방법

 

HTML의 요소를 표현하는 방법에는 display와 visibility 두 가지가 있다.

 

 

 

 

1️⃣ display

 

display는 요소를 표시하는 방법을 결정하며, 요소를 보이지 않게 하는 값으로 none을 사용한다.

display: none 일 경우 해당 요소는 보이지 않으며 Layout에 영향을 미치지 않는다.

<form name="form" method="post">
    <input type="radio" name="type" value="1" onclick="view()" checked> Hidden
    <input type="radio" name="type" value="2" onclick="view()"> Show
    <div id="cattery" style="display:none;"> Contents </div>
    <div> Contents </div>
</form>

<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>

 

🌝 속성값

     - inline : 인라인 요소로 표현한다.

     - block : 블럭 요소처럼 표현한다.

     - inline-block : 인라인의 흐름에 따르되 블록 박스처럼 마진, 테두리, 패딩, 너비, 높이 속성이 적용된다.

     - flex : 블록-레벨의 flex 컨테이너처럼 요소를 표현한다.

     - inline-flex : 인라인-레벨의 flex 컨테이너처럼 요소를 표현한다.

     - list-item : 박스를 블록 처리하고 그 안의 아이템들을 인라인 박스 형태로 처리한다.

     - run-in : 문맥에 따라 블록 또는 인라인 박스로 처리한다.

     - table, inline-table, , table-caption, table-cell, table-column, table-column-group, table-header-group

       table-footer-group, table-row, table-row-group : 테이블 스타일의 요소의 동작을 정의한다.

     - none : 블록이 생성되지 않으며, 화면에서 완전히 사라져 어떠한 공간도 차지하지 않는다.

     - inherit : 부모 요소로부터 값을 상속 받는다.

 

 

 

 

 

2️⃣ visibility

 

visibility는 생성된 요소의 렌더링 방법을 결정하며, 요소를 보이지 않게 하는 값으로 hidden을 사용한다.

visibility: hidden 일 경우 해당 요소는 보이지 않지만 Layout에 영향을 미치게 된다.

<form name="form" method="post">
    <input type="radio" name="type" value="1" onclick="view()" checked> Hidden
    <input type="radio" name="type" value="2" onclick="view()"> Show
    <div id="cattery" style="visibility:hidden;"> Contents </div>
    <div> Contents </div>
</form>

<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>

 

🌝 속성값

     - visible : 박스가 보여진다.

     - hidden : 박스가 보이지 않지만 공간을 확보하기 때문에 여전히 레이아웃에 영향을 미친다.

     - collapse : 내부 테이블 객체(행, 행 그룹, 열 및 열 그룹)에 적용된다. hidden과 유사하다.

     - inherit : 부모 요소로부터 값을 상속 받는다.

 

 

 

 

 

 

 

⚡ 참고사이트

http://www.tcpschool.com/css/css_position_display