display : none에 대하여 (visibility : hidden)과의 차이

(display: none)과 (visibility: hidden)의 차이

CSS 속성인 (display: none)과 (visibility: hidden)은 HTML 요소의 렌더링을 제어하는 데 사용됩니다. 이 두 속성은 요소를 숨길 때 사용되지만, 기능이 조금 다릅니다.

(display: none)

(display: none)은 선택한 요소를 완전히 제거하여 페이지의 구조에 아무런 공간도 차지하지 않습니다. 즉, 해당 요소는 렌더링 되지 않으며, 페이지 자체에 존재하지 않는 것으로 처리됩니다.

• 예시:

  .hidden-element {
  display: none;
  }

• 위 코드는 클래스가 "hidden-element"인 HTML 요소를 화면에서 완전히 감춥니다.

(visibility: hidden)

(visibility: hidden)은 선택한 요소를 숨기지만, 해당 요소의 영역은 유지됩니다. 즉, 요소의 공간은 유지되며, 다른 요소들의 레이아웃에도 영향을 줍니다.

• 예시:

  .hidden-element {
  visibility: hidden;
  }

• 위 코드는 클래스가 "hidden-element"인 HTML 요소를 화면에서 보이지 않게 합니다. 그러나, 해당 요소의 공간은 여전히 확보되어 있습니다.

차이점 요약

1. (display: none)은 해당 요소를 완전히 제거하며, (visibility: hidden)은 요소의 영역은 유지됩니다.
2. (display: none)은 요소의 레이아웃에 전혀 영향을 주지 않으며, (visibility: hidden)은 요소의 공간은 여전히 확보되어 다른 요소들과 겹칠 수 있습니다.
3. (display: none)은 렌더링 성능에 이점을 제공할 수 있습니다. 이미지와 같은 큰 리소스가 포함 된 요소가 숨겨진 경우, (display: none)을 사용하면 브라우저가 해당 리소스를 다운로드하지 않을 수 있습니다.
4. (visibility: hidden)은 요소를 숨긴 후 다시 표시할 때 추가 처리 없이 원래 상태로 돌아갈 수 있습니다. (display: none)을 사용하면, 다시 표시하기 위해 스크립트를 실행해야 할 수도 있습니다.

이러한 차이점을 고려하여 (display: none)과 (visibility: hidden) 중 어떤 것을 선택할지 결정해야 합니다. 요소를 완전히 제거하고 싶을 때는 (display: none)을, 요소의 공간을 지키면서 숨기고 싶을 때는 (visibility: hidden)을 사용해야 합니다.