CSS의 가시성 속성은 무엇입니까? 디스플레이와 어떻게 다릅니 까?

CSS의 가시성 속성은 무엇입니까? 디스플레이와 어떻게 다릅니 까?

CSS의 visibility 속성은 웹 페이지에서 요소가 보이는지 여부를 제어하는 ​​데 사용됩니다. 그것은 visible , hidden , collapse 및 inherit 포함하여 몇 가지 가능한 값을 가지고 있습니다. 요소의 visibility hidden 것으로 설정되면 요소는 사용자에게 보이지 않지만 여전히 페이지 레이아웃의 공간을 차지합니다. 이것은 다른 요소가 숨겨진 요소가있는 공간을 채우기 위해 움직이지 않음을 의미합니다.

대조적으로, display: none 레이아웃에서 요소를 완전히 제거하지 않습니다. 요소가 display: none 완전히 숨겨져 있으며 레이아웃의 공간을 차지하지 않습니다. 페이지의 다른 요소는 제거 된 요소가 이전에 점유 한 공간을 채우도록 이동합니다. visibility: hidden 및 display: none .

'숨겨진'에 대한 가시성을 요소의 레이아웃에 설정하는 데 어떤 영향을 미칩니 까?

hidden 에 요소의 visibility 설정하면 사용자에게는 보이지 않지만 여전히 페이지의 레이아웃에 영향을 미칩니다. 레이아웃에서 요소가 차지하는 공간은 유지됩니다. 이것은 다음을 의미합니다.

• 요소는 치수 (너비, 높이, 여백 등)를 유지하고 주변의 다른 요소의 위치에 계속 영향을 미칩니다.
• 숨겨진 요소가 블록 레벨 요소 인 경우 여전히 레이아웃에서 새 선이 생성됩니다.
• 숨겨진 요소의 모든 어린이 요소도 숨겨져 있지만 레이아웃에서도 각자의 공간을 차지할 것입니다.

예를 들어, 텍스트 단락과 이미지가 나란히 있고 이미지의 가시성을 hidden 로 설정하면 단락이 왼쪽으로 이동하여 이미지가 차지하는 공간을 차지하지 않습니다. 이미지가없는 경우를 제외하고 레이아웃은 시각적으로 변경되지 않습니다.

CSS 애니메이션을 사용하여 요소의 가시성을 어떻게 전환 할 수 있습니까?

CSS 애니메이션을 사용하여 요소의 가시성을 전환하려면 animation 속성을 사용하여 키 프레임을 사용하여 visibility: hidden 및 visibility: visible 전환 할 수 있습니다. 단계별 접근 방식은 다음과 같습니다.

1. 키 프레임 정의 :
   요소의 가시성이 시간이 지남에 따라 어떻게 변하는 지 정의하는 키 프레임을 만들어야합니다. 부드러운 전환을 위해 opacity 와 같은 다른 속성을 애니메이션 할 수도 있습니다.

    <code class="css">@keyframes fadeInOut { 0%, 100% { visibility: hidden; opacity: 0; } 50% { visibility: visible; opacity: 1; } }</code>

2. 애니메이션 적용 :
   전환하려는 요소에 애니메이션을 적용하십시오. 필요에 따라 지속 시간 및 기타 타이밍 기능을 제어 할 수 있습니다.

    <code class="css">.toggle-visibility { animation: fadeInOut 2s infinite; }</code>

이 예에서 fadeInOut 애니메이션은 2 초마다 요소가 소멸되어 가시성을 전환하게합니다. 특정 요구에 맞게 타이밍, 반복 카운트 및 기타 속성을 조정할 수 있습니다.

어떤 시나리오에서 '가시성 : 숨겨진'오버 디스플레이 : 없음 '을 사용 하시겠습니까?

visibility: hidden 및 display: none 레이아웃이 어떻게 행동 해야하는지에 대한 특정 요구 사항에 따라 다릅니다. visibility: hidden 몇 가지 시나리오는 다음과 같습니다 display: none

• 레이아웃 보존 : 요소를 숨겨야하지만 요소가 여전히 존재하는 것처럼 레이아웃을 유지하려면 visibility: hidden . 이것은 자리 표시자를 만들거나 특히 반응 형 디자인에서 페이지에서 일관된 구조를 유지하는 데 유용합니다.
• 진보적 인 향상 : 진보적 인 향상을 구현하는 경우 숨겨진 콘텐츠로 시작하여 JavaScript 또는 CSS 애니메이션으로 공개 될 수 있습니다. visibility: hidden 사용하면 컨텐츠가 처음에는 숨겨져 있지만 여전히 액세스 할 수 있고 레이아웃에 영향을 줄 수 있습니다.
• 접근성 문제 : 콘텐츠를 숨기려고하지만 여전히 화면 리더가 액세스 할 수있는 경우 (접근성 목적) visibility: hidden 유리할 수 있습니다. 콘텐츠는 시각적으로 숨겨져 있지만 여전히 문서 흐름의 일부이며 보조 기술에 의해 읽을 수 있습니다.
• 성능 고려 사항 : 가시성을 자주 토글하는 시나리오에서 visibility: hidden 브라우저가 가시성이 변경 될 때마다 레이아웃을 다시 계산할 필요가 없으므로 display: none .

요약하면, visibility: hidden 것이 바람직하지만 display: none 사용해야합니다.

위 내용은 CSS의 가시성 속성은 무엇입니까? 디스플레이와 어떻게 다릅니 까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!