display: none과 visibility: hidden의 차이점
CSS에서 요소를 숨기는 데에는 주로 display: none과 visibility: hidden이 두 가지 속성이 사용됩니다. 각각의 차이점과 사용 시 주의할 점을 알아보겠습니다.
1. display: none
display: none은 요소를 완전히 숨깁니다. 해당 요소가 문서 내에서 영향을 미치지 않으며, 공간도 차지하지 않습니다. 화면에 전혀 표시되지 않기 때문에 마우스 이벤트나 키보드 이벤트 등과 같은 사용자 상호작용도 발생하지 않습니다.
display: none은 해당 요소의 자식 요소들에도 똑같이 적용됩니다. 따라서, 부모 요소가 display: none으로 숨겨진 경우 자식 요소들도 모두 숨겨지게 됩니다.
2. visibility: hidden
visibility: hidden은 요소를 보이지 않게 하지만, 요소가 문서 내의 공간을 아직 차지하고 있습니다. 즉, 해당 요소의 영역은 여전히 존재하며, 다른 요소가 그 영역을 차지할 수 없습니다. 마우스 이벤트와 같은 사용자 상호작용은 계속해서 발생할 수 있습니다.
visibility: hidden은 부모 요소에만 적용되며, 자식 요소들에는 영향을 주지 않습니다. 즉, 부모 요소가 visibility: hidden으로 숨겨진 경우 자식 요소들은 여전히 보이게 됩니다.
사용 시 주의할 점
display: none과 visibility: hidden을 사용할 때 주의해야 할 점이 있습니다.
display: none을 적용한 요소는 검색 엔진에서 인식할 수 없습니다. 따라서, SEO 관점에서 중요한 내용을 담고 있는 요소를 숨겨야할 경우에는visibility: hidden을 사용하는 것이 좋습니다.- DOM 트리 구성 및 동적 변화에 영향을 미칠 수 있는 경우가 있습니다.
display: none은 해당 요소를 완전히 삭제하는 것으로 인식되므로, 요소가 보이지 않을 때에도 메모리에 여전히 존재하지만visibility: hidden은 요소가 메모리에 존재하기 때문에 DOM 요소를 조작하는 경우에는 주의해야 합니다. - 성능 측면에서는
display: none이visibility: hidden보다 더 효율적입니다.visibility: hidden은 요소가 보이지 않을 때도 레이아웃을 처리해야 하기 때문에 성능 저하가 발생할 수 있습니다.
결론
display: none은 요소를 완전히 숨기고 공간도 차지하지 않지만, visibility: hidden은 요소는 보이지 않지만 여전히 공간을 차지합니다. 또한, display: none은 부모 요소의 자식 요소에도 영향을 주지만 visibility: hidden은 부모 요소에만 적용되며 자식 요소는 보이게 유지됩니다. 사용 시 주의해야 할 점도 각각 다르므로 상황에 맞게 적절한 속성을 선택해야 합니다.
댓글