목차
- visibility 예제 - 요소 보임 여부 설정
- visibility 정의
- visibility 구문
- visibility:hidden / display:none 차이
- 부모 요소 숨김 상태에서 자식 요소 노출 설정
- visibility:collapse를 table 요소에 사용
- visibility:collapse를 tr 요소에 사용
- visibility:collapse를 td 요소에 사용
- visibility:collapse를 특정 td 요소에 사용
visibility 예제 - 요소 보임 여부 설정
<style>
h2.a {visibility: visible;}
h2.b {visibility: hidden;}
</style>
<h2 class="a">홈짱닷컴 Homzzang.com</h2>
<h2 class="b">홈짱닷컴 Homzzang.com</h2>
<p>주의: 안 보여도 공간차지</p>
결과보기
visibility 정의
요소를 눈에 보이게 할지 말지 정함.
1.
- 기본값: visible
- 상속여부: O
- 애니효과: O
- CSS버전: CSS2
- JS구문 : object.style.visibility="hidden";
2.
3.
visibility 구문
selector {visibility: visible|hidden|collapse|initial|inherit;}
[속성값]
visible
눈에 보이게 함 (기본값)
hidden
눈에 안 보이게 함.
collapse
table 요소를 위한 값.
- width와 padding 값은 유지되나, height 값은 무시됨.
- 다른 요소에 사용된다면 “hidden” 효과와 동일
- table의 행/열 안보이게 하지만, table 레이아웃에는 영향 안 미침.
initial
이 속성의 기본값으로 설정.
inherit
부모요소의 속성값 상속.
visibility:hidden / display:none 차이
visibility:hidden;
안 보이지만, 공간 차지.
display:none;
안 보이면서, 공간 안 차지.
[visibility:hidden 예제]
<style>
.a {
width:250px;
height:100px;
border:2px solid #b8064d;
padding:10px;
text-align:center;
background-color:#f8e1eb;
visibility:collapse
}
.b {
width:250px;
height:100px;
border:2px solid #b8064d;
padding:10px;
text-align:center;
background-color:yellow;
}
</style>
<div class=a>홈짱닷컴 (homzzang.com)</div>
<div class=b>홈페이지 무료 제작 가이드 </div>
결과보기
[display:none 예제]
<style>
.a {
width:250px;
height:100px;
border:2px solid #b8064d;
padding:10px;
text-align:center;
background-color:#f8e1eb;
display:none
}
.b {
width:250px;
height:100px;
border:2px solid #b8064d;
padding:10px;
text-align:center;
background-color:yellow;
}
</style>
<div class=a>홈짱닷컴 (homzzang.com)</div>
<div class=b>홈페이지 무료 제작 가이드 </div>
부모 요소 숨김 상태에서 자식 요소 노출 설정
<style>
.hz {visibility:hidden;}
.hz .host {visibility:visible}
</style>
<div class="hz">
<span>홈짱닷컴</span>
<span class="host">Homzzang.com</span>
</div>
결과보기
PS. 주의: 부모요소가 display:none 경우엔 작동 X (
관련글 보기)
※ visibility:collapse 예제 4개
visibility:collapse를 table 요소에 사용
- 테이블 자체가 안 보임.
- 테이블 height 값 무시됨.
- padding값과 width값 유지.
<style>
table{border:2px solid #b8064d; width:300px; height:300px; padding:10px;visibility:collapse}
tr {}
td {border:2px solid; padding:10px; text-align:center; background-color:#f8e1eb; }
</style>
<table>
<tr><td>1</td><td>2</td></tr>
<tr><td>3</td><td>4</td></tr>
</table>
<div>홈짱닷컴 (homzzang.com)</div>
visibility:collapse를 tr 요소에 사용
- 테이블 내부만 안 보임.
- 테이블 height 값 무시됨.
- padding 및 width값 유지.
<style>
table {border:2px solid #b8064d; width:300px; height:300px; padding:10px;}
tr {visibility:collapse}
td {border:2px solid; padding:10px; text-align:center; background-color:#f8e1eb; }
</style>
<table>
<tr><td>1</td><td>2</td></tr>
<tr><td>3</td><td>4</td></tr>
</table>
<div>홈짱닷컴 (homzzang.com)</div>
visibility:collapse를 td 요소에 사용
- 테이블 내부만 안 보임.
- 테이블 height 값 유지됨.
- td셀들 구분이 안 보임.
<style>
table {border:2px solid #b8064d; width:300px; height:300px; padding:10px;}
tr {}
td {border:2px solid; padding:10px; text-align:center; background-color:#f8e1eb; visibility:collapse}
</style>
<table>
<tr>
<td>1</td><td>2</td></tr>
<tr>
<td>3</td><td>4</td></tr>
</table>
<div>홈짱닷컴 (homzzang.com)</div>
visibility:collapse를 특정 td 요소에 사용
- 특정 td셀만 안 보임.
- 테이블 height값 유지됨.
- 나머지 td셀은 보임.
<style>
table {border:2px solid #b8064d; width:300px; height:300px; padding:10px;}
tr {}
td {border:2px solid; padding:10px; text-align:center; background-color:#f8e1eb; }
td.a {border:2px solid; padding:10px; text-align:center; background-color:#f8e1eb; visibility:collapse}
</style>
<table>
<tr><td>1</td><td>2</td></tr>
<tr><td>3</td>
<td class=a>4</td></tr>
</table>
<div>홈짱닷컴 (homzzang.com)</div>
