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

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

display: none 및 visibility: hidden CSS 속성은 종종 웹 페이지에서 요소의 가시성을 제어하는 ​​데 사용되지만 레이아웃 및 렌더링 측면에서 다르게 행동합니다.

• 디스플레이 : 없음 : 요소가 display: none 레이아웃에서 완전히 제거됩니다. 이것은 요소가 페이지의 공간을 차지하지 않으며 전혀 렌더링되지 않음을 의미합니다. 이 요소의 모든 어린이도 렌더링되지 않으며 레이아웃에 영향을 미치지 않습니다. 요소에 의해 점유 된 공간은 닫히고 다른 요소는 간격을 채우기 위해 이동합니다.
• 가시성 : 숨겨진 : 요소가 visibility: hidden 경우 사용자에게는 보이지 않지만 여전히 페이지 레이아웃에 영향을 미칩니다. 요소가 일반적으로 차지하는 공간은 마치 요소가 여전히 존재했지만 보이지 않는 것처럼 남아 있습니다. 이 요소의 어린이는 visibility: visible 은 부모가 숨겨져 있음에도 불구하고 표시 할 수 있습니다.

요약하면, display: none 레이아웃에서 전적으로 요소를 제거하지만 visibility: hidden 요소를 숨기지 만 그 공간을 레이아웃에 유지합니다.

디스플레이 사용 방법 : 웹 페이지의 레이아웃에 영향을 미치지 않습니까?

display: none 다음과 같은 방식으로 웹 페이지의 레이아웃에 크게 영향을 미칩니다.

• 공간 제거 : 요소는 페이지의 공간을 차지하지 않습니다. 레이아웃은 요소가없는 것처럼 조정됩니다. 이는 다른 요소가 숨겨진 요소가 차지할 공간을 채우기 위해 위, 아래 또는 측면으로 이동할 수 있음을 의미합니다.
• 리플 로우 : 요소를 제거하면 페이지 레이아웃의 반사가 발생할 수 있습니다. 리플 로우는 브라우저가 페이지의 요소의 위치와 치수를 다시 계산하는 프로세스입니다. 특히 변경이 페이지의 많은 부분에 영향을 미치는 경우 집중적 인 작업이 될 수 있습니다.
• 부모 및 형제 요소 : display: none 나머지 콘텐츠에 따라 수축 또는 확장 할 수 있습니다. 형제 요소는 숨겨진 요소가없는 것에 따라 위치를 조정합니다.
• 자식 요소 : display: none 렌더링되지 않으며 어떤 식 으로든 레이아웃에 영향을 미치지 않습니다.

display: none .

가시성 사용의 성능은 무엇입니까 : 숨겨진 대 디스플레이 : 없음?

visibility: hidden 대 display: none .

• 렌더링 성능 : visibility: hidden 것은 일반적으로 더 빠릅니다. 이것은 계산적으로 비싸 질 수있는 레이아웃의 반사를 유발하는 것을 피합니다. 반면, display: none 렌더링 트리에서 요소를 제거하지 않으며, 이는 페이지 레이아웃이 반사되어 특히 숨겨진 요소가 크거나 레이아웃이 복잡한 경우 성능에 영향을 줄 수 있습니다.
• 메모리 사용 : visibility: hidden 여전히 ​​DOM에 존재하며 렌더링 트리의 일부이므로 메모리를 소비합니다. 대조적으로, display: none 렌더링 리소스를 가져 가지 않지만 여전히 DOM에 있으므로 visibility: hidden 에 비해 일부 메모리를 절약 할 수 있습니다.
• JavaScript 및 이벤트 처리 : visibility: hidden 여전히 ​​이벤트를 수신하고 JavaScript에 의해 조작 될 수 있지만 display: none 있는 요소는 없습니다. 이는 많은 숨겨진 요소가 여전히 상호 작용하거나 조작되는 응용 분야의 성능에 영향을 줄 수 있습니다.
• 접근성 : visibility: hidden 여전히 ​​스크린 리더에게 액세스 할 수 있으며 (명시 적으로 설정하지 않은 경우) 음성 탐색 및 기타 보조 기술의 경우 성능에 영향을 줄 수 있습니다.

전반적으로 visibility: hidden 것은 레이아웃 재 계산 측면에서 성능에 대한 세금이 적은 경향이 있지만 display: none .

가시성 : Hidden은 여전히 ​​스크린 리더가 요소에 액세스 할 수 있도록 허용합니까?

예, visibility: hidden 일반적으로 요소가 문서의 탭 순서의 일부이거나 접근성 트리에서 명시 적으로 제외되지 않은 경우 일반적으로 스크린 리더가 액세스 할 수 있도록 허용합니다. 요소는 여전히 DOM에 존재하며 시각적으로 숨겨져 있지만 렌더링 트리의 일부이기 때문입니다.

그러나 명심해야 할 몇 가지 고려 사항이 있습니다.

• 탭 순서 : visibility: hidden 집중할 수있는 경우 (예 : 양식 요소), 화면 리더는 탭 순서의 일부인 경우에도 여전히 액세스 할 수 있습니다.
• ARIA 속성 : ARIA (액세스 가능한 리치 인터넷 응용 프로그램) 속성을 사용하여 요소가 보조 기술에 노출되어 있는지 여부를 제어 할 수 있습니다. 예를 들어, aria-hidden="true" visibility: hidden 과 함께 사용될 수 있습니다.
• CSS 및 JavaScript : visibility: hidden 과 요소가 여전히 DOM의 일부이며 JavaScript에 의해 탭 순서에서 제거되거나 aria-hidden 설정하지 않으면 스크린 리더에게 액세스 할 수 있습니다.

스크린 리더와 함께 웹 응용 프로그램을 테스트하여 숨겨진 요소가 접근성 측면에서 의도 한대로 작동하는지 확인하는 것이 중요합니다.

위 내용은 디스플레이의 차이점은 무엇입니까 : 없음과 가시성 : 숨겨져 있습니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!