visibility 속성

visibility 속성은 요소를 보이지 않게 설정합니다. 이 경우 다른 모든 요소들은 해당 요소가 사라지지 않은 것처럼 동작합니다.

구문

선택자 {
	visibility: visible 또는 hidden 또는 collapse;
}

값	설명
`visible`	요소가 보입니다.
`hidden`	요소가 투명해져 보이지 않게 되지만, 페이지 레이아웃 형성에는 계속 참여합니다.
`collapse`	테이블 셀 내용에 `collapse`를 사용하면, 셀들이 사라진 것처럼 보이고 테이블이 새롭게 재구성됩니다. 이 값이 테이블 행이나 열에 적용되지 않는 경우, 사용 결과는 `hidden`과 동일합니다.

기본값: visible.

첫 번째 단락의 텍스트가 처음에는 보이지 않다가, '텍스트 보기' 버튼에 커서를 올리면 읽을 수 있도록 해보겠습니다:

<button>텍스트 보기</button>
<div class="text">text1</div>
<div>text2</div>

div{
	border: 1px solid black;
	width: 100px;
}
.text {
	visibility: hidden;
}
button:hover + .text {
	visibility: visible;
}