[css] property: display

display는 웹 페이지가 어떻게 보일지에 대해서 레이아웃을 정하는 속성입니다. 대부분의 HTML 요소는 display 속성의 기본값으로 block과 inline 값 중 하나의 값을 가집니다.

블록(block)

display 속성값이 블록block인 요소는 언제나 새로운 줄에서 시작하며, 해당 라인의 모든 너비를 차지합니다.

  ex) <div> ,<h1> ,<p>, <nav>,<ul>,<li>

인라인(inline)

display 속성값이 inline인 요소는 다른 요소들과 함께 한 줄에 배치됩니다. 또한, 요소의 너비도 해당 라인 전체가 아닌 해당 HTML 요소의 content만큼만 차지합니다. 때문에 width와 height 속성을 지정할 수 없습니다.

  ex) <i> , <b> , <img> ,<span> , <a> ,<button> 등

display 속성값이 block인 요소의 속성값을 inline으로 바꿀 수 있으며, 그 반대도 가능합니다. 그러나 속성값을 변경한다고 해도 실제로 다른 타입의 요소로 바뀌는 것은 아니기에 속성값을 inline에서 block으로 변경하더라도 변경된 요소는 다른 요소를 포함할 수 없습니다.

이 외에도 display 속성에 자주 사용되는 속성값에는 인라인-블록(inline-block)이 있습니다.

인라인-블록(inline-block)

display 속성값이 inline-block으로 설정된 요소는 inline 요소처럼 동작하지만, 해당 요소 내부에서는 block 요소처럼 동작합니다. 따라서 in-line 요소처럼 width와 height 속성을 지정할 수 있으며, block 요소처럼 margin을 이용하여 여백을 지정할 수도 있게 됩니다.