[CSS] display:none 대신 사용하는 visiblity

CSS

display=none; 

=> 대상을 숨길 때 사용

 

=> opacity: 0; 도 사용 가능

visibility : hidden 을 써야 애니메이션이 잘 먹는다.

.black-bg {
  visibility : hidden;
  opacity : 0;
}
.show-modal {
  visibility : visible;
  opacity : 1;
}

 

opacity: 0; 의 반대는  opacity: 1; 을 사용 

visilbility: hidden 반대로는 visible 을 사용해주면 된다.

 

transition : all 1s;

= 1초에 걸쳐서 천천히 변하게 해달라는 의미