CSS에서 display
속성은 웹페이지 상에서 엘리먼트들이 어떻게 보여지고 다른 엘리먼트와 어떻게 상호 배치되는지를 결정한다.
display
속성이 inline
으로 지정된 엘리먼트는 전후 줄바꿈 없이 한 줄에 다른 엘리먼트들과 나란히 배치된다.
대표적인 인라인 엘리먼트로 <span>
<a>
<em>
태그 등을 들 수 있다.
inline 속성의 특징
- 해당 태그가 마크업하고 있는 컨텐트의 크기 만큼만 공간을 차지한다
>>width
height
속성을 무시해도된다
margin
padding
속성은 좌우 간격만 반영되고 상하 간격은 반영되지 않는다
display
속성이 block
으로 지정된 엘리먼트는 전후 줄바꿈이 들어가 다른 엘리먼트들을 다른 줄로 밀어내고 혼자 한 줄을 차지한다.
대표적인 block
엘리먼트로 <div>
<p>
<h1>
태그 등을 들 수 있습니다.
block 속성의 특징
- 해당 태그가 마크업하고 있는 컨텐트는 디폴트값으로 화면 가로길이 전체의 공간을 차지한다.
width
height
margin
padding
속성 모두 반영할 수 있다.
display
속성이 inline-block
으로 지정된 엘리먼트는 inline 속성과 block 속성을 모두 가지고 있다.
대표적인 inline-block
엘리먼트로 <button>
<input>
<select>
태그 등을 들 수 있습니다.
inline-block 속성의 특징
- 기본적으로
inline
엘리먼트처럼 전후 줄바꿈 없이 한 줄에 다른 엘리먼트들과 나란히 배치되면서block
엘리먼트처럼width
height
속성 지정 및margin
padding
속성의 상하 간격 지정이 가능하다
inline-block
을 이용하면 여러 개의 엘리먼트를 한 줄에 정확히 원하는 너비만큼 배치할 수 있기 때문에 레이아웃에 활용할 수 있다.
그러나 내부 스타일이 지정되어 있기 때문에 기본 margin
값을 가져 요소간에 간격이 있기때문에 요소간 간격 조정시 약간의 오차가 생길수 있다.
정확한 레이아웃을 위해서는 block 요소를 flex
속성을 이용해 레이아웃 하는게 좋아 보인다.