CSS에서 display 속성은 HTML 요소의 레이아웃을 지정하는 데 사용됩니다. 이 중에서도 inline, block, inline-block display 속성은 가장 많이 사용되는 속성 중 하나입니다. 이들 속성의 차이는 다음과 같습니다.
- inline
- 텍스트와 같이 줄바꿈 없이 연속된 요소들을 수평으로 배열합니다.
- width와 height 속성을 지정할 수 없으며, margin, padding 속성의 상하좌우 값은 지정할 수 있지만 상하는 적용되지 않습니다.
- 내부의 content 크기에 따라 크기가 결정됩니다.
- block
- 개별 요소가 새로운 줄에서 시작됩니다.
- width, height, margin, padding 등 다양한 속성을 지정할 수 있습니다.
- 내부의 content 크기에 상관없이 부모 요소의 너비를 모두 차지합니다.
- inline-block
- inline과 block의 중간 형태로, inline처럼 줄바꿈 없이 연속된 요소들을 수평으로 배열하면서도, width와 height 속성을 지정할 수 있습니다.
- margin, padding 등 다양한 속성을 지정할 수 있습니다.
내부의 content 크기에 상관없이 지정된 너비와 높이 값을 가집니다.
이들 display 속성을 이용하면, HTML 요소의 레이아웃을 쉽게 지정할 수 있습니다. inline은 텍스트나 링크, 이미지 등의 작은 요소를, block은 div와 같은 큰 요소를, inline-block은 버튼과 같은 크기가 중간 정도인 요소를 표현하는 데 많이 사용됩니다.
FE DEVELOPER