🗣️ display: none과 visibility: hidden의 차이점은 무엇인가요?
-
의도: 기본적인 CSS 지식과 브라우저 렌더링 과정을 알고 있는지 확인하는 질문이다.
-
나의 답안
두 속성 모두 요소를 화면에서 보이지 않게 하는 효과를 줍니다.
하지만, 레이아웃에 영향을 미치는지에 따라 차이가 있습니다.
즉, 화면에 보이지 않지만 원래 있었던 공간을 차지하는지 아닌지에 따라 달라집니다.display: none은 요소를 DOM(문서 객체 모델)에서 완전히 제거하는 것처럼 동작합니다.
요소가 차지하는 모든 공간이 제거되어, 다른 요소들이 그 공간을 채우게 됩니다.
요소가 레이아웃에서 완전히 제외되므로, 페이지의 다른 요소들의 위치와 크기에 영향을 미칩니다.
이 속성이 적용된 요소에 이벤트 리스너가 있다면, 이 이벤트 리스너는 무시됩니다.visibility: hidden은 요소를 보이지 않게 만듭니다.
요소는 여전히 DOM에 존재하며, 공간을 차지합니다.
요소는 여전히 레이아웃에 포함되어 있으므로, 다른 요소들은 그 요소가 차지하고 있는 공간을 고려해서 배치됩니다.
이 속성이 적용된 요소에 이벤트 리스너가 있다면, 이 이벤트 리스너는 여전히 동작할 수 있습니다.
예를 들어, 마우스 이벤트는 해당 요소 위에서 발생할 수 있습니다. -
주어진 답안 (모범 답안)
두 속성 다 요소를 화면에서 보이지 않게 하는 것이지만, 레이아웃에 영향을 미치는지에 따라 차이가 있습니다.
쉽게 말해, 화면에 보이지 않지만 원래 있었던 공간을 차지하는지 아닌지입니다.display: none은 말 그대로 디스플레이에서 없애는 것이기 때문에 기존 공간을 다른 요소로 채울 수 있습니다.
다시 말해 공간을 차지하지 않습니다.반면에
visibility: hidden은 요소를 그저 투명하게만 만들어주는 것이기에 기존 요소의 공간을 차지합니다.
📝 개념 정리
🌟 display:none
-
효과: 요소를 DOM(문서 객체 모델)에서 완전히 제거하는 것처럼 동작한다.
-
공간 차지: 요소가 차지하는 모든 공간이 제거된다. 다른 요소들이 그 공간을 채우게 된다.
-
이벤트: 해당 요소에 할당된 이벤트 리스너가 무시된다.
-
레이아웃 영향: 요소가 레이아웃에서 완전히 제외되므로, 페이지의 다른 요소들의 위치와 크기에 영향을 미친다.
-
예시
<div style="display: none;">이 요소는 보이지 않으며, 공간도 차지하지 않습니다.</div> <p>이 텍스트는 바로 위 요소가 차지했던 공간을 채우게 됩니다.</p>
🌟 visibility: hidden
-
효과: 요소를 보이지 않게 만든다.
-
공간 차지: 요소는 여전히 DOM에 존재하며, 공간을 차지한다.
-
이벤트: 해당 요소에 할당된 이벤트 리스너는 여전히 동작할 수 있다. 예를 들어, 마우스 이벤트는 해당 요소 위에서 발생할 수 있다.
-
레이아웃 영향: 요소는 여전히 레이아웃에 포함되어 있다. 다른 요소들은 그 요소가 차지하고 있는 공간을 고려해서 배치된다.
-
예시
<div style="visibility: hidden;">이 요소는 보이지 않지만, 공간을 차지하고 있습니다.</div> <p>이 텍스트는 여전히 그 아래에 있습니다.</p>
