다른 요소는 계속 표시하면서 CSS를 사용하여 요소의 텍스트 노드를 숨기려면 어떻게 해야 합니까?

요소 내의 텍스트 노드 타겟팅

CSS를 사용하면 특정 요소와 해당 하위 요소의 스타일을 지정할 수 있지만, 요소를 숨기거나 조작하려는 경우 어떻게 해야 합니까? 주변 요소를 표시하면서 요소 내의 텍스트를 표시합니까? 다음 HTML을 고려해 보세요.

<div>
<p>div나 그 안에 있는 링크에 영향을 주지 않고 "닫으려면 클릭하세요"라는 텍스트를 숨기는 것이 목표입니다.</p>
<p><strong>가시성 활용</strong></p>
<p>visibility 속성은 요소를 숨기거나 표시할 수 있습니다. 그러나 표시 속성과 달리 하위 요소에 대해 개별적으로 가시성을 설정할 수 있습니다. 이를 통해 텍스트 노드를 선택적으로 숨길 수 있습니다.</p>
<pre class="brush:php;toolbar:false">#closelink {
  visibility: collapse;
}

#closelink a {
  visibility: visible;
}

이 예에서는 div(#closelink)의 가시성이 "축소"되어 텍스트 노드를 포함한 전체 내용을 숨깁니다. 그러나 div(a) 내 링크의 가시성은 "visible"로 설정되어 상위 링크의 가시성을 무시하고 링크와 포함된 텍스트를 드러냅니다.

이 기술은 가시성을 유지하면서 텍스트 노드를 효과적으로 숨깁니다. 주변 요소를 제어하여 CSS의 세밀한 콘텐츠 조작을 위한 빠르고 쉬운 솔루션을 제공합니다.