[CSS] Display 속성 (block/inline)

display 속성은 웹 페이지의 레이아웃을 결정하는 CSS의 중요한 속성 중 하나입니다.

✔ display: block;

display 속성 값이 block인 요소는 해당 라인의 모든 너비를 차지합니다.

<div>, <h1>, <p>, <ul>, <li>, <article> ....

✔ display: inline;

display 속성 값이 inline인 요소는 해당 라인의 전체가 아닌 해당 HTML요소의 내용만큼 차지합니다.

<span>, <a>, <b>, <em>, <img> ....

✔ display: inline-block;

display 속성 값이 inline-block인 요소는 해당 요소 자체는 inline요소처럼 동작합니다.
inline요소에서 불가능하던 width와height속성 지정 및 margin과 padding속성 지정이 가능해 집니다.

✔ display 속성의 기본값 변경

display 속성값이 각각 block, inline 으로 지정되어 있어도 변경할 수 있습니다.

<style>
	li{display: inline;}
</style>

위의 예제 처럼 block요소인 li 태그의 속성 값을 inline으로 변경하게 되면 해당 라인의 모든 너비를 차지하는 block요소의 특징을 잃어버리게 됩니다. 이렇게 HTML 태그 별로 기본적으로 적용되어 있는 속성 값은 원하는 값으로 css를 이용해서 변경이 가능합니다.