[HTML & CSS] visibility:hidden 과 display:none 차이점 및 사용법

 

[HTML & CSS] visibility:hidden 과 display:none 차이점 및 사용법

div 태그를 안보이게 하는 방법은 2가지가 있습니다.

첫번째, visibility:hidden // visible

    화면에 보이진 않지만 <div>공간은 존재하고, width와 height값을 준다면 그만큼의 공간이 존재하게 된다.

 

두번째, display:none // block

    화면에 아예 사라지게 하고, 보이지도 않고, 해당 공간도 존재하지 않게 된다.

<div style="display: none;">display: none; 테스트</div>

<div style="visibility: hidden;">visibility: hidden; 테스트</div>

---

결과값

F12를 눌러 확인하실수 있습니다.

display: none; 테스트

visibility: hidden; 테스트