가시성:숨김과 표시:없음의 차이점은 무엇입니까?

질문자 :Chris Noe

CSS 규칙 visibility:hidden 및 display:none 둘 다 요소가 표시되지 않는 결과를 가져옵니다. 동의어인가요?

display:none 의미합니다(단, DOM을 통해 여전히 상호작용할 수 있음). 다른 태그 사이에는 공간이 할당되지 않습니다.

visibility:hidden display:none 과 달리 태그가 표시되지 않지만 페이지에서 태그에 대한 공간이 할당됨을 의미합니다. 태그가 렌더링되지만 페이지에 표시되지 않습니다.

예를 들어:

 test | <span style="[style-tag-value]">Appropriate style in this tag</span> | test

[style-tag-value] 를 display:none 다음과 같은 결과가 나타납니다.

 test | | test

[style-tag-value] visibility:hidden 으로 바꾸면 다음과 같은 결과가 나타납니다.

 test |                       | test

kemiller2002

동의어가 아닙니다.

display:none 은 페이지의 정상적인 흐름에서 요소를 제거하여 다른 요소가 채울 수 있도록 합니다.

visibility:hidden 은 여전히 공간을 차지하는 페이지의 정상적인 흐름에서 요소를 그대로 둡니다.

놀이 공원에서 놀이기구를 타기 위해 줄을 서 있는데 줄에 서 있는 누군가가 너무 소란스러워서 보안요원이 줄에서 그들을 뽑는다고 상상해 보십시오. 그런 다음 줄에 있는 모든 사람들이 한 위치 앞으로 이동하여 현재 비어 있는 슬롯을 채웁니다. 이것은 display:none 과 같습니다.

이것을 비슷한 상황과 대조하지만 당신 앞에 있는 누군가가 투명 망토를 입는다. 선을 볼 때 빈 공간이 있는 것처럼 보이지만 여전히 누군가가 있기 때문에 사람들은 그 빈 공간을 채울 수 없습니다. 이것은 visibility:hidden 과 같습니다.

user22151

추가할 가치가 있는 한 가지는 요청되지는 않았지만 개체를 완전히 투명하게 만드는 세 번째 옵션이 있다는 것입니다. 고려하다:

 1st <a href="http://example.com" style="display: none;">unseen</a> link.<br /> 2nd <a href="http://example.com" style="visibility: hidden;">unseen</a> link.<br /> 3rd <a href="http://example.com" style="opacity: 0;">unseen</a> link.

(결과를 보려면 위의 "코드 스니펫 실행" 버튼을 클릭해야 합니다.)

1과 2의 차이점은 이미 지적되었습니다(즉, 2는 여전히 공간을 차지합니다). 그러나 2와 3에는 차이가 있습니다. 사례 3의 경우 링크 위로 마우스를 가져가면 마우스가 여전히 손 모양으로 전환되고 사용자는 여전히 링크를 클릭할 수 있으며 Javascript 이벤트는 링크에서 계속 발생합니다. 이것은 일반적으로 원하는 동작이 아닙니다 (그러나 때로는 그럴 수도 있습니까?).

또 다른 차이점은 텍스트를 선택한 다음 일반 텍스트로 복사/붙여넣기하면 다음을 얻을 수 있다는 것입니다.

 1st link. 2nd link. 3rd unseen link.

3의 경우 텍스트가 복사됩니다. 이것은 일부 유형의 워터마킹에 유용하거나 부주의한 사용자가 콘텐츠를 복사/붙여넣기할 때 표시되는 저작권 표시를 숨기고 싶을 때 유용할 수 있습니다.

Kip

display:none 은 레이아웃 흐름에서 요소를 제거합니다.

visibility:hidden 그것을 숨기지만 공간을 남깁니다.

mmaibaum

자식 노드와 관련하여 큰 차이가 있습니다. 예: 상위 div와 중첩된 하위 div가 있는 경우. 따라서 다음과 같이 작성하면:

 <div id="parent" style="display:none;"> <div id="child" style="display:block;"></div> </div>

이 경우 div가 표시되지 않습니다. 그러나 다음과 같이 작성하면 :

 <div id="parent" style="visibility:hidden;"> <div id="child" style="visibility:visible;"></div> </div>

그러면 하위 div가 표시되지만 상위 div는 표시되지 않습니다.

Govinda

그것들은 동의어가 아닙니다. display: none 은 페이지의 흐름에서 요소를 제거하고 페이지의 나머지 부분은 마치 존재하지 않는 것처럼 흐릅니다.

visibility: hidden 은 보기에서 요소를 숨기지만 페이지 흐름은 숨기지 않고 페이지에 공간을 남겨둡니다.

ConroyP

display: none 은 페이지에서 요소를 완전히 제거하고 요소가 전혀 없는 것처럼 페이지가 빌드됩니다.

Visibility: hidden 은 더 이상 볼 수 없는 경우에도 문서 흐름에 공간을 남깁니다.

이것은 당신이하는 일에 따라 큰 차이를 만들 수도 있고 그렇지 않을 수도 있습니다.

wcm

visibility:hidden 하면 객체가 여전히 페이지에서 세로 높이를 차지합니다. display:none 사용하면 완전히 제거됩니다. 이미지 아래에 텍스트가 있고 display:none 하면 해당 텍스트가 위로 이동하여 이미지가 있던 공간을 채웁니다. 가시성:숨김을 수행하면 텍스트가 동일한 위치에 유지됩니다.

Steven Williams

display:none 은 요소를 숨기고 공간을 차지하고 있는 축소하지만 visibility:hidden 은 요소를 숨기고 요소 공간을 보존합니다. display:none은 이전 버전의 IE 및 Safari에서 javascript에서 사용할 수 있는 일부 속성에도 영향을 줍니다.

slashnick

visibility:hidden 은 공간을 보존합니다. display:none .

Pearl

다른 모든 답변 외에도 IE8에는 중요한 차이점이 있습니다. display:none 을 사용하고 요소의 너비 또는 높이를 얻으려고 하면 IE8은 0을 반환합니다(다른 브라우저는 실제 크기를 반환함). visibility:hidden 대해서만 올바른 너비 또는 높이를 반환합니다.

szeryf

display: none;

페이지에서 사용할 수 없으며 공간을 차지하지 않습니다.

 visibility: hidden;

요소를 숨기지만 여전히 이전과 동일한 공간을 차지합니다. 요소는 숨겨지지만 여전히 레이아웃에 영향을 줍니다.

visibility: hidden 은 공간을 보존하는 반면 display: none 은 공간을 보존하지 않습니다.

표시 없음 예: https://www.w3schools.com/css/tryit.asp?filename=trycss_display_none

가시성 숨겨진 예 : https://www.w3schools.com/cssref/tryit.asp?filename=trycss_visibility

Anu

visibility:hidden 은 페이지의 요소를 유지하고 해당 공간을 차지하지만 사용자에게 표시되지 않습니다.

display:none 은 페이지에서 사용할 수 없으며 공간을 차지하지 않습니다.

Ramesh

가시성 속성이 "hidden" 설정된 경우 브라우저는 콘텐츠가 보이지 않더라도 페이지에서 콘텐츠를 위한 공간을 계속 차지합니다.
그러나 객체를 "display:none" 으로 설정하면 브라우저는 콘텐츠를 위한 페이지 공간을 할당하지 않습니다.

예시:

 <div style="display:none"> Content not display on screen and even space not taken. </div> <div style="visibility:hidden"> Content not display on screen but it will take space on screen. </div>

세부 정보보기

Shubelal Kumar

디스플레이: 없음

페이지의 정상적인 흐름에서 요소를 제거하여 다른 요소가 채울 수 있도록 합니다.

요소는 페이지에 전혀 나타나지 않지만 DOM을 통해 여전히 요소와 상호 작용할 수 있습니다. 다른 요소 사이에는 공간이 할당되지 않습니다.

가시성: 숨김

여전히 공간을 차지하는 페이지의 정상적인 흐름에 요소를 남겨둡니다.

요소가 표시되지 않고 페이지에서 요소의 공간이 할당됩니다.

요소를 숨기는 다른 방법

Z-색인 사용

 #element { z-index: -11111; }

페이지에서 요소 이동

 #element { position: absolute; top: -9999em; left: -9999em; }

가시성: 숨김 및 표시: 없음 속성에 대한 흥미로운 정보

visibility: hidden 및 display: none 레이아웃, 페인트 및 합성을 다시 트리거하므로 성능이 동일하지 않습니다. 그러나 opacity: 0 visibility: hidden 과 동일한 기능이며 레이아웃 단계를 다시 트리거하지 않습니다.

그리고 CSS-transition 속성도 우리가 신경써야 할 중요한 부분입니다. visibility: hidden 에서 visibility: visible 으로 전환하면 CSS 전환을 사용할 수 있지만 display: none 에서 display: block 으로 전환하면 사용할 수 없기 때문입니다. visibility: hidden 은 JavaScript 이벤트를 캡처하지 않는 추가 이점이 있는 반면 opacity: 0 은 이벤트를 캡처합니다.

Seshu Vuggina

또 다른 차이점은 visibility:hidden 은 정말 오래된 브라우저에서 작동하고 display:none 은 그렇지 않다는 것입니다.

https://www.w3schools.com/cssref/pr_class_visibility.asp

https://www.w3schools.com/cssref/pr_class_display.asp

Dave Burton

차이점은 스타일을 넘어 JavaScript로 조작할 때 요소가 어떻게 작동하는지에 반영됩니다.

display: none 효과 및 부작용: 없음:

• 대상 요소는 문서 흐름에서 제외됩니다(다른 요소의 레이아웃에는 영향을 미치지 않음).
• 모든 하위 항목이 영향을 받습니다(표시되지 않으며 이 상속에서 "빠져나올 수 없음").
• 대상 요소나 그 자손에 대해 측정할 수 없습니다. 전혀 렌더링되지 않으므로 해당 clientWidth , clientHeight , offsetWidth , offsetHeight , scrollWidth , scrollHeight , getBoundingClientRect() , getComputedStyle() , 모두 0 반환합니다.

visibility: hidden 효과와 부작용: 숨김:

• 대상 요소는 보기에서 숨겨져 있지만 흐름에서 벗어나지 않고 레이아웃에 영향을 미치며 일반 공간을 차지합니다.
• innerText ( innerHTML 제외)는 빈 문자열을 반환합니다.

Adam Jagosz

여기에는 자세한 답변이 많이 있지만 함의가 있으므로 접근성을 해결하기 위해 이것을 추가해야 한다고 생각했습니다.

display: none; visibility: hidden; 일부 화면 판독기 소프트웨어에서는 읽을 수 없습니다. 시각 장애가 있는 사용자가 경험하게 될 사항을 염두에 두십시오.

이 질문은 동의어에 대해서도 묻습니다. text-indent: -9999px; 거의 동등한 다른 하나입니다. text-indent 의 중요한 차이점은 종종 화면 판독기에서 읽을 수 있다는 것입니다. 사용자가 여전히 링크를 탭할 수 있으므로 약간의 나쁜 경험이 될 수 있습니다.

접근성을 위해 오늘날 사용되는 것은 화면 판독기에 표시되는 동안 요소를 숨기는 스타일의 조합입니다.

 { clip: rect(1px, 1px, 1px, 1px); clip-path: inset(50%); height: 1px; width: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; }

콘텐츠 본문의 앵커에 대한 "콘텐츠로 건너뛰기" 링크를 만드는 것이 좋습니다. 시각 장애가 있는 사용자는 모든 단일 페이지에서 전체 탐색 트리를 듣고 싶어하지 않을 것입니다. 링크를 시각적으로 숨깁니다. 사용자는 탭을 눌러 링크에 액세스할 수 있습니다.

접근성 및 숨겨진 콘텐츠에 대한 자세한 내용은 다음을 참조하세요.

• https://webaim.org/techniques/css/invisiblecontent/
• https://webaim.org/techniques/skipnav/

cleaver

display:none; 요소를 표시하지도 않고 페이지의 요소에 공간을 할당하지도 않는 반면 visibility:hidden; 페이지에 요소를 표시하지 않지만 페이지에 공간을 할당합니다. 두 경우 모두 DOM의 요소에 액세스할 수 있습니다. 더 나은 방법으로 이해하려면 다음 코드를 살펴보세요. display:none vs Visibility:hidden

Pritam Bohra

출처 : http:www.stackoverflow.com/questions/133051/what-is-the-difference-between-visibilityhidden-and-displaynone