🪄 프론트엔드 면접 질문 스터디 - 3편. display: none인 요소의 브라우저 처리 방법

✔️ display: none 과 visibility: hidden의 차이점

display:none

html요소에 display: none 속성을 주게 되면 해당 요소는 렌더링 트리에서 제거되어 이벤트 동작이 불가능하다.
HTML은 여전히 소스 코드에 있지만 공간을 차지하지 않는다.
아예 사라지게 하는 것
보이지도 않고 해당 공간도 존재하지 않게 된다.

visibility: hidden

반면 visibility:hidden 으로 처리된 요소는 렌더링 트리에 존재하므로 이벤트 동작은 가능하다.
보이지만 않고 해당 공간은 존재. width와 height값을 주었다면 그만큼 공간은 존재하게 됨

display: none은 렌더 트리에서 완전히 제거하고, visibility: hidden은 렌더 트리에는 남아 있으며, 사용자 눈에만 안보이게 된다.

❗ 결론

요소가 display: none 속성을 갖게 되면, 브라우저는 해당 요소를 렌더 트리에서 제거하면서 재랜더링을 통해 comonent를 업데이트한다.