display:none; 과 visibility:hidden; 의 간단한 차이점

우선 위 두 속성은 똑같이 태그를 숨기는 역활을 하는 속성인데, 약간의 차이점을 보인다

우선 display:none; 의 경우 해당영역 자체를 차지하지 않으면서 숨기는 역활을 하는 속성이며,  visibility:hidden; 의 경우 디스플레이속성과 비슷하지만 해당 영역을 차지하면서 숨기는 역활을 하는 속성이다.

예를들자면 

1

2

3

이런 속성이 있는데 2번에 display:none;의 속성을 주게되면

1

3

이런 상태가 되는 것이고visibility:hidden; 을 주게 되면

1

(빈칸)

3

이런 식이 되는 것이다.