display:none 과 visibility:hidden 의 차이

display:none과 visibility:hidden는 둘 다 요소를 안 보이게 하는 한다.

그럼 어떤 점이 다를까?

 

 

아래 박스를 가지고 테스트를 해보자

 

.box {
  border: 10px solid #3498db;
  padding: 20px;
  width: 100px;
  margin: 20px;
  display: inline-block;
}
.green {
  border-color: green;
}
.red {
  border-color: red;
}

 

Box2에 display:none 적용

.green {
  border-color: green;
  display: none;

 

 

Box2에 visibility:hidden 적용

.green {
  border-color: green;
  visibility: hidden;
}

 

적용한 결과를 보면 어떤 차이점이 있는지 확실히 볼 수 있다.

 

visibility:hidden 적용 결과

 

display:none은 아예 해당 영역이 사라졌지만

visibility:hidden은 요소는 없어지되 영역은 존재하는 것을 알 수 있다.

 

그럼 필요에 따라 적절히 사용하도록 하자!