display: none과 visibility: hidden

CSS에서 display 속성을 none으로 설정하는 것과 visibility 속성을 hidden으로 설정하는 것은 비슷하지만 명확한 차이가 있다.

다음 HTML이 있다.

<div id="one">One</div>
<div id="two">Two</div>
<div id="three">Three</div>

CSS 설정은 다음과 같다.

div {
  border: 1px solid silver;
  height: 15px;
  margin: 10px 0;
  text-align: center;
  width: 200px;
}

웹 브라우저에 아래와 같이 표시된다.

먼저 두번째 태그(two) display 속성을 none으로 설정하면

#two {
  display: none;
}

웹 브라우저에 아래와 같이 표시된다.

display 속성을 none으로 설정하면 해당 태그가 HTML 문서 상에 존재하지 않는 것과 같이 된다. 즉, 태그가 아래와 같다고 할 수 있다.

<div id="one">One</div>
<div id="three">Three</div>

반면에 두번째 태그(two) visibility 속성을 hidden으로 설정하면

#two {
  visibility: hidden;
}

웹 브라우저에 아래와 같이 표시된다.

visibility 속성을 hidden으로 설정하면 해당 태그 내용은 보이지 않지만 해당 태그가 차지하는 공간은 비워진채로 표시된다.