display 속성

display속성은 레이아웃을 제어하는 가장 중요한 CSS 속성이다. 이는 웹페이지에서 요소(element)가 어떻게 표시되고 다른 요소와 어떻게 상호 배치되는지를 결정한다.

모든 HTML 요소에는 요소 유형에 따라 기본 표시 값이 있다. 대부분의 요소에 대한 기본 표시 값은 block 또는 inline 이며 여기에 더불어 inline-block까지 이 포스트에서 알아보고자 한다.

사진 출처: https://www.tutorialbrain.com/css_tutorial/css_display/

block

• display 속성이 block인 요소는 전후 줄바꿈이 들어가 항상 새 줄에서 시작하고 좌우로 최대한 늘어나 사용 가능한 전체 너비를 차지한다.
• 대표적인 block 요소에는 <div>, <h1>, <p>, <form>, <header>, <footer>, <section> 등이 있다.
• block 요소는 한 영역을 차지하는 박스 형태를 가지고 있기 때문에 기본 width값은 100% 이다. 따라서 요소 옆에 다른 요소를 붙여 넣을 수 없다.
• 박스 모델의 모든 속성인 width, height, margin, padding , border 속성을 지정할 수 있다.

inline

• inline 요소는 새 줄에서 시작하지 않고 필요한 만큼만의 너비를 차지한다. 따라서 다른 요소들과 줄바꿈 없이 한 줄에 나란히 배치될 수 있다.
• 대표적인 inline 요소에는 <span>, <a>, <img> 등이 있다.
• width, height 속성을 지정하여도 무시된다 - 해당 태그가 마크업하고 있는 컨텐트의 크기 만큼만 공간을 차지하도록 되어있기 때문. 높이 또한 폰트의 크기만큼 잡히게 됨.
• margin, padding , border 속성은 좌우에만 적용된다.

inline-block

• inline-block은 inline과 block의 특징을 모두 가진 요소이다.inline 요소처럼 줄바꿈 없이 한 줄에 다른 요소들과 배치되고, block 요소처럼 박스 모델의 모든 속성을 다룰 수 있다.
• width, height를 지정할 수 있다. 지정하지 않을 경우 inline과 같이 컨텐트 만큼 영역이 지정된다.
• margin, padding 속성의 상하 간격 지정이 가능하다.