display: block과 inline

새로운 내용이나 변경 사항을 알려면 트위터를 팔로우해주세요.

다음 html 코드는

<div>div1</div>
<div>div2</div>
<div>div3</div>

웹 브라우저에 다음과 같이 표시됩니다.

다음 html 코드는

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

웹 브라우저에 다음과 같이 표시됩니다.

이 둘의 큰 차이는 줄 바꿈 여부입니다. div 태그는 줄 바꿈되고, span 태그는 줄 바꿈되지 않습니다.

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

다음과 같이 반대로 설정하면

div {
  display: inline;
}

span {
  display: block;
}

결과는 다음과 같습니다.

block과 inline의 차이점에 줄 바꿈만 있는 것은 아닙니다.