CSS로 페이지 요소를 숨기는 5가지 방법-CSS 튜토리얼-php.cn

CSS를 사용하여 페이지 요소를 숨기는 방법에는 여러 가지가 있습니다. 불투명도를 0으로, 가시성을 숨김으로, 표시를 없음으로, 위치를 절대로 설정한 다음 위치를 보이지 않는 영역으로 설정할 수 있습니다.

요소를 숨기는 기술이 왜 그토록 많은데 모두 같은 효과를 내는지 궁금해하신 적이 있나요? 각 방법은 실제로 다른 방법과 약간의 미묘한 차이가 있으며 이러한 차이점은 특정 상황에서 어떤 방법이 사용되는지를 결정합니다. 이 튜토리얼에서는 위의 방법 중 상황에 따라 요소를 숨기는 방법을 선택할 수 있도록 염두에 두어야 할 작은 차이점을 다룹니다.

불투명도

opacity 속성은 요소의 투명도를 설정하는 것을 의미합니다. 요소의 경계 상자를 변경하도록 설계되지 않았습니다. 즉, 불투명도를 0으로 설정하면 요소가 시각적으로만 숨겨집니다. 요소 자체는 여전히 자체 위치를 차지하고 웹 페이지 레이아웃에 기여합니다. 또한 사용자 상호 작용에도 응답합니다.

아아아아

불투명도 속성을 사용하여 화면 읽기 소프트웨어의 요소를 숨기려는 경우 안타깝게도 그렇게 할 수 없습니다. 요소와 해당 콘텐츠는 웹페이지의 다른 요소와 마찬가지로 스크린 리더로 읽혀집니다. 즉, 요소는 불투명한 것처럼 동작합니다.

또한 불투명도 속성을 사용하여 멋진 애니메이션을 만들 수 있다는 점을 상기시켜 드리고 싶습니다. opacity 속성 값이 1보다 작은 모든 요소도 새로운 스택 컨텍스트를 생성합니다.

다음 예를 살펴보세요.

@SitePoint에서 제공한 예를 살펴보세요. "불투명도가 있는 요소 숨기기"

codepen.io/SitePoint/pen/bedZrR/

숨겨진 두 번째 블록 위로 마우스를 이동하면 요소 상태가 완전 투명에서 완전 불투명으로 부드럽게 전환됩니다. 또한 블록에는 커서 속성이 포인터로 설정되어 있으며 이는 사용자가 블록과 상호 작용할 수 있음을 나타냅니다.

가시성

두 번째로 이야기할 속성은 가시성입니다. 값을 숨김으로 설정하면 요소가 숨겨집니다. 불투명도 속성과 마찬가지로 숨겨진 요소도 웹 페이지 레이아웃에 영향을 미칩니다. 불투명도와의 유일한 차이점은 사용자 상호 작용에 반응하지 않는다는 것입니다. 또한 화면 읽기 소프트웨어에서는 요소가 숨겨집니다.

이 속성은 초기 상태와 종료 상태가 다른 한 애니메이션 효과를 얻을 수도 있습니다. 이를 통해 가시성 상태 전환 사이의 전환 애니메이션이 시간에 맞춰 원활하게 진행될 수 있습니다(실제로 이는 요소의 지연된 표시 및 숨기기를 구현하기 위해 숨김을 사용하는 데 사용될 수 있습니다 - 번역가의 메모).

아아아아

다음 예에서는 가시성과 불투명도의 차이를 보여줍니다.

@SitePoint에서 제공한 예를 참조하세요. "가시성이 있는 요소 숨기기"

codepen.io/SitePoint/pen/pbJYpV/

요소의 가시성이 숨김으로 설정되어 있고 해당 하위 요소 중 하나를 표시하려는 경우 해당 요소의 가시성을 명시적으로 표시로 설정하기만 하면 됩니다(예: 예제의 .o-hide p - 번역 작성자의 메모). p 태그의 숫자가 아닌 숨겨진 요소에만 마우스를 올려 놓으면 마우스 커서가 손가락으로 바뀌지 않는 것을 볼 수 있습니다. 이때 마우스를 클릭해도 클릭 이벤트가 발생하지 않습니다.

태그 내의

태그는 여전히 모든 마우스 이벤트를 캡처할 수 있습니다. 마우스를 텍스트 위로 이동하면

자체가 표시되고 이벤트 등록이 적용됩니다.

디스플레이

표시 속성은 단어의 의미에 따라 요소를 실제로 숨깁니다. 표시 속성을 없음으로 설정하면 요소가 표시되지 않고 상자 모델도 생성되지 않습니다. 이 속성을 사용하면 숨겨진 요소가 공간을 차지하지 않습니다. 뿐만 아니라 표시가 없음으로 설정되면 요소에 대한 직접적인 사용자 상호 작용이 효과적이지 않습니다. 또한 화면 읽기 소프트웨어는 요소의 내용을 읽지 않습니다. 이렇게 하면 해당 요소가 전혀 존재하지 않는 것처럼 효과가 나타납니다.

이 요소의 모든 하위 항목도 숨겨집니다. 이 속성에 전환 애니메이션을 추가해도 효과가 없습니다. 다른 상태 값 사이의 전환은 항상 즉시 적용됩니다.

그러나 이 요소는 여전히 DOM을 통해 액세스할 수 있습니다. 따라서 다른 요소와 마찬가지로 DOM을 통해 이를 조작할 수 있습니다.

아아아아

다음 예를 살펴보세요.

@SitePoint에서 제공한 예 "디스플레이를 사용하여 요소 숨기기"

codepen.io/SitePoint/pen/zBGbjb/

두 번째 블록 요소 안에

요소가 있고 자체 표시 속성이 block으로 설정되어 있지만 여전히 표시되지 않는 것을 볼 수 있습니다. 이는 가시성:숨김과 표시:없음의 또 다른 차이점입니다. 이전 예에서 하위 요소의 가시성을 명시적으로 표시로 설정하면 해당 요소가 표시될 수 있지만 표시 자체 표시 값이 무엇이든 관계없이 상위 요소의 표시가 없음이면 모두 표시됩니다. 보이지 않습니다.

　　现在，将鼠标移到第一个块元素上面几次，然后点击它。这个操作将让第二个块元素显现出来，它其中的数字将是一个大于 0 的数。这是因为，元素即使被这样设置成对用户隐藏，还是可以通过 JavaScript 来进行操作。

　Position

　　假设有一个元素你想要与它交互，但是你又不想让它影响你的网页布局，没有合适的属性可以处理这种情况（opacity 和 visibility 影响布局， display 不影响布局但又无法直接交互——译者注）。在这种情况下，你只能考虑将元素移出可视区域。这个办法既不会影响布局，有能让元素保持可以操作。下面是采用这种办法的 CSS：

.hide {
   position: absolute;
   top: -9999px;
   left: -9999px;
}

로그인 후 복사

　　下面的例子阐明了怎样通过绝对定位的方式隐藏元素，并让它和前面的那个例子效果一样：

　　看 @SitePoint 提供的例子“用 position 属性隐藏元素”

　　codepen.io/SitePoint/pen/QEboZm/

　　这种方法的主要原理是通过将元素的 top 和 left 设置成足够大的负数，使它在屏幕上不可见。采用这个技术的一个好处（或者潜在的缺点）是用它隐藏的元素的内容可以被读屏软件读取。这完全可以理解，是因为你只是将元素移到可视区域外面让用户无法看到它。

　　你得避免使用这个方法去隐藏任何可以获得焦点的元素，因为如果那么做，当用户让那个元素获得焦点时，会导致一个不可预料的焦点切换。这个方法在创建自定义复选框和单选按钮时经常被使用。（用 DOM 模拟复选框和单选按钮，但用这个方法隐藏真正的 checkbox 和 radio 元素来“接收”焦点切换——译者注）

　Clip-path

　　隐藏元素的另一种方法是通过剪裁它们来实现。在以前，这可以通过 clip 属性来实现，但是这个属性被废弃了，换成一个更好的属性叫做 clip-path。Nitish Kumar 最近在 SitePoint 发表了“介绍 clicp-path 属性”这篇文章，通过阅读它可以了解这个属性的更多高级用法。

　　记住，clip-path 属性还没有在 IE 或者 Edge 下被完全支持。如果要在你的 clip-path 中使用外部的 SVG 文件，浏览器支持度还要更低。使用 clip-path 属性来隐藏元素的代码看起来如下：

.hide {
  clip-path: polygon(0px 0px,0px 0px,0px 0px,0px 0px);
}

로그인 후 복사

　　下面是一个实际使用它的例子：

　　看 @SitePoint 提供的例子“用 clip-path 属性隐藏元素”

　　http://codepen.io/SitePoint/pen/YWXgdW/

　　如果你把鼠标悬停在第一个元素上，它依然可以影响第二个元素，尽管第二个元素已经通过 clip-path 隐藏了。如果你点击它，它会移除用来隐藏的 class，让我们的元素从那个位置显现出来。被隐藏元素中的文字仍然能够通过读屏软件读取，许多 WordPress 站点使用 clip-path 或者之前的 clip 来实现专门为读屏软件提供的文字。

　　虽然我们的元素自身不再显示，它也依然占据本该占据的矩形大小，它周围的元素的行为就如同它可见时一样。记住用户交互例如鼠标悬停或者点击在剪裁区域之外也不可能生效。在我们的例子里，剪裁区大小为零，这意味着用户将不能与隐藏的元素直接交互。此外，这个属性能够使用各种过渡动画来实现不同的效果。