display 속성

display 속성은 html 요소를 어떻게 표시할지 지정하는 속성입니다.
html 요소마다 기본적으로 갖고 있는 display 속성 값이 다릅니다.
대표적인 display 속성을 알아보도록 하겠습니다.

none

요소를 보이지 않게 설정합니다. visibility 속성을 hidden으로 설정한 것과 달리 영역도 차지하지 않습니다.

block

기본적으로 가로 영역을 모두 채우며 block 요소 다음에 등장하는 태그는 줄바꿈이 되어 화면에 배치 됩니다. 문서에서 문단을 표시할 때 주로 사용합니다. 각각의 block 속성을 가진 요소들은 세로로 배치 됩니다.

• width, height 속성을 지정 할 수 있습니다.
• block level element의 대표적인 태그는 h1~6, div, p 태그 등이 있습니다.

inline

컨텐츠만큼 영역을 차지합니다. 각각의 inline 속성을 가진 요소들은 가로로 배치 됩니다.

• block과 달리 줄 바꿈이 되지 않으며 width, height 속성을 지정 할 수 없습니다.
• 보통 word 같은 문서에서 글자나 문장에 효과를 주는데 사용 됩니다.
• inline level element의 대표적인 태그는 span, a 태그 등이 있습니다.

inline-block

• block과 inline의 중간 형태로 요소는 inline인데 내부는 block처럼 속성을 지정할 수 있습니다.
• inline 처럼 컨텐츠 만큼 영역을 차지하여 가로로 배치되지만 block처럼 내부 속성인 width, height등과 같은 값을 변경할 수 있습니다.