display & visibility 차이

1. display

display: none - 컨트롤을 생성하지 않도록 설정하여 공간 차지도 하지 않습니다. display: inline - 아무런 선택을 하지않으면 기본값으로 선택되는 속성으로 inline요소로 작용하도록 설정하여 줄바꿈이 일어나지 않습니다. display: block - block요소로 작용하도록 설정하여 줄바꿈이 일어나게 됩니다. display: inline-block - 요소는 inline으로 작용하지만 내부는 block처럼 작용하도록 설정합니다.

2. visibility

visibility: visible - 아무런 선택을 하지않으면 기본값으로 선택되는 속성으로 그대로 보여줍니다. visibility: hidden - 요소가 보여지지 않지만 공간은 그대로 차지하고 있도록 요소를 감춰줍니다. visibility: collapse - <table> 태그에서만 사용할 수 있으며 선택 테이블의 행과 열을 보여지지 않지만 공간을 자지하고 있도록 요소를 감춰줍니다.

* 공간을 차지하면서 감추고 싶을 때는 visibility를 사용하고 요소를 생성하고 싶지 않을 때 display를 사용하면 됩니다.