요소를 숨기면서 페이지 레이아웃 유지

시각적 레이아웃에 영향을 주지 않고 HTML 요소를 숨기려는 경우 visible: hide를 사용하면 원하지 않는 결과를 초래합니다. 요소를 보기에서 숨기는 동안 페이지에서 동일한 공간을 계속 차지합니다.

디스플레이 비활성화

이 문제를 극복하려면 디스플레이 속성을 사용하는 것이 좋습니다. 요소 표시를 없음으로 설정하면 마치 DOM에서 완전히 제거된 것처럼 시각적 표현에서 효과적으로 사라집니다.

다음 예를 고려하세요.

처음에는 div 요소가 정상적으로 표시됩니다. 숨기려면:
#element {
  display: none;
}
display: none이 적용되면 요소가 시각적으로 사라지고 이전에 차지했던 공간이 확보됩니다. 요소의 가시성을 복원하려면:
#element {
  display: block;  
}
디스플레이 사용의 이점: 없음
페이지 레이아웃 유지
HTML 코드에서 요소 위치 유지
표시 설정을 통해 요소를 쉽게 다시 표시할 수 있습니다: 블록