visibility 속성
visibility 속성은 요소를 보이지 않게 설정합니다.
이 경우 다른 모든 요소들은 해당 요소가 사라지지 않은 것처럼
동작합니다.
구문
css선택자 {
visibility: visible 또는 hidden 또는 collapse;
}
값
| 값 | 설명 |
|---|---|
visible |
요소가 보입니다. |
hidden |
요소가 투명해져 보이지 않게 되지만, 페이지 레이아웃 형성에는 계속 참여합니다. |
collapse |
테이블 셀 내용에 collapse를 사용하면,
셀들이 사라진 것처럼 보이고 테이블이
새롭게 재구성됩니다.
이 값이 테이블 행이나 열에 적용되지 않는 경우, 사용 결과는 hidden과 동일합니다.
|
기본값: visible.
예제
첫 번째 단락의 텍스트가 처음에는 보이지 않다가, '텍스트 보기' 버튼에 커서를 올리면 읽을 수 있도록 해보겠습니다:
html<button>텍스트 보기</button>
<div class="text">text1</div>
<div>text2</div>cssdiv{
border: 1px solid black;
width: 100px;
}
.text {
visibility: hidden;
}
button:hover + .text {
visibility: visible;
}
Результат: