CSS display, visibility 속성

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에서 지원되지 않는다.

css

Copy

.method4 {hidden:hidden}

3 보이기

css

Copy

.method1 {display:inline}
.method2 {visibility:inherit}

4 같이 보기

• CSS display 속성
• CSS visibility 속성

6 참고

• http://www.hoiheart.com/wp/archives/117
• http://www.w3schools.com/css/css_display_visibility.asp