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

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

CSS »visibility:hidden그리고.display:none둘 다 요소가 보이지 않게 됩니다.이것들은 동의어입니까?

display:none문제의 태그가 페이지에 전혀 나타나지 않음을 의미합니다(단, 돔을 통해 태그와 상호 작용할 수 있음).다른 태그 사이에 할당된 공간이 없습니다.

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

그들은 동의어가 아닙니다.

display:none페이지의 일반 흐름에서 요소를 제거하여 다른 요소를 채울 수 있습니다.

visibility:hidden요소를 페이지의 일반적인 흐름에 그대로 두고 공간을 차지합니다.

놀이공원에서 놀이기구를 타기 위해 줄을 서 있는 사람이 너무 소란스러워 보안요원이 줄에서 그들을 끌어내린다고 상상해 보세요.그러면 줄을 선 모든 사람이 한 자리 앞으로 이동하여 빈 슬롯을 채웁니다.은 약간거와 .display:none.

이것을 비슷한 상황과 대조해 보십시오. 하지만 여러분 앞에 있는 누군가가 투명 망토를 착용하고 있습니다.선을 보는 동안, 그것은 빈 공간이 있는 것처럼 보일 것이지만, 누군가가 여전히 그곳에 있기 때문에 사람들은 실제로 그 빈 공간을 채울 수 없습니다.은 약간거와 .visibility:hidden.

한 가지 덧붙일 가치가 있는 것은, 비록 그것이 요청되지는 않았지만, 물체를 완전히 투명하게 만드는 세 번째 옵션이 있다는 것입니다.고려 사항:

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.

(결과를 보려면 위의 "Run code snipet(코드 스니펫 실행)" 버튼을 클릭하십시오.)

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

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

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

3의 경우 텍스트가 복사됩니다.이것은 워터마킹의 일종에 유용할 수도 있고, 사용자가 부주의하게 콘텐츠를 복사/붙여넣었을 때 나타나는 저작권 고지를 숨기려고 할 경우 유용할 수도 있습니다.

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

visibility:hidden숨긴 채 공간을 비웁니다.

하위 노드와 관련하여 큰 차이가 있습니다.예:상위 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는 표시되지 않습니다.

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

visibility: hidden보기에서 요소를 숨기지만 페이지 흐름은 숨기지 않으며, 페이지에 요소를 위한 공간을 남깁니다.

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

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

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

와 함께visibility:hidden개체가 페이지에서 여전히 수직 높이를 차지합니다.와 함께display:none완전히 제거되었습니다.이미지 아래에 텍스트가 있고 텍스트가 있는 경우display:none해당 텍스트는 이미지가 있던 공간을 채우기 위해 위로 이동합니다.가시성: 숨김을 수행하면 텍스트가 동일한 위치에 유지됩니다.

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

visibility:hidden합니다.display:none안 합니다.

이 IE8을 한다면. 사용하는 경우display:none요소의 너비 또는 높이를 가져오려고 하면 IE8은 0을 반환합니다(다른 브라우저는 실제 크기를 반환합니다).은 IE8에 합니다.visibility:hidden.

display: none; 

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

visibility: hidden; 

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

visibility: hidden을 보존하는 공을보존반면는하간,,면▁preserve▁space공▁the반.display: none공간을 보존하지 않습니다.

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

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

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

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

표시: 없음

페이지의 일반적인 흐름에서 요소를 제거하여 다른 요소를 채울 수 있습니다.

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

가시성: 숨김

요소는 여전히 공간을 차지하는 페이지의 일반적인 흐름에 남겨집니다.

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

요소를 숨기는 다른 방법

z-index 사용

#element {
   z-index: -11111;
}

페이지 밖으로 요소 이동

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

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

visibility: hidden그리고.display: none둘 다 레이아웃, 페인트 및 합성을 다시 트리거하므로 동일한 성능을 발휘합니다. 하만지,opacity: 0는 기성은 ▁to▁equival와 동등한 기능입니다.visibility: hidden레이아웃 단계를 다시 트리거하지 않습니다.

그리고 CSS-전환 특성 또한 우리가 주의해야 할 중요한 것입니다.왜냐하면 다음에서 전환하기 때문입니다.visibility: hiddenvisibility: visible CSS-transitions를 할 수 있도록 합니다.display: nonedisplay: block하지 않다. visibility: hidden이벤트를 인 이점이 JavaScript 이벤트는 캡처하지 않습니다.opacity: 0를 캡처합니다.

를 가성속다설정경으로 "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>

세부 정보 보기

여기에 상세한 답변들이 많은데, 시사하는 바가 있기 때문에 접근성 문제를 해결하기 위해 이것을 추가해야겠다고 생각했습니다.

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/

다른 모든 답변 요약:

가시거리	과시하는
가시성이 있는 요소: 숨김, 모든 실용적인 목적(키보드 포인터, 키보드 포커스, 화면 판독기)을 위해 숨겨져 있지만 렌더링된 마크업에서 여전히 공간을 차지합니다.	display: 없음, 모든 실용적인 목적(마우스 포인터, 키보드 포커스, 화면 판독기)을 위해 숨겨져 있으며 렌더링된 마크업에서 공간을 차지하지 않습니다.
CSS 전환은 가시성 변경에 적용할 수 있습니다.	CSS 전환을 디스플레이 변경에 적용할 수 없습니다.
상위 가시성을 설정할 수 있습니다. 숨겼지만 가시성이 있는 하위: 가시성은 계속 표시됩니다.	상위 항목이 표시되는 경우: 하위 항목은 재정의할 수 없으며 자신을 표시할 수 없습니다.
DOM 트리의 일부(DOM 쿼리로 대상을 지정할 수 있음)	DOM 트리의 일부(DOM 쿼리로 대상을 지정할 수 있음)
렌더 트리의 일부	렌더 트리의 일부가 아님
부모 요소 또는 자식 요소의 모든 리플로우/레이아웃은 렌더 트리의 일부이기 때문에 이러한 요소에서도 리플로우를 트리거할 수 있습니다.	상위 요소의 리플로우/레이아웃은 렌더 트리의 일부가 아니므로 이러한 요소에 영향을 미치지 않습니다.
가시성(숨김과 표시) 간에 전환하면 리플로우/레이아웃이 트리거되지 않을 수 있습니다.(이 의견에 따르면 다음과 같은 작업이 수행됩니다.가시성: 숨김과 디스플레이: 표시 간의 차이는 무엇입니까? 그리고 이에 따라 https://developers.google.com/speed/docs/insights/browser-reflow) 도 달라질 수 있습니다.	표시 간 전환:표시할 수 없음:(다른 항목), 이 요소가 이제 렌더 트리의 일부가 되므로 레이아웃/리플로우가 발생합니다.
DOM 방법을 통해 요소를 측정할 수 있습니다.	DOM 방법을 사용하여 요소 또는 해당 하위 요소를 측정할 수 없습니다.
가시성을 사용하는 요소가 페이지에 없는 경우, 표시되지 않더라도 레이아웃이 필요하기 때문에 렌더링 중에 브라우저가 중단될 수 있습니다.	display:none을 사용하는 요소가 많을 경우 렌더링 트리의 일부가 아니므로 렌더링에 영향을 주지 않습니다.

리소스:

• https://developers.google.com/speed/docs/insights/browser-reflow
• http://www.stubbornella.org/content/2009/03/27/reflows-repaints-css-performance-making-your-javascript-slow/
• 가시성 간 성능 차이:숨김 및 표시:없음

기타 정보:

• 일부 브라우저 지원 특성도 있지만 매우 오래된 브라우저에 적용되는 것으로 보이며 다른 답변에서 사용할 수 있기 때문에 여기서 설명하지 않았습니다.
• 불투명도 또는 절대 위치 지정과 같은 요소를 화면 밖으로 숨길 수 있는 다른 방법이 있습니다.이 모든 것들은 일부 또는 다른 답변에서 언급되었고 몇 가지 단점이 있습니다.
• 이 설명(가시성: 숨김과 디스플레이: 없음 사이의 성능 차이)에 따르면, 디스플레이: 없음을 사용하는 요소가 많고 디스플레이: (다른 것)으로 변경하면 단일 리플로우가 발생하는 반면, 여러 가시성: 숨겨진 요소를 표시하고 각 요소를 표시하면 리플로우가 발생합니다.(저는 이것을 잘 이해하지 못합니다)

또 다른 차이점은visibility:hidden하고, 정말정오브래에작동서하고저라우된말,▁works고▁in▁really작,,display:none하지 않음:

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

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

이 차이는 스타일을 넘어 자바스크립트로 조작할 때 요소가 어떻게 동작하는지에 반영됩니다.

의 display: none:

• 대상 요소가 문서 흐름에서 제외됩니다(다른 요소의 배치에 영향을 미치지 않음).
• 모든 하위 항목이 영향을 받습니다(또한 표시되지 않으며 이 상속에서 "스냅아웃"할 수 없음).
• 의 하위 에 대해 수 없습니다. 즉,는 전혀 요소의 대상 요 또 소 그 측 수 행 할 없 수 습 니 을 다 정 해 대 에 소 요 하 위 는 없 니 습 ▁measure 다 수 ments ▁nor ▁cannot 대 ▁they 할 수 행 ▁at상▁their▁– ▁element ▁are 측정은 전혀 렌더링되지 않기 때문에 다음과 같습니다.clientWidth,clientHeight,offsetWidth,offsetHeight,scrollWidth,scrollHeight,getBoundingClientRect(),getComputedStyle() 리턴 올턴리0s의

의 visibility: hidden:

• 대상 요소는 시야에서 가려지지만 흐름에서 제거되지 않고 배치에 영향을 미쳐 정상적인 공간을 차지합니다.
• innerText(그러나 아닙니다.innerHTML대상 요소의 ) 및 하위 항목이 빈 문자열을 반환합니다.

이 스택의 다른 부분에서 설명한 바와 같이, 이 둘은 동의어가 아닙니다. visibility:hidden 되는데 반해, 지에남깁니다공을간페이남▁on▁will다▁leave▁whereas깁. 반면에display:none요소를 완전히 숨깁니다.저는 이것이 주어진 요소의 아이들에게 어떤 영향을 미치는지에 대해 말하는 것이 중요하다고 생각합니다. 당신이 경할우용을 한다면.visibility:hidden그런 다음 그 요소의 아이들에게 올바른 스타일링을 보여줄 수 있습니다.하지만 함께display:none당신은 사용 여부와 상관없이 아이들을 숨깁니다.display: block | flex | inline | grid | inline-block그렇지 않으면.

display:none;도 않습니다. 반면에 ""는 요소를 표시하지도 .visibility:hidden;페이지에 요소를 표시하지 않고 페이지에 공간을 할당합니다.두 경우 모두 DOM의 요소에 액세스할 수 있습니다.이를 더 잘 이해하려면 다음 코드를 참조하십시오. 디스플레이:없음 대 가시성:숨김

언급URL : https://stackoverflow.com/questions/133051/what-is-the-difference-between-visibilityhidden-and-displaynone