페이지 공간을 희생하지 않고 요소 숨기기

DOM에서 요소의 존재를 유지하면서 시각적 표시에서 요소를 제거하려고 할 때 일반적인 접근 방식 중 하나는 visible:hidden 속성을 사용하는 것과 관련이 있습니다. 그러나 이 방법은 숨겨진 요소에 의해 지속적인 공간 점유로 이어질 수 있습니다.

눈에 띄는 흔적을 남기지 않고 요소를 효과적으로 숨기려면 숨김 해제를 위해 display:block과 결합된 display:none 속성을 활용하는 것이 좋습니다.

디스플레이로 숨기기:없음

원하는 요소에 디스플레이:없음 구현 모호함:

element {
  display: none;
}

이 작업을 수행하면 요소가 시각적으로 눈에 띄지 않게 렌더링되어 보기에서 효과적으로 숨겨집니다.

디스플레이로 표시:블록

이미 숨겨진 요소를 만들려면 요소가 다시 나타나면 디스플레이:블록을 해당 요소에 할당:

element {
  display: block;
}

이 방법을 사용하면 DOM에서의 존재나 페이지의 할당된 공간에 영향을 주지 않고 요소를 숨기거나 표시할 수 있습니다.