[HTML/CSS] display 속성 알아보기 (display:none과 visibility:hidden 차이)

display는 요소를 어떤 형태로 나타나게 할 것인지를 말하는 속성으로, 기본적으로 네가지가 있습니다. 최신 웹에선 flex나 grid와 같은 새롭고 편리한 속성들이 등장하지만 브라우저 호환도가 떨어지는 등의 이슈가 있어, 나중에 다루도록 하겠습니다.

 

display : block
display : inline-block
display : inline
display : none

 

display : block

항상 새로운 라인에 요소가 배치되고 화면 크기의 전체 가로폭을 영역으로 차지합니다. width 또는 height 지정을 통해 가로 세로폭을 조절할 수 있습니다. <div> 태그가 기본적으로 block을 기본 display 설정으로 갖습니다.

아래 그림의 배경이 빨갛게 된 부분은 <span> 영역으로 기본적으로 display : inline 속성을 갖습니다. 이 속성은 안에 가진 텍스트 영역만큼만을 차지합니다.

이 요소에 display:block을 주어 보겠습니다.

display : block을 주자 빨간 배경이 텍스트 영역을 넘어서 부모 박스의 너비만큼 차지했습니다.

 

 

display:inline-block

이번에는 이 요소에 display : inline-block을 주어 보겠습니다.

겉보기에는 display:inline과 아무 차이 없이 다른 요소와 한 줄로 배치됩니다. 그러나 inline-block에 width와 height값을 주면 그 영역 만큼을 차지하게 할 수 있습니다. (inline은 width 및 height 값을 줄 수 없습니다.)

 

 

display:none vs visibility : hidden

display:none와 visibility : hidden은 둘 다 요소를 보이지 않게 하는 속성이라는 점에서 같지만, UI적으로 볼 때 둘은 완전히 다릅니다. display:none은 화면 상 어떤 영역을 차지하지 않고 완전히 삭제된 것처럼 보이게 합니다. 그러나 visibility:hidden은 해당 요소가 보이지 않을 뿐 요소가 존재하는 영역은 확실히 보이게 됩니다.

아까 활용한 display:block을 준 <span> 요소를 사용해 확인해 보겠습니다. 아시다시피 기본 모양은 다음과 같습니다.

 

 

여기에 display:none을 주면 아예 그 요소가 존재하지 않았다는 듯 사라진 것처럼 보입니다.

 

display:none

이번에는 visibility:hidden을 줘 보았습니다. 확실히 요소는 보이지 않지만, div 영역은 확실히 잡고 있습니다.

 

visibility : hidden