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

CSS 규칙 visibility:hidden과 display:none둘 다 요소가 표시되지 않습니다. 이 동의어입니까?

display:none이는 해당 태그가 페이지에 전혀 표시되지 않음을 의미합니다 (DOM을 통해 태그와 상호 작용할 수는 있음). 다른 태그 사이에 할당 된 공간이 없습니다.

visibility:hiddendisplay: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.

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

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에서 사용할 수있는 일부 속성에도 영향을 미칩니다.

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

visibility:hidden공간을 보존합니다. display:none하지 않습니다.

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

공개 설정 속성을으로 설정 "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>

세부 정보보기

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

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

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

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

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

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

의 효과 및 부작용 display: none:

• 대상 요소는 문서 흐름에서 제외됩니다 (다른 요소의 레이아웃에는 영향을 미치지 않음).
• 모든 자손이 영향을 받는다 (이 상속으로부터“탈출”되지 않음).
• 측정 대상 요소이나 그 후손을 할 수 없습니다 - 그들은 따라서, 전혀 렌더링되지 않습니다 자신의 clientWidth, clientHeight, offsetWidth, offsetHeight, scrollWidth, scrollHeight, getBoundingClientRect(), getComputedStyle(), 모든 수익 0의.

의 효과 및 부작용 visibility: hidden:

• 대상 요소는보기에서 숨겨 지지만 흐름에서 제외되지 않고 레이아웃에 영향을 미치며 일반적인 공간을 차지합니다.
• innerTextinnerHTML대상 요소와 자손의 (그러나 아님 )는 빈 문자열을 반환합니다.

display:none;요소를 표시하거나 페이지에 요소를위한 공간을 할당 visibility:hidden;하지 않지만 페이지 에는 요소를 표시하지 않지만 페이지를위한 공간을 할당합니다. 두 경우 모두 DOM의 요소에 액세스 할 수 있습니다. 더 나은 방법으로 이해하려면 다음 코드를 확인하십시오. display : none vs visible : hidden

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

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/