CSS3에서 요소를 숨기는 방법(두 가지 방법)

CSS3의 숨겨진 기술을 사용하면 페이지 레이아웃과 콘텐츠 표시를 효과적으로 제어할 수 있습니다.

웹 페이지 제작에서 CSS3는 개발자가 웹 페이지의 레이아웃과 콘텐츠 표시를 보다 유연하게 제어할 수 있도록 많은 뛰어난 기술을 제공합니다. 그 중 CSS3 숨기기 기술은 웹 페이지에 표시할 필요가 없는 일부 콘텐츠를 숨겨 페이지를 더욱 간결하고 명확하게 만들고 더 나은 사용자 경험을 제공하는 매우 중요한 기술입니다.

1. 개요

웹 페이지에서 요소를 숨기는 것은 일반적으로 페이지가 다양한 상황에 따라 콘텐츠를 동적으로 표시해야 하거나 특별한 스타일 효과를 구현해야 하기 때문입니다. 물론, 웹 페이지에서 요소를 숨기려는 경우 전통적인 접근 방식은 해당 요소의 표시 속성을 없음으로 설정하는 것입니다. 그러나 이 방법을 사용하면 요소를 숨기는 효과를 얻을 수 있지만 숨겨진 요소는 페이지에서 완전히 제거되며 나중에 표시해야 하는 경우 레이아웃을 다시 작성해야 합니다. 불필요한 문제를 일으킵니다.

CSS3은 페이지에서 요소를 제거하지 않고도 요소를 숨길 수 있는 가시성과 불투명도라는 두 가지 속성을 제공합니다. 두 속성 모두 요소의 투명도를 제어하지만 효과는 약간 다릅니다. visible 속성은 요소를 숨기고 레이아웃 공간을 유지할 수 있는 반면, opacity 속성은 요소가 보이지 않더라도 레이아웃 공간을 유지하면서 요소의 투명도를 제어할 수 있습니다.

2. 사용 방법

① 숨기기 속성을 사용합니다.

요소의 가시성 속성을 숨김 또는 축소로 설정할 수 있습니다. 그중 숨김은 요소를 숨기고 페이지에서 레이아웃 공간을 유지하는 것을 의미합니다. 축소는 테이블 요소에만 적용 가능하며 열이나 행을 숨기고 페이지에서 레이아웃 공간을 제거함을 나타냅니다.

예를 들어 다음은 요소를 숨긴 다음 표시하는 샘플 코드입니다.

<style type="text/css">
    .hidden {
        visibility: hidden;
    }
</style>

<div class="hidden">这是需要隐藏的内容</div>
<button onclick="document.querySelector(&#39;.hidden&#39;).style.visibility = &#39;visible&#39;">显示</button>

이 샘플 코드에서는 먼저 대상 요소의 가시성 속성을 숨김으로 설정하지만 해당 레이아웃 공간은 여전히 ​​페이지에 유지됩니다. . 그런 다음 JavaScript를 통해 가시성 속성을 visible로 설정하여 페이지에 요소를 다시 표시할 수 있습니다.

② 불투명도 속성을 사용하여 숨기기

불투명도 속성을 사용하여 요소를 숨기려면 요소의 투명도를 0으로 설정해야 합니다. 이렇게 하면 요소가 표시되지 않더라도 해당 레이아웃 공간이 페이지에 유지됩니다. 마찬가지로 JavaScript를 통해 요소의 투명도를 1로 설정하여 페이지에 다시 표시할 수 있습니다.

예를 들어 다음은 요소를 숨긴 다음 표시하는 샘플 코드입니다.

<style type="text/css">
    .hidden {
        opacity: 0;
    }
</style>

<div class="hidden">这是需要隐藏的内容</div>
<button onclick="document.querySelector(&#39;.hidden&#39;).style.opacity = 1">显示</button>

이 샘플 코드에서는 먼저 대상 요소의 opacity 속성을 0으로 설정하여 페이지에 숨겨지고 유지되도록 합니다. 레이아웃 공간이 켜져 있습니다. 그런 다음 JavaScript를 통해 불투명도 속성을 1로 설정하여 요소를 다시 표시할 수 있습니다.

3. 요약

웹페이지 제작에서 요소를 숨기는 것은 매우 일반적인 작업입니다. 요소를 숨기는 전통적인 방법은 일반적으로 페이지에 불필요한 레이아웃, 스타일 및 기타 문제를 발생시킵니다. CSS3 숨기기 기술은 요소를 숨기고 레이아웃 공간을 유지할 수 있는 가시성과 불투명도라는 두 가지 속성을 제공하여 보다 효율적이고 간단한 페이지 레이아웃과 콘텐츠 표시 효과를 달성합니다.

위 내용은 CSS3에서 요소를 숨기는 방법(두 가지 방법)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!