visible : hidden과 display : none의 차이점은 무엇입니까?
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
동의어가 아닙니다.
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.이 경우 다음을 얻습니다.
1st link.
2nd link.
3rd link.
1과 2의 차이는 이미 지적되었습니다 (즉, 2는 여전히 공간을 차지합니다). 그러나 2와 3 사이에는 차이가 있습니다. 3의 경우 마우스가 링크 위로 마우스를 가져갈 때 여전히 손으로 전환되며 사용자는 여전히 링크를 클릭 할 수 있으며 Javascript 이벤트는 링크에서 계속 실행됩니다. 이것은 일반적으로 원하는 동작이 아닙니다 . 텍스트를 선택할 때의 동작은 브라우저마다 다를 수 있습니다.
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텍스트가 있고 그렇게 하면 해당 텍스트가 이미지가 있던 공간을 채우기 위해 위로 이동합니다. visible : hidden을 수행하면 텍스트가 동일한 위치에 유지됩니다.
display:none요소를 숨기고 공간을 차지하는 공간을 축소하는 반면 visibility:hidden요소를 숨기고 요소 공간을 보존합니다. display : none은 또한 이전 버전의 IE 및 Safari에서 javascript에서 사용할 수있는 일부 속성에 영향을줍니다.
다른 모든 답변 외에도 IE8에는 중요한 차이점이 있습니다 display:none. 요소의 너비 또는 높이 를 사용 하고 가져 오려고하면 IE8은 0을 반환하지만 다른 브라우저에서는 실제 크기를 반환합니다. IE8은에 대해서만 올바른 너비 또는 높이를 반환합니다 visibility:hidden.
display: none;
페이지에서 사용할 수 없으며 공간을 차지하지 않습니다.
visibility: hidden;
요소를 숨기지 만 여전히 이전과 동일한 공간을 차지합니다. 요소는 숨겨 지지만 여전히 레이아웃에 영향을줍니다.
visibility: hidden공간을 보존하는 반면 공간을 보존 display: none하지 않습니다.
Display None Example:https://www.w3schools.com/css/tryit.asp?filename=trycss_display_none
Visibility Hidden Example : https://www.w3schools.com/cssref/tryit.asp?filename=trycss_visibility
visibility:hidden preserves the space; display:none doesn't.
If visibility property set to "hidden", the browser will still take space on the page for the content even though it's invisible.
But when we set an object to "display:none", the browser does not allocate space on the page for its content.
Example:
<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 will keep the element in the page and occupies that space but does not show to the user.
display:none will not be available in the page and does not occupy any space.
One other difference is that visibility:hidden works in really, really old browsers, and display:none does not:
https://www.w3schools.com/cssref/pr_class_visibility.asp
https://www.w3schools.com/cssref/pr_class_display.asp
display:none; will neither display the element nor will it allot space for the element on the page whereas visibility:hidden; will not display the element on the page but will allot space on the page. We can access the element in DOM in both cases. To understand it in a better way please look at the following code: display:none vs visibility:hidden
The difference goes beyond style and is reflected in how the elements behave when manipulated with JavaScript.
Effects and side effects of display: none:
- the target element is taken out of the document flow (doesn't affect layout of other elements);
- all descendants are affected (are not displayed either and cannot “snap out” of this inheritance);
- measurements cannot be made for the target element nor for its descendants – they are not rendered at all, thus their
clientWidth,clientHeight,offsetWidth,offsetHeight,scrollWidth,scrollHeight,getBoundingClientRect(),getComputedStyle(), all return0s.
Effects and side-effects of visibility: hidden:
- the target element is hidden from view, but is not taken out of the flow and affects layout, occupying its normal space;
innerText(but notinnerHTML) of the target element and descendants returns empty string.
'development' 카테고리의 다른 글
| Twitter Bootstrap 3을 사용하여 열 중앙에 배치 (0) | 2020.09.27 |
|---|---|
| MySQL 쿼리 결과를 CSV 형식으로 출력하는 방법은 무엇입니까? (0) | 2020.09.27 |
| Docker 컨테이너 내부에서 머신의 로컬 호스트에 어떻게 연결합니까? (0) | 2020.09.27 |
| 활동이 원래 추가 된 창을 유출했습니다. (0) | 2020.09.27 |
| T를 열거 형으로 제한하는 일반 메서드 만들기 (0) | 2020.09.27 |