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

목차

1. display: none과 visibility: hidden의 차이점

2. display: none

3. visibility: hidden

4. display: none과 visibility: hidden의 공통점

5. 결론

1. display: none과 visibility: hidden의 차이점

CSS에서 display: none과 visibility: hidden은 모두 요소를 숨기는 역할을 합니다. 하지만 두 속성 사이에는 몇 가지 중요한 차이점이 있습니다.

display: none

display: none은 요소를 화면에서 완전히 제거합니다. 즉, 해당 요소가 문서 흐름에서 사라지며, 레이아웃에서도 공간을 차지하지 않습니다. 다시 말해, 해당 요소는 화면을 구성하는 다른 요소들에게 영향을 주지 않습니다. 그러나 display: none으로 요소를 숨기면 해당 요소의 자식 요소들도 숨겨지며, 해당 요소에 적용된 이벤트 리스너도 비활성화됩니다. display: none은 재렌더링을 트리거하지 않기 때문에 성능 측면에서 이점이 있습니다.

display: none;

visibility: hidden

visibility: hidden은 요소를 화면에서 감춥니다. 즉, 해당 요소는 화면 흐름에 그대로 남아있지만, 보이지 않는 상태로 만듭니다. 그렇기 때문에 해당 요소는 여전히 레이아웃에 공간을 차지합니다. visibility: hidden은 자식 요소들에게 영향을 주지 않으며, 해당 요소에 적용된 이벤트 리스너는 유효한 상태로 남아있습니다. visibility: hidden을 사용하여 요소를 숨긴다고 해도 해당 요소는 여전히 재렌더링 되지 않습니다.

visibility: hidden;

결론

요약하자면, display: none은 요소를 문서 흐름과 레이아웃에서 완전히 제거하여 화면에 나타나지 않게 합니다. 반면에, visibility: hidden은 요소를 보이지 않는 상태로 만들지만, 요소가 여전히 레이아웃에 공간을 차지합니다. 따라서, 선택하는 것은 요구사항과 목적에 따라 다를 수 있습니다.

2. display: none

display: none은 CSS 속성으로, 해당 요소를 화면에서 완전히 제거하는 역할을 합니다. 이 속성을 사용하면 해당 요소는 문서 흐름(Flow)에서 사라지게 되며, 레이아웃(Layout)에서도 공간을 차지하지 않습니다. 다른 요소들이 해당 요소를 무시하고 위치를 조정하게 됩니다.

display: none;

display: none을 사용하여 요소를 숨기면, 해당 요소의 모든 자식 요소들도 숨겨집니다. 또한, 해당 요소에 적용된 이벤트 리스너도 비활성화됩니다. 예를 들어, display: none으로 숨겨진 버튼은 클릭 이벤트를 감지하지 않습니다.

이 속성을 사용하면 화면에 보여지지 않으므로 웹 페이지에서 요소가 차지하는 공간을 제거할 수 있습니다. 또한, display: none은 재렌더링을 트리거하지 않기 때문에 성능 측면에서 이점이 있습니다. 하지만, display: none으로 숨긴 요소를 다시 표시하기 위해 JavaScript를 사용해야 하며, 레이아웃에서 공간을 제거하기 때문에 다른 요소의 위치에 영향을 줄 수 있습니다.

display: none을 사용하여 요소를 숨기는 경우, 숨김 상태에서 표시 상태로 전환하는 애니메이션 효과를 주고 싶은 경우 CSS의 transition 속성을 사용하여 부드럽게 전환할 수도 있습니다.

transition: opacity 0.3s ease;

위의 예시에서는 opacity 속성을 사용하여 요소의 투명도를 조절하여 부드러운 전환 효과를 줄 수 있습니다.

3. visibility: hidden

visibility: hidden은 CSS 속성으로, 해당 요소를 화면에서 감추는 역할을 합니다. 이 속성을 사용하면 해당 요소는 여전히 문서 흐름(Flow)에 유지되며, 레이아웃(Layout)에서도 공간을 차지합니다. 다만, 요소가 보이지 않는 상태로 만들어집니다.

visibility: hidden;

visibility: hidden을 사용하여 요소를 숨길 경우, 해당 요소의 자식 요소들에게는 영향을 주지 않습니다. 즉, 자식 요소들은 여전히 화면에 보이게 유지됩니다. 또한, 해당 요소에 적용된 이벤트 리스너도 여전히 유효한 상태로 유지됩니다. 예를 들어, visibility: hidden으로 숨겨진 버튼은 여전히 클릭 이벤트를 감지할 수 있습니다.

visibility: hidden을 사용하여 요소를 숨겨도, 해당 요소는 여전히 레이아웃에서 공간을 차지하기 때문에 다른 요소의 위치에 영향을 줍니다. 따라서, 화면에서 요소가 보이지 않을 뿐이지만 여전히 웹 페이지의 구조에 영향을 미칠 수 있습니다.

visibility: hidden을 사용하여 요소를 숨기는 경우, 숨김 상태에서 표시 상태로 전환하는 애니메이션 효과를 주고 싶은 경우 CSS의 transition 속성을 사용하여 부드럽게 전환할 수 있습니다. 예를 들어, opacity 속성을 사용하여 요소의 투명도를 조절하여 부드러운 전환 효과를 줄 수 있습니다.

transition: opacity 0.3s ease;

위의 예시에서는 opacity 속성을 사용하여 요소의 투명도를 조절하여 부드러운 전환 효과를 줄 수 있습니다. visibility: hidden과는 달리, 요소는 여전히 화면에 보이지 않으며 투명도 전환 효과를 통해 보이도록 변경됩니다.

4. display: none과 visibility: hidden의 공통점

display: none과 visibility: hidden은 모두 해당 요소를 화면에서 숨기는 역할을 합니다. 이 두 속성은 요소를 렌더링하거나 보여주지 않음으로써 화면에 표시되지 않도록 만들 수 있습니다. 이들 속성은 다음과 같은 공통점을 가지고 있습니다.

1. 화면에서 숨김: display: none과 visibility: hidden은 모두 해당 요소를 화면에서 숨깁니다. 사용자는 해당 요소가 보이지 않게 됩니다.

2. 공간 차지하지 않음: display: none과 visibility: hidden은 모두 해당 요소가 레이아웃(Layout)에서 공간을 차지하지 않습니다. 따라서, 다른 요소들은 해당 요소의 영향을 받지 않고 자신들의 위치를 조정합니다.

3. 자식 요소 영향 없음: display: none과 visibility: hidden은 모두 해당 요소의 자식 요소들에게는 영향을 주지 않습니다. 즉, 자식 요소들은 여전히 화면에 보이거나 숨겨진 요소 내에서 렌더링됩니다.

4. 이벤트 리스너 유효: display: none과 visibility: hidden은 모두 해당 요소에 적용된 이벤트 리스너를 유효한 상태로 유지합니다. 따라서, 숨겨져 있거나 보이지 않는 요소에도 여전히 이벤트를 감지할 수 있습니다.

5. 성능 향상: display: none과 visibility: hidden은 모두 해당 요소를 렌더링하지 않기 때문에 성능상의 이점을 가질 수 있습니다. 요소가 화면에 보이지 않으면 불필요한 렌더링 작업이 생략되기 때문에 웹 페이지의 로딩 속도를 향상시킬 수 있습니다.

display: none과 visibility: hidden은 비슷한 목적을 가지고 있지만, 주요한 차이점도 존재합니다. display: none은 해당 요소를 완전히 제거하는 반면, visibility: hidden은 해당 요소를 화면에서 감추는 것입니다. 어떤 속성을 선택할지는 사용하고자 하는 요소의 특성과 사용 목적에 따라 달라질 수 있습니다.

5. 결론

display: none과 visibility: hidden은 둘 다 요소를 화면에서 숨길 수 있는 CSS 속성입니다. 그러나 두 속성은 목적과 동작 방식에 차이가 있습니다.

• display: none은 해당 요소를 완전히 제거하여 레이아웃에서 공간도 차지하지 않습니다. 따라서, 화면에서 완전히 사라지게 됩니다. 해당 요소와 그 자식 요소들에게 영향을 주며, 이벤트 리스너도 제거됩니다. display: none은 성능상 이점을 가지고 있지만, 다시 보여줄 때에는 다시 생성해야 하므로 조금 더 비용이 소요될 수 있습니다.

• visibility: hidden은 해당 요소를 숨기지만, 레이아웃에서는 여전히 공간을 차지하게 유지합니다. 따라서, 요소가 숨겨져도 다른 요소들은 해당 요소에 영향을 받지 않습니다. visibility: hidden은 자식 요소들에게 영향을 주지 않으며, 이벤트 리스너도 유효한 상태로 유지합니다. 화면에서 다시 보여줄 때에도 추가적인 생성 작업이 필요하지 않습니다.

따라서, display: none은 요소를 완전히 제거하고 성능 개선을 위한 용도로 사용될 수 있습니다. visibility: hidden은 요소를 숨기지만 레이아웃을 유지하고 싶은 경우에 유용합니다.

요소를 숨길 때 어떤 속성을 선택할지는 요구사항과 사용 목적에 따라 다릅니다. 일부 요소를 잠시 숨기고 나중에 다시 보여줘야 하는 경우에는 visibility: hidden을 사용하는 것이 적합할 수 있습니다. 반면에 다시 보여주지 않을 요소는 display: none을 사용하여 완전히 제거하는 것이 좋습니다.

CSS의 display: none과 visibility: hidden은 요소의 가시성을 조절할 수 있는 유용한 도구입니다. 각 속성의 동작 방식과 사용법에 대해 이해하여 다양한 상황에서 적절하게 활용할 수 있도록 하여 웹 페이지의 성능을 개선하고 사용자 경험을 향상시킬 수 있습니다.