1 개요[ | ]
- CSS display, visibility 차이
- visibility와 display 차이
display:none과visibility:hidden의 차이
2 숨기기[ | ]
HTML 요소를 숨기는 방법은 다음과 같이 여러가지가 있다.
css
Copy
.method1 { display: none; }
.method2 { visibility: hidden; }
.method3 { height: 0; width: 0; }
- 보이지 않는다는 점에서는 모두 동일
- display: none → 공간 차지하지 않음
- visibility: hidden → 공간 차지함
- HTML5에는 hidden 속성이 신설되었으나 아직 IE에서 지원되지 않는다.[1]
css
Copy
.method4 {hidden:hidden}
3 보이기[ | ]
css
Copy
.method1 {display:inline}
.method2 {visibility:inherit}