[CSS] display와 visibility 차이

 

 

 

 

 

 display  는 요소를 인라인 속성으로 보여줄지, 블록 속성으로 보여줄지 등 요소의 표시 방법을 지정합니다.

 visibility  는 요소의 표시 또는 숨김 여부를 지정합니다.

 

 

 

 

 display: none  과  visibility: hidden  이 속성들은 둘 다 요소를 숨겨 보이지 않게 합니다.

요소를 숨기는 기능은 똑같지만 차이점이 있습니다.

 

 display: none  은 요소의 영역까지 없애기 때문에, 마치 페이지에 해당 요소가 없는 것처럼 표시됩니다.

 visibility: hidden  은 요소는 숨기지만 영역은 그대로 남겨두므로, 해당 요소의 영역이 공백으로 표시됩니다.

 

 

 

다음 예시에서 빨강, 노랑, 초록 중 가운데 있는 노랑을 숨겨보겠습니다.

 

빨강

노랑

초록

 

 

display: none

 

.yellow { display: none; }

 

빨강

노랑

초록

 

 

visibility: hidden

 

.yellow { visibility: hidden; }

 

빨강

노랑

초록