display: block과 inline

아래 태그는

<div>div1</div>
<div>dIv2</div>
<div>div3</div>

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

반면에 아래 태그는

<span>span1</span>
<span>span2</span>
<span>span3</span>

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

이 둘 사이에 나타나는 가장 큰 차이는 줄 바꿈 여부이다. div 태그는 줄바꿈되고, span 태그는 줄바꿈되지 않는다.

div 태그가 줄바꿈되는 이유는 CSS display 속성 기본 값이 block이기 때문이고, span 태그가 줄바꿈되지 않는 이유는 CSS display 속성 기본 값이 inline이기 때문이다.


아래처럼 반대로 설정하면

div {
  display: inline;
}

span {
  display: block;
}

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

block과 inline의 차이점은 줄바꿈만은 아니다.

• block으로 설정하면 줄바꿈 되고, inline으로 설정하면 줄바꿈이 되지 않는다.
• block으로 설정하면 상/하 margin과 padding 속성을 사용할 수 있지만, inline으로 설정하면 상/하 margin과 padding 속성을 사용할 수 없다.
• block으로 설정하면 width, height 속성을 사용할 수 있지만, inline으로 설정하면 width, height 속성을 사용할 수 없다.
  

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으로 설정하면 해당 태그 내용은 보이지 않지만 해당 태그가 차지하는 공간은 비워진채로 표시된다.