1. 개요
요소를 화면에 보이지 않도록 만드는 방법이며, 각 방법마다 차이점이 있다.
2. display: none
- DOM Tree에서는 요소가 존재하지만 Render Tree 단계에서는 제거된다.
- 따라서 요소는 공간을 차지하지 않는다.
3. visibility: hidden
- DOM Tree 및 Render Tree 모두 요소가 존재한다.
- 보이지는 않지만 요소 자체는 존재하기 때문에 공간을 차지한다.
- 이벤트가 작동하지 않는다.
4. opacity: 0
- DOM Tree 및 Render Tree 모두 요소가 존재한다.
- 보이지는 않지만 요소 자체는 존재하기 때문에 공간을 차지한다.
- 이벤트가 작동한다.