display의 inline, block, inline-block 요소

모든 html요소에는 요소 유형에 따라 기본 표시 값이 있다. 인라인과 블록 방식이다.

 

none요소는 요소가 숨겨져서 페이지에 요소가 없는 것처럼 표시된다. visibility:hidden도 비슷한 기능을 하나 none의 경우 공간조차 차지하지 않는다.

 

inline요소는 요소들이 가로로 배치되며 <a>, <img>, <input>, <span> 태그 등이 있다. 인라인 요소는 너비, 높이를 지정할 수 없다. 필요한 만큼만 너비를 차지한다. 주로 목록에서 사용된다.

 

block요소는 요소들이 세로로 배치되며 <div>, <h1>, <form>태그 등이 있다. <img> 태그같은 인라인 레벨 요소도 블록레벨 요소로 바꿀 수 있다. 블록 요소는 가능한 최대의 너비 값을 가진다. 위쪽 여백과 아래쪽 여백속성을 줄 수 있다.

 

inline-block요소는 인라인 요소지만 블록 요소 처럼 너비, 높이를 지정할 수 있는 요소이다.

 

또한 요소가 inline이면 text-align으로, block요소이면 margin : 0 auto를 사용한다.(기존 마진값을 유지하려면 margin-left, margin-right를 따로 주어야한다.)