CSS Visibility(可见성)

Visibility 속성指定元素是可见还是隐藏。

指定元素的可见性

您可以使用该visibility属性来指定元素是否可见。此属性可以采用下表中列出的以下值之一：

visibility: collapse;이지만, 스타일 규칙은 내부 테이블 요소를 제거하지만 테이블 레이아웃에 어떠한 영향도 미치지 않습니다. 테이블 요소가 일반적으로 차지하는 공간은 이후 동일한 등급의 채우기로 대체됩니다.

CSS Visibility vs Display

CSS display와 visibility 속성은 같은 것처럼 보이지만, 실제로는 완전히 다르며, 웹 개발의 새로운 기능에 대한 혼란을 일으킬 수 있습니다.

• visibility: hidden;을 사용하여 요소를 숨깁니다. 그러나 여전히 레이아웃에서 공간을 차지합니다. 숨김 상자의 자식 요소의 보이는 설정이 '보이는'으로 설정되면 그들은 보이게 됩니다.

• display: none;을 사용하여 표시를 종료하고 문서에서 요소를 완전히 제거합니다. HTML이 소스 코드에 있더라도 공간을 차지하지 않습니다. 모든 자식 요소의 표시 속성이 none으로 설정되어도 표시를 종료합니다.

Visibility 속성의 사용법

visibility:　visible
/*　요소가 보이는 기본 값　*/
visibility:　hidden
/*　요소가 보이지 않지만, 여전히 해당 공간을 유지합니다　*/
visibility:　collapse
/*　table 객체에만 적용되며, 행이나 열을 제거할 수 있지만 테이블 레이아웃에 영향을 미치지 않습니다. 이 값이 table 이외의 객체에 사용되면 hidden으로 표현됩니다.　*/
visibility: inherit
/*　상위 요소의 visibility 값을 상속합니다.　*/

Display 속성의 사용법

Display 속성의 사용가능한 값은 많지만, 여기서는 그 중 몇 가지에만 집중합니다: block, none, inline

display: none
/*　요소가 보이지 않으며, 해당 위치를 유지하지 않습니다　*/
display: block
/*　블록 수준 요소로 표현됩니다(일반적으로 단一行을 차지합니다)　*/
display: inline
/*　행 수준 요소로 표현됩니다(일반적으로 단一行을 차지하지 않습니다)　*/

위에서 볼 수 있듯이, Visibility와 Display 속성은 모두 요소를 숨길 수 있지만, 이들의 차이점은 visibility: hidden이 요소를 숨기는 동시에 페이지에서 요소가 필요한 공간을 유지한다는 점이고, display: none은 요소를 페이지에서 제거한 것처럼 보입니다.
또한, display: block과 display: inline의 차이는 block 요소가 페이지에서 단一行을 차지하는 반면 inline 요소는 그렇지 않다는 점입니다. 일부 객체는 기본적으로 block 요소로, 일부는 기본적으로 inline 요소로 설정되어 있습니다. 사용할 때는 동일한 속성의 중복 정의를 피해야 합니다.

Visibility나 Display 속성을 언제 사용할 것인가