CSS 숨겨진 요소 숨겨진

CSS 숨겨진 요소 숨기기

요소 숨기기는 웹사이트를 디자인하고 개발할 때 자주 사용되는 기술입니다. 때로는 페이지에서 불필요한 콘텐츠를 숨기고 싶을 수도 있고 필요할 때 일부 요소를 표시하고 싶을 수도 있습니다. CSS의 숨겨진 요소 숨기기 기술을 사용하면 이를 쉽고 우아하게 만들 수 있습니다.

이 글에서는 CSS에서 요소를 숨기는 두 가지 방법인 표시 속성과 가시성 속성을 소개합니다.

디스플레이 속성을 사용하여 요소 숨기기

디스플레이 속성은 요소의 모양과 동작을 제어합니다. 많은 값을 사용할 수 있지만 그 중 블록, 인라인, 없음의 세 가지에만 중점을 둘 것입니다.

display 속성의 값이 block이면 해당 요소는 페이지에 블록 수준 요소로 표시됩니다. 블록 수준 요소는 항상 새 줄에서 시작하고 사용 가능한 전체 너비를 차지합니다. 이는 동일한 행의 모든 ​​요소를 ​​새 행으로 푸시한다는 의미입니다.

display 속성의 값이 인라인이면 해당 요소가 페이지에 인라인 요소로 표시됩니다. 인라인 요소는 텍스트 흐름을 방해하지 않지만 현재 텍스트 줄 내에 나타납니다. 그들은 필요한 너비만 차지하며 새 줄을 강요하지 않습니다.

display 속성의 값이 없음이면 해당 요소가 페이지에서 제거되고 차지하는 공간은 유지되지 않습니다. 즉, display:none을 사용하면 요소를 완전히 숨길 수 있으며 다른 요소는 자동으로 요소의 원래 위치를 채웁니다.

다음은 표시 속성을 사용하여 요소를 숨기는 방법을 보여주는 몇 가지 샘플 코드입니다.

.hide {
  display: none;
}

.hide-block {
  display: block;
  height: 0;
  overflow: hidden;
}

.hide-inline {
  display: inline;
  visibility: hidden;
}

위 코드에서 첫 번째 코드는 display:none을 사용하여 요소를 완전히 숨깁니다. 두 번째 코드 부분은 display:block 및 height:0을 사용하여 블록 수준 요소의 높이를 0으로 설정하고, Overflow:hidden을 사용하여 결과 문제를 해결합니다. 세 번째 코드 부분은 display:inline 및 visible:hidden을 사용하여 인라인 요소의 너비를 0으로 지정하지만 차지하는 공간은 그대로 유지합니다.

가시성 속성을 사용하여 요소 숨기기

가시성 속성으로 요소를 숨길 수도 있습니다. 여기에는 표시 및 숨김이라는 두 가지 값이 있습니다.

visibility 속성의 값이 표시되면 해당 요소는 페이지에 일반 요소로 나타납니다. 가시성 속성은 기본적으로 표시되도록 설정됩니다.

visibility 속성 값을 숨기면 요소가 페이지에 표시되지 않지만 차지하는 공간은 유지됩니다. 즉, 요소가 표시되지 않더라도 페이지 레이아웃은 영향을 받지 않습니다.

다음은 visible 속성을 사용하여 요소를 숨기는 방법을 보여주는 샘플 코드입니다.

.invisible {
  visibility: hidden;
}

위 코드는 visible:hidden을 사용하여 요소를 보이지 않게 하지만 차지하는 공간은 그대로 유지합니다.

요약

CSS를 사용하여 요소를 숨기는 것은 일반적인 웹사이트 디자인 및 개발 기술입니다. CSS의 표시 속성과 가시성 속성을 사용하면 요소를 쉽게 숨기고 필요할 때 다시 표시할 수 있습니다. 요소를 완전히 숨기려면 display:none을 사용하고, visible:hidden은 요소를 보이지 않게 하지만 차지하는 공간을 유지합니다. 실제 개발에서는 페이지의 접근성과 사용자 경험에 영향을 주지 않도록 CSS 숨겨진 요소를 주의해서 사용해야 합니다.

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