CSS에서 div 표시 및 숨기기 간을 전환하는 방법

CSS는 프론트엔드 개발이 마스터해야 하는 기술 중 하나이며, div 전환을 표시하고 숨기는 것이 중요한 부분입니다. 이 글에서는 CSS에서 div 표시와 숨기기를 전환하는 방법을 자세히 소개합니다.

1. div 표시 및 숨기기에 표시 속성을 사용합니다.

CSS에서 div 표시와 숨기기 간을 전환하는 데 가장 일반적으로 사용되는 방법은 표시 속성을 사용하는 것입니다. 디스플레이는 요소의 가시성과 표현성을 제어할 수 있으며, 이 속성을 통해 필요한 숨겨진 div 효과를 얻을 수 있습니다.

일반적으로 사용되는 표시 값은 block, inline, inline-block, none 등이며, 그 중 none은 div를 숨기는 열쇠입니다.

CSS 코드는 다음과 같습니다.

.hide {
    display: none;
}
.show {
    display: block;
}

Hide는 .hide 요소의 표시 속성을 없음으로 설정하여 달성되며, .show 요소의 표시 속성은 차단되어 표시됩니다.

div 표시 및 숨기기를 제어하려면 JavaScript 또는 jQuery를 사용하여 이러한 CSS 클래스에 액세스하고 필요한 경우 추가하거나 제거할 수 있습니다.

예:

HTML 코드:

<button id="hidden_btn">点击隐藏</button>
<div id="hidden_div" class="hide">隐藏文本</div>

JS 코드:

$(document).ready(function() {
    $("#hidden_btn").click(function() {
        $("#hidden_div").toggleClass("hide");
        $("#hidden_div").toggleClass("show");
    });
});

여기에서는 클래스를 전환하기 위해 jQuery의ggleClass() 메서드를 사용합니다. 이 메서드는 편집기에서 .hide 클래스를 삭제합니다. .show 클래스를 추가하여 div를 숨김에서 표시로 전환합니다.

2. div를 표시하고 숨기려면 가시성 속성을 사용하세요.

표시 속성과 마찬가지로 가시성 속성도 요소의 가시성을 제어하는 ​​데 사용할 수 있습니다.

가시성 속성을 사용하여 요소를 숨기면 해당 요소는 HTML 문서에서 여전히 공간을 차지하고 시각적으로 투명하거나 보이지 않게 되지만 크기와 위치는 페이지에 그대로 유지됩니다.

CSS 코드는 다음과 같습니다.

.hide {
    visibility: hidden;
}
.show {
    visibility: visible;
}

CSS 코드 예제는 표시 속성을 사용하는 표시 예제와 유사합니다. 여기서는 JS 코드에 대해서만 설명합니다.

JS 코드:

$(document).ready(function() {
    $("#hidden_btn").click(function() {
        $("#hidden_div").toggleClass("hide");
        $("#hidden_div").toggleClass("show");
    });
});

toggleClass() 메서드는 다음과 같습니다. 클래스를 전환하는 데에도 사용됩니다.

3. 불투명도 속성을 사용하여 div를 표시하고 숨깁니다.

불투명도 속성은 요소의 투명도를 설정하는 데 사용됩니다. 값 범위는 0.0에서 1.0이며, 0.0은 요소가 완전히 투명함을 의미합니다. 요소가 완전히 불투명하다는 의미입니다.

CSS 코드는 다음과 같습니다.

.hide {
    opacity: 0;
    height: 0;
    overflow: hidden;
}
.show {
    opacity: 1;
    height: auto;
}

opacity 속성을 사용하는 것 외에도 div를 숨길 때 공간이 남는 문제를 해결하기 위해 높이 및 오버플로 속성도 정의합니다.

hide 클래스를 적용하면 div의 높이가 0으로 설정되고 내용이 숨겨집니다. 전환 후 높이를 자동으로 조정하기 위해 .show 클래스에서 높이를 auto로 설정하여 전환 시 div가 자동으로 조정되어 표시되도록 했습니다.

JavaScript 코드를 다시 살펴보겠습니다.

JS 코드:

$(document).ready(function() {
    $("#hidden_btn").click(function() {
        $("#hidden_div").toggleClass("hide");
        $("#hidden_div").toggleClass("show");
    });
});

또한ggleClass() 메서드를 사용하세요.

4. 요약

위는 CSS에서 div를 표시하고 숨기는 세 가지 주요 방법으로 표시 속성, 가시성 속성, 불투명도 속성을 사용합니다. 실제 적용에서는 특정 요구 사항에 따라 어떤 방법을 사용할지 선택해야 합니다.

또한 가시성과 표시를 결합한 값(visibility:hidden;display:none)이 자주 사용됩니다. 이 값은 요소를 보이지 않게 하고 화면 공간을 차지하지 않는다는 장점이 있습니다. JS 코드가 요소를 호출하면 요소의 위치 정보를 얻을 수 있습니다. 그러나 visible:hidden;display:none을 사용하면 요소가 더 이상 클릭 이벤트에 응답하지 않으며 이는 애플리케이션에 영향을 미칠 수 있습니다. 따라서 사용시 구체적인 상황에 따라 선택해야 합니다.

간단히 말하면, 개발된 웹 페이지를 시각적 효과 측면에서 더 좋게 만들고, 사용자 경험을 개선하고, 후속 JS 개발을 위한 탄탄한 기반을 마련하려면 CSS 속성을 숙달하고 능숙하게 사용해야 합니다.

위 내용은 CSS에서 div 표시 및 숨기기 간을 전환하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!