CSS에서 display: none과 visibility: hidden의 차이점은?
쉬움 MDN Web Docs해설
display: none은 요소를 렌더링하지 않아 공간도 차지하지 않습니다. visibility: hidden은 요소를 보이지 않게 하지만 원래 차지하던 공간은 그대로 유지됩니다. 레이아웃 유지가 필요하면 visibility, 완전히 숨기려면 display: none을 사용합니다.
display: none은 요소를 렌더링하지 않아 공간도 차지하지 않습니다. visibility: hidden은 요소를 보이지 않게 하지만 원래 차지하던 공간은 그대로 유지됩니다. 레이아웃 유지가 필요하면 visibility, 완전히 숨기려면 display: none을 사용합니다.