CSS | display:none VS visibility:hidden의 차이

공통점과 사용 이유

---

• 해당 속성을 사용해서 화면에서 사라지게 만들 수 있음
• 두 속성 모두 화면상에서 컨텐츠 영역을 숨기는 역할을 함
• 자바스크립트(제이쿼리)를 통해 css 속성을 변경하는 과정에서 나는 주로 display:none을 썼지만, 다른 사람은 visibility를 쓴 것을 보고 찾아보게 됨
• 필요한 때에 따라 맞춰 사용하면 될 것 같음

 

 

 

차이점

---

• display:none      → 컨텐츠 안보임 / 해당 컨텐츠가 가지고 있던 영역도 사라짐
• visibility:hidden → 컨텐츠 안보임 / 해당 컨텐츠가 가지고 있던 영역은 유지됨