엘레멘트를 감추는 방법

 

 CSS에서 엘레멘트를 감출 때 사용하는 방법은 두 가지가 있다.

 

 

1. visibility:hidden 을 사용하는 방법

 

 visibility 속성을 hidden을 주는 경우 레이아웃(엘레멘트가 차지하는 영역)은 그대로 유지하면서 화면에서 엘레멘트만 숨긴다. 즉, 엘레멘트의 콘텐츠가 차지하는 영역을 그대로 유지시키고, 콘텐츠만 숨긴다.

 

<div>동해물과 백두산이 마르고 닳도록 하느님이 보우하사 우리나라 만세!</div>
<div style="visibility:hidden">

동해물과 백두산이 마르고 닳도록 하느님이 보우하사 우리나라 만세!

</div>
<div>동해물과 백두산이 마르고 닳도록 하느님이 보우하사 우리나라 만세!</div>

 

 

 

 

 

 

 

 

 

 

 

 

 

2. display:none 을 사용하는 방법

 

 display 속성은 엘레멘트의 영역을 감추는 역할과 엘레멘트의 레벨을 변경할 때 사용하는 속성이다. display 속성을 none으로 주는 경우 엘레멘트는 콘테츠 + 콘텐츠가 차지하는 영역 모두를 사라지게 한다.

 

<div>동해물과 백두산이 마르고 닳도록 하느님이 보우하사 우리나라 만세!</div>
<div style="display:none">

동해물과 백두산이 마르고 닳도록 하느님이 보우하사 우리나라 만세!

</div>
<div>동해물과 백두산이 마르고 닳도록 하느님이 보우하사 우리나라 만세!</div>