[CSS]visibility: hidden & display: none(code)

See the Pen abpBPjg by minsucoding (@minsucoding) on CodePen.

---

 

안녕하세요 오늘은 visibility: hidden 과 display: none의 차이점 의 대해서 설명을 드리려고해요~

둘이 비슷하면서도 많은 차이가 있어서 쉽게 헷갈리시는 경우가 있어요!

 

 

---

 

 

먼저 예제를 한번 보시면 나와 있지는 않지만 모든 요소의 기본값으로는 visibility: inherit이 적용 되어있어요~

 

visibility: inherit은 부모요소의 상태를 상속받는걸 말하는 속성값이에요

즉 부모가 visibility: hidden이면 그 안에있는 자손들도 visibility: hidden이 적용되는것이죠

 

visibility: visible은 요소의 상태를 그대로 보여줄때 사용되는 속성값이에요

예제를 보시면 처음 visibility: visible은 원상태 그대로인걸 볼수있어요

 

이어서 나오는 display: none은 '안녕하세요' 라는 텍스트를 포함한 요소와 visible 요소 사이에 있는데 차지하는 공간이 사라지신걸 볼수있어요

그말은 display:none을 하게 되면 요소의 성질을 바꿔주는 속성값이라서 요소자체를 없애주는것이죠

이어서 나오는 visibility: hidden은display:none과는 다르게 요소의 상태의 변화를 주는거라서 요소가 안보여지게 해주는 속성이에요! 그래서 요소자체가 차지하고 있는 공간은 그대로 남아있는거죠

 

---

 

다시 간단하게 정리해보면

visibility속성은 요소의 상태(보여진다,안보여진다,부모의상속,테이블정리)를, display속성은 요소의 성질(block,inline-block,inline,none)을 바꾸어 준다 라고 정리가 될거같아요!

 

 

---

 

 

 

핵심 포인트는 visibility: hidden은 요소가 가진 공간을 차지한다 display:none은 요소가 가진 공간을 차지하지 않는다!

이니깐 잘 기억해주세요~ 나중에 응용을 하게되면 어떤걸 써야될지 중요하시게 될테니깐 확실히 알고 넘어갑시다!!

오늘도 긴글 읽어주셔서 감사합니다~~

 

 

---