CSS에서 클릭하여 숨기기 표시를 구현하는 방법

CSS Click to Hide Show

오늘날 인터넷 시대에 웹 디자인의 초점은 단순한 정적 디스플레이에서 더욱 발전된 대화형 경험으로 옮겨졌습니다. 그 중 숨기기 및 표시는 가장 일반적으로 사용되는 상호 작용 방법 중 하나입니다. 이 방법을 사용하면 사용자가 필요한 정보를 보다 편리하게 얻을 수 있으며 페이지에서 중복되는 내용을 크게 줄일 수 있습니다. CSS에는 숨기고 표시하는 방법이 여러 가지 있는데, 이번 글에서는 그 방법을 하나씩 소개하겠습니다.

1. 디스플레이 속성을 사용하세요

CSS의 디스플레이 속성 값은 요소의 표시 여부를 제어합니다. 값은 다음과 같습니다:

• none: 요소가 페이지에서 완전히 제거되고 레이아웃에 완전히 표시되지 않습니다.
• block: 요소는 블록 수준 요소로 표시됩니다. 즉, 전체 줄을 차지합니다.
• inline: 요소가 인라인 요소로 표시됩니다. 즉, 텍스트와 동일한 공간을 차지합니다.
• inline-block: 요소가 인라인 요소로 표시되지만 너비, 높이 등의 속성을 설정할 수 있습니다.

display 속성을 사용하면 요소의 표시 속성을 추가하거나 제거하여 숨기고 표시할 수 있습니다. 샘플 코드는 다음과 같습니다.

HTML 코드:

<div class="box">
  <p>隐藏的内容</p>
</div>
<button id="toggle">显示/隐藏</button>

CSS 코드:

.box {
  display: none;
}

JavaScript 코드:

document.getElementById("toggle").addEventListener("click", function() {
  var box = document.querySelector(".box");
  if(box.style.display === "none") {
    box.style.display = "block";
  } else {
    box.style.display = "none";
  }
});

2. 불투명 속성 사용

불투명 속성은 요소의 투명도를 제어하여 숨기거나 표시하는 효과를 얻습니다. 불투명도 속성을 0으로 설정하면 요소가 완전히 투명해 보이지 않습니다. 불투명도 속성이 1이면 완전히 보입니다. 하지만 여전히 페이지의 공간을 차지합니다.

HTML 코드:

<div class="box">
  <p>隐藏的内容</p>
</div>
<button id="toggle">显示/隐藏</button>

CSS 코드:

.box {
  opacity: 0;
  transition: opacity 0.5s ease-in-out;
  pointer-events: none;
}

.box.show {
  opacity: 1;
  pointer-events: auto;
}

JavaScript 코드:

document.getElementById("toggle").addEventListener("click", function() {
  var box = document.querySelector(".box");
  box.classList.toggle("show");
});

3. 가시성 속성 사용

가시성 속성은 요소가 숨겨져 있지만 여전히 공간을 유지하는지 여부를 제어하며 요소를 완전히 제거하지는 않습니다. 페이지에서. 가시성 속성이 숨김으로 설정되면 요소는 숨겨지지만 여전히 페이지에서 공간을 차지합니다. 가시성 속성이 표시되면 완전히 표시됩니다.

HTML 코드:

<div class="box">
  <p>隐藏的内容</p>
</div>
<button id="toggle">显示/隐藏</button>

CSS 코드:

.box {
  visibility: hidden;
}

.box.show {
  visibility: visible;
}

JavaScript 코드:

document.getElementById("toggle").addEventListener("click", function() {
  var box = document.querySelector(".box");
  box.classList.toggle("show");
});

요약하자면 표시, 불투명도 또는 가시성 속성이든 숨기고 표시하는 효과를 얻을 수 있습니다. 이 세 가지 방법은 각각 장점과 단점이 있으며 실제 필요에 따라 적절한 방법을 선택할 수 있습니다.

위 내용은 CSS에서 클릭하여 숨기기 표시를 구현하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!