[HTML & CSS] html에서 "visibility:hidden" 과 "display:none" 에 대한 설명 및 차이점(+사용 예시)

 

[HTML & CSS] html에서 "visibility:hidden" 과 "display:none" 에 대한 설명 및 차이점(+사용 예시)

 

"visibility: hidden" 과 "display: none" 은 HTML 요소를 화면에서 숨기는 데 사용되는 CSS 속성이지만, 둘 사이에는 중요한 차이점이 있습니다.

visibility: hidden

• 요소가 보이지 않게 되지만, 레이아웃에서 여전히 공간을 차지합니다. 즉, 요소는 보이지 않지만, 페이지 레이아웃에 영향을 미칩니다.
• "visibility: hidden"은 다른 visibility 값(예: visible 또는 collapse)으로 쉽게 전환할 수 있어, 요소를 보이거나 숨길 때 레이아웃이 변경되지 않기를 원할 때 유용합니다.

display: none

• 요소가 보이지 않게 되며, 레이아웃에서도 완전히 제거됩니다. 이 요소에 할당된 공간도 함께 사라지기 때문에, 페이지의 다른 요소들이 이를 채우거나 재배치될 수 있습니다.
• "display: none"은 요소를 DOM에서 완전히 숨길 때 사용되며, 요소의 공간도 필요하지 않을 때 유용합니다.

사용법 예시

visibility: hidden

# style.css

.hidden-element {
  visibility: hidden;
}

# index.html

<div>
  <p>이 문장은 보입니다.</p>
  <p class="hidden-element">이 문장은 숨겨졌지만, 공간은 차지합니다.</p>
</div>

display: none

# style.css

.invisible-element {
  display: none;
}

# index.html

<div>
  <p>이 문장은 보입니다.</p>
  <p class="invisible-element">이 문장은 숨겨졌으며, 공간도 차지하지 않습니다.</p>
</div>

요약

• visibility: hidden: 요소 숨기기, 공간 유지
• display: none: 요소 숨기기, 공간 제거

언제 어느 속성을 사용할지는 요소를 숨길 때 페이지 레이아웃에 어떤 영향을 주고 싶은지에 따라 결정됩니다. 레이아웃을 유지하면서 요소만 숨기고 싶다면 "visibility: hidden"을, 요소와 그 공간을 완전히 없애고 싶다면 "display: none"을 사용하면 됩니다.