display:none
- 영역 사라짐
- 이벤트(ex.클릭) 작동 안함
- tab focus 안됨
visibility:hidden
- 영역 남아 있음
- 이벤트(ex.클릭) 작동 안함
- tab focus 안됨
- 뒤에 있는 요소 클릭 가능
opacity:0
- 영역 남아 있음
- 이벤트(ex.클릭) 작동 함
- tab focus 됨
- 뒤에 있는 요소 클릭 불가능
출처: https://velog.io/@kya754/no1
See the Pen Untitled by 챈챈 (@naaoviji-the-animator) on CodePen.
dv1: 영역이 사라짐
dv2: 영역은 차지하지만 보이지 않음
dv3: 영역은 차지하지만 투명해서 안 보임