css의 display 속성 중 inline, inline-block, block
에 대해 설명해 보겠습니다.
첫번째로 block 입니다.
가장 많이 쓰이는 속성 중 하나입니다.
div, p, form, header, footer, section 등이 이에 속합니다.
display: block; 으로 지정된 엘리먼트들은 자식 엘리먼트의 내용과 관련없이 새로운 줄에서 시작해 영역을 차지할 수 있을 만큼 차지합니다.
또한 width, height를 지정할 수 있습니다.
두번째로 inline에 대해 알아보겠습니다.
inline 엘리먼트로는 대표적으로 span이 있는데
특징으로는 block 속성과는 달리 줄바꿈이 이루어지지 않으며 자식 엘리먼트의 내용만큼만 영역을 차지합니다. 또한 자식 엘리먼트의 내용만큼만 영역을 차지하기에 width, height를 설정할 수 없습니다.
세번째로 inline-block입니다.
inline, block의 특징을 모두 가진 속성입니다.
block속성처럼 width, height를 지정할 수 있습니다. 그리고 inline 속성처럼 줄바꿈이 이루어지지 않으며
width, height가 지정되어 있지 않을경우 inline속성처럼 자식 엘리먼트의 내용만큼만 영역을 차지합니다.
응애