display:none, visibility:hidden 비교

display: none과 visibility: hidden은 둘 다 요소를 화면에서 보이지 않게 만드는 속성이지만, 그 동작 방식에서 중요한 차이점이 있습니다. 아래에서 두 속성의 차이점을 비교해 보겠습니다.

1. display: none

• display: none을 적용하면, 해당 요소는 화면에서 보이지 않게 될 뿐만 아니라, DOM에서 완전히 사라진 것처럼 동작합니다.
• 요소는 레이아웃에서 공간을 차지하지 않게 되며, 다른 요소들이 그 공간을 차지하게 됩니다.
• 애니메이션, 이벤트 리스너 등도 영향을 받을 수 있습니다. 예를 들어, display: none으로 설정된 요소는 클릭 이벤트를 받을 수 없습니다.

예시:

div {
  display: none;
}

<div>This will not be visible and will not occupy any space.</div>

2. visibility: hidden

• visibility: hidden을 적용하면, 해당 요소는 화면에서 보이지 않지만, 레이아웃에서 여전히 공간을 차지합니다.
• 즉, 요소는 투명하게 표시되지만, 그 자리를 여전히 차지하고 있기 때문에 다른 요소들이 그 공간을 차지하지 않습니다.
• 요소는 보이지 않지만 여전히 인터랙티브하며, 이벤트 리스너는 여전히 작동합니다. 예를 들어, visibility: hidden으로 설정된 요소는 클릭할 수 있습니다.

예시:

div {
  visibility: hidden;
}

<div>This will be invisible but still occupy space.</div>

비교

특성 display: none visibility: hidden

보이기 여부	요소가 화면에서 완전히 사라짐	요소가 보이지 않음, 하지만 공간은 차지함
레이아웃에서 공간 차지 여부	공간을 차지하지 않음	공간을 차지함
다른 요소의 배치	다른 요소들이 해당 공간을 차지함	다른 요소들은 기존 위치를 유지하며, 공간을 차지한 채로 있음
이벤트 처리	이벤트를 받을 수 없음 (예: 클릭, hover 등)	이벤트를 받을 수 있음 (예: 클릭, hover 등)
애니메이션	애니메이션이 적용되지 않음	애니메이션은 여전히 적용됨

결론

• display: none은 요소를 완전히 숨기고, 그 자리를 다른 요소들이 차지하게 만듭니다.
• visibility: hidden은 요소를 보이지 않게 만들지만, 그 자리는 그대로 남아 있어 다른 요소들이 차지하지 않습니다.

따라서, 레이아웃에 영향을 미치지 않으면서 요소를 보이지 않게 하려면 visibility: hidden을 사용하고, 요소를 완전히 숨기고 공간도 차지하지 않게 하려면 display: none을 사용하는 것이 적합합니다.