표시:없음과 가시성:숨김의 차이점

display 속성은 요소의 표시 동작을 지정하는 데 도움이 됩니다.

표시:없음과 가시성:숨김의 차이점

두 속성을 모두 사용하여 요소를 숨길 수 있지만 둘 사이에는 차이가 있습니다.

빨강, 초록, 파랑 ​​색의 공 3개가 있다고 가정해 보겠습니다.

CSS 코드

녹색 공에 대해 display:none을 설정하면.

#green {
  background-color:green;
  width: 150px;
  height: 150px;
  border-radius: 50%;
  display: none;
}

이제 녹색 공이 제거되었지만 HTML 구조에는 여전히 존재하며 display:none 속성으로 인해 삭제된 것처럼 보입니다. 파란 공이 위로 이동하여 녹색 공을 차지했습니다.

동일한 녹색 공에 대해 Visibility:hidden을 설정하면 어떤 일이 발생하는지 봅시다.

#green {
  background-color:green;
  width: 150px;
  height: 150px;
  border-radius: 50%;
  visibility: hidden;
}

visbility:hidden 속성은 녹색 공을 제거하지 않고 보이지 않게 만듭니다.