CSS로 콘텐츠 숨기기 및 표시: JavaScript를 사용하지 않는 트릭

웹 개발 작업을 할 때 콘텐츠 표시 여부를 제어하는 ​​것이 필수적인 경우가 많습니다. 전통적으로 이는 JavaScript를 사용하여 달성되었지만 CSS를 사용하여 우아한 숨기기 및 표시 효과를 만들 수도 있습니다. 이러한 기술 중 하나가 아래에 설명되어 이전 접근 방식에서 직면한 특정 문제를 해결합니다.

콘텐츠 숨기기/표시 토글:

CSS를 사용하여 다음과 같은 콘텐츠 토글을 만들 수 있습니다. 사용자가 항목 목록을 숨기거나 표시할 수 있습니다. 다음 스니펫은 이 기능을 보여줍니다.

#cont {
  display: none;
}
.show:focus   .hide {
  display: inline;
}
.show:focus   .hide   #cont {
  display: block;
}

도전 과제:

위 CSS는 원하는 효과를 달성하지만 단점이 있습니다. 콘텐츠가 표시되면 페이지의 아무 곳이나 클릭하기만 하면 숨길 수 있습니다. "숨기기" 링크를 클릭할 때만 콘텐츠가 숨겨지기를 원하므로 이러한 동작은 바람직하지 않습니다.

해결책:

이 문제를 해결하려면 다음을 따르세요. 수정된 CSS 및 HTML 코드를 사용할 수 있습니다:

CSS:

body {
  display: block;
}
.span3:focus ~ .alert {
  display: none;
}
.span2:focus ~ .alert {
  display: block;
}
.alert {
  display: none;
}

HTML:

Hide Me
Show Me
Some alarming information here

이러한 변경 사항을 적용하면 "Hide Me" 범위 요소를 클릭할 때만 경고 메시지가 숨겨집니다. 이 솔루션은 문제를 효과적으로 해결하고 JavaScript에 의존하지 않고 콘텐츠를 숨기고 표시하는 CSS 기반 방법을 제공합니다.