[css, javascript] display, visibility를 사용하여 요소 숨기기, 삭제하기

display는 요소의 표현 방법을 지정하는 속성.
visibility는 말 그대로 요소를 표현할 지 말지를 결정하는 속성.

display

block

블록요소로 표현; 한칸 씩 표현

css

h1 {
  display: block;
}

javascript

 var h1 = document.getElementById('h1');
 h1.style.display = "block";

inline

인라인 요소로 표현; 한줄 안에 표현.
css

h1 {
  display: inline;
}

javascript

 var h1 = document.getElementById('h1');
 h1.style.display = "inline";

inline-block

block의 width, heigh, margin 등의 속성이 적용된 inline 요소로 표현
css

h1 {
  display: inline-block;
}

javascript

 var h1 = document.getElementById('h1');
 h1.style.display = "inline-block";

none

요소 삭제(할당된 공간 자체가 삭제)
css

h1 {
  display: none;
}

javascript

 var h1 = document.getElementById('h1');
 h1.style.display = "none";

inherit

부모 요소의 속성 값을 상속 받아 표현.
css

h1 {
  display: inherit;
}

javascript

 var h1 = document.getElementById('h1');
 h1.style.display = "inherit";

visibility

visible

기본 값으로 표시.
css

h1 {
  visibility: visible;
}

javascript

 var h1 = document.getElementById('h1');
 h1.style.visibility = "visible";

hidden

요소를 보여주진 않지만 할당된 공간은 존재.
css

h1 {
  visibility: hidden;
}

javascript

 var h1 = document.getElementById('h1');
 h1.style.visibility = "hidden";

collapse

table 요소에 적용(행 및 행 그룹, 열 및 열 그룹). hidden과 유사.
css

h1 {
  visibility: collapse;
}

javascript

 var h1 = document.getElementById('h1');
 h1.style.visibility = "collapse";

inherit

부모 요소의 속성 값을 상속 받음.

css

h1 {
  visibility: inherit;
}

javascript

 var h1 = document.getElementById('h1');
 h1.style.visibility = "inherit";