CSS 숨기기 표시 div

CSS DIV 숨기기 및 표시

웹 개발에서 요소를 숨기고 표시하는 것은 특히 동적 효과를 만들 때 자주 사용되는 작업입니다. CSS를 사용하면 요소를 쉽게 숨기고 표시할 수 있으며, 웹사이트 로드 속도를 높이고 사용자 경험을 향상시킬 수도 있습니다.

1. display 속성

display 속성은 요소가 표시되는 방식을 제어할 수 있습니다. 값은 다음과 같습니다.

• none: 요소가 표시되지 않고 0 공간을 차지함을 나타냅니다.
• block: 요소가 한 줄을 차지하는 블록 수준 요소로 표시됨을 나타냅니다.
• inline: 요소가 줄바꿈 없이 인라인 요소로 표시되고 순서대로 정렬됨을 나타냅니다.
• inline-block: 요소가 줄 바꿈 없이 인라인 블록 수준 요소로 표시되지만 너비, 높이, 패딩 등과 같은 속성을 설정할 수 있음을 나타냅니다.
• table: 요소가 테이블로 표시됨을 나타냅니다.
• table-cell: 요소가 테이블 셀로 표시됨을 나타냅니다.
• flex: 요소가 유연한 레이아웃을 채택함을 나타냅니다.
• grid: 요소가 그리드 레이아웃을 채택함을 나타냅니다.

예를 들어 display:none을 사용하여 요소를 숨길 수 있습니다.

<div style="display:none;">这是一个被隐藏的元素</div>

display:block을 사용하여 요소를 블록 수준 요소로 표시합니다.

<div style="display:block;">这是一个显示为块级元素的元素</div>

2. visibility 속성

visibility 속성은 가시성을 제어할 수 있습니다. 요소의 . 값은 다음과 같습니다.

• visible: 요소가 표시됨을 나타냅니다.
• hidden: 요소가 보이지 않지만 여전히 공간을 차지함을 나타냅니다.

예를 들어, visible:hidden을 사용하여 요소를 숨길 수 있습니다.

<div style="visibility:hidden;">这是一个被隐藏的元素</div>

visible:visible을 사용하여 요소를 표시합니다.

3. opacity 속성

opacity 속성은 요소의 투명도를 제어할 수 있습니다. 값 범위는 0~1이며, 0은 완전히 투명함을, 1은 불투명함을 의미합니다.

예를 들어 요소를 반투명하게 설정할 수 있습니다.

<div style="opacity:0.5;">这是一个半透明的元素</div>

4. CSS3 Animation

위의 세 가지 방법 외에도 CSS3 애니메이션을 사용하여 요소를 숨기고 표시할 수도 있습니다. CSS3 애니메이션은 더욱 풍부한 효과를 생성하고 웹사이트의 상호작용성을 향상시킬 수 있습니다.

예를 들어 @keyframes를 사용하여 숨김 표시 애니메이션을 정의할 수 있습니다.

@keyframes showDiv {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

<div class="show" style="opacity:0;">这是一个被隐藏的元素</div>

<style>
.show {
    animation: showDiv 1s forwards;
}
</style>

위 코드에서는 먼저 투명도 0에서 투명도 1까지 애니메이션 효과를 정의하는 @keyframes 규칙을 정의합니다. 그런 다음 요소에서 class="show" 및 초기 투명도를 0으로 설정합니다. 마지막으로 애니메이션 속성이 스타일 시트의 .show 클래스에 추가되어 애니메이션이 끝난 후의 이름, 기간 및 스타일 시트 상태를 지정합니다.

이 클래스의 추가 및 제거를 제어하여 요소의 표시 상태를 전환할 수 있습니다.

var div = document.getElementsByClassName("show")[0];
div.classList.add("show");

var div = document.getElementsByClassName("show")[0];
div.classList.remove("show");

요약

위 콘텐츠에서는 CSS를 사용하여 표시 속성, 가시성 속성, 불투명도 속성과 CSS3 애니메이션. 이러한 방법을 익히면 더욱 우아하고 정교한 웹 페이지 효과를 얻을 수 있습니다.

위 내용은 CSS 숨기기 표시 div의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!