CSS - Visibility 속성 (❗ vs - opacity:0 / display:none)

Visibility

 

 

 visible     |     hidden

(default)

 

 

 

 

display: none의 경우에는 차지하는 공간마저 없애지만,

visibility: hidden을 하면 공간은 그대로 남지만 content만 안보이게함.

 

>> opacity: 0과 유사하게 됨.

 

 

---

 

<총정리>

 

display:none

• 영역 사라짐
• 이벤트(ex.클릭) 작동 안함
• tab focus 안됨

 

visibility:hidden

• 영역 있음
• 이벤트(ex.클릭) 작동 안함
• tab focus 안됨
• 뒤에 있는 요소 클릭 가능

 

opacity:0

>> 존재함! 이벤트고 뭐고 다 됨! 단지 투명할 뿐.

• 영역 있음
• 이벤트(ex.클릭) 작동 함
• tab focus 됨
• 뒤에 있는 요소 클릭 불가능

 

 

---

REF >

 

visibility - CSS: Cascading Style Sheets | MDN