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

※ "display: none"은 요소를 화면에서 숨기고 레이아웃에 공간을 차지하지 않게 만드는 데 사용됩니다. 

 

화면에서 특정 요소를 감추고 싶다면 어떻게 해야 할까요? 이럴 때는 주로 CSS의 display속성을 none로 바꿔주면서 요소를 화면에서 감추게 됩니다. "display:none"을 적용한 요소는 브라우저에서 렌더링 되지 않으며, 화면에도 표시되지도 공간을 차지하지도 않습니다. 접근성, 동적 상태 관리, 성능 개선, 애니메이션 등 다양한 목적으로 사용될 수 있으나, 남용에 주의해야 하며, 접근성과 검색 엔진 최적화를 고려해야 합니다.

 

display : none를 사용하는 이유

• 웹 접근성: 일부 웹 요소는 시각적으로는 표시되지 않지만 스크린 리더와 같은 보조 기술을 사용하는 사용자에게는 필요할 수 있습니다. 그리하여 시각적으로는 보이지 않지만 접근성을 위해 필요한 폼 요소나 링크를 "display: none"으로 숨길 수 있습니다.
• 동적 상태 관리: "display: none"은 JavaScript와 함께 사용하여 요소를 동적으로 숨기거나 표시하는 데 사용이 가능합니다. 예를 들어, 사용자의 동작에 따라 추가 정보를 표시하거나 숨기는 등의 상호작용을 구현할 수 있습니다.
• 웹 성능 개선: 페이지에 많은 요소가 있을 때, "display: none"을 사용하여 초기에 필요하지 않은 요소들을 숨길 수 있습니다. 이렇게 하면 초기 페이지 로드 속도가 향상될 수 있습니다. 또한, 특정 상황에서 필요한 요소들만 동적으로 로드하여 불필요한 리소스 사용을 줄일 수도 있습니다.
• 애니메이션 및 전환: "display: none"은 요소를 순간적으로 표시되지 않게 만드는 데 사용할수도 있습니다. 이를 이용하면 애니메이션 또는 전환 효과도 구현할 수 있는데 예를 들어, 사용자가 버튼을 클릭하면 해당 요소가 부드럽게 나타나거나 사라지도록 만들 수 있습니다.

 

"disply: none"은 주의해야 할 점도 있습니다. 이 속성을 남용하면 검색 엔진 최적화(SEO)와 같은 문제가 발생할 수 있습니다. 일부 검색 엔진은 "display: none"으로 숨겨진 콘텐츠를 무시하거나 웹 사이트의 숨겨진 콘텐츠를 스팸으로 간주할 수 있습니다. 또한, 웹 접근성에 신경 써야 하며, 적절한 대체 콘텐츠를 제공해야 합니다.

 

 display : none 사용법 

See the Pen display:none1 by wjdxo513 (@wjdxo513) on CodePen.

 

위의 예제를 보시면 "일반적인 텍스트"는 화면에 표시되지만, "숨겨진 텍스트"는 "display:none" 속성으로 인해 보이지 않는것을 보실 수 있습니다. 위와 같이 display:none를 사용하면 해당 요소가 숨겨지며 공간도 차지하지 않습니다. 위의 예제를 보시면 일반적인 텍스트 위에 숨겨진 텍스트 요소가 있음에도 불구하고 아래로 밀리지 않고 노출되는 것을 보실 수 있습니다.

 

 

display:none와 visibilty:hidden과의 차이점

See the Pen Untitled by wjdxo513 (@wjdxo513) on CodePen.

 

display:none은 공간을 차지하지 않지만 visibility:hidden은 공간을 차지한다는 점이 다릅니다. 위의 예제를 보시면 "숨겨진 텍스트" 요소에 "visibility:hidden" 가 설정되어 있어 브라우저에서는 보이지 않지만 공간은 차지하고 있어 "일반적인 텍스트" 요소가 한 줄 아래에 노출되는 것을 보실 수 있습니다.