visibility,opacity

지그재그 화면을 따라 만들어보면서,
팝업창 닫기를 클릭하면 팝업창이 사라지도록 만들고 싶었다.
이 때 사용한 프로퍼티를 다시한번 복습겸 정리해두고, 각 차이점을 이해해야겠다.

visibility

프로퍼티값 키워드 설명

visibility: hidden;
visibility: none;

visible

해당 요소를 보이게 한다 (기본값)

hidden

해당 요소를 보이지 않게 한다.

• none은 해당 요소의 공간까지 사라지게 한다. 즉, 해당 공간이 사라지면서 다른 영역들이 재배치될 수도 있다.
• hidden은 해당 요소의 공간은 사라지지 않고 남아있게 된다.

collapse

table 요소에 사용하며 행이나 열을 보이지 않게 한다.

none

table 요소의 row나 column을 보이지 않게 한다. IE, 파이어폭스에서만 동작하며 크롬에서는 hidden과 동일하게 동작한다.

opacity