display:none은 해당 Tag와 그 내부의 모든 Tag의 내용을 없애버린다. 해당 Tag가 점유하고 있던 block을 아예 없애고, 화면 상엔 원래 없었던 것처럼 나타나게 된다
※사실 없앤다기 보다 차라리 html에 적용되지 않도록 한다는 게 맞는 듯 하나 단순하기 기억하기엔 이게 더 편할 듯 함
visibility:hidden은 해당 Tag와 그 내부의 모든 Tag의 내용을 숨겨버린다. 이는, 없애는 게 아니라 보이지만 않게 하는 터라 해당 Tag가 점유하고 있던 공간은 공란으로 나타나게 된다(물론 z-index가 해당 속성이 적용된 Tag 뒤에 있는 Tag의 배경 등도 모두 안나온다는 게 아니라 그 Tag의 내용만 안보인다는 말이다)
즉 다시 말하자면, 속성명을 번역해보면 알 수 있겠지만,
display:none은 display[역)나타내다,발휘하다]와 같이 그 Tag 자체를 나타내거나 보이는 것에 대한 Handling Attribute이고,
visibility:hidden은 visibility[역)시야범위, 시야, 눈에 보임]와 같이 눈에 보이는지에 대한 여부만 Handling하는 Attribute라는 것이다.
| <style> #box{ visibility: hidden; } </style> </head> <body> <span>Dummy</span> <div id="box"> <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span> </div> <span>Dummy</span> |
<style> |
|
Dummy Dummy |
Dummy Dummy |
'Programming > HTML+CSS' 카테고리의 다른 글
| 초기화 코드 (0) | 2013.03.05 |
|---|---|
| cos 라이브러리 사용시 request.getParameter 가 안되는 문제. (0) | 2013.01.22 |
| [CSS] 시작 문자 선택자 (0) | 2012.11.30 |
| [CSS] overflow, position, flow (0) | 2012.11.30 |
| table 태그와 자손 선택자 주의사항 (0) | 2012.11.30 |
